DOM API

limo_chen
148 阅读3分钟

网页就像是一棵树，JS如何操作这棵树？

浏览器往window上加一个document即可，把网页抽象成一个DOM对象，并对他进行操作的一种方式，这就是 Document Object Model(文档对象模型)

获取元素的 API

如何获取元素，也叫标签

有很多API

  • window.idxxx或者直接idxxx

  • document.getElementByld('idxxx') 大部分时候，只要你的id名字跟全局属性冲突，就只能用document.getElementByld('idxxx')

  • document.getElementsByTagName('div')[0]

  • document.getElementsByClassName('red')[0]

  • document.querySelector('#idXXX')[0]后面是id的话一定要加#号。 例如 document.querySelector('div>span:nth-child(2)')

  • document.querySelectorALL('.red')[0]用来找到所有满足这个条件的元素

以上要兼容IE时才能用getElement(s)Byxxx，建议直接用querySelector和querySelectorAll

获取特定的元素

  • 获取html元素：document.documentElement
  • 获取head元素：document.head
  • 获取body元素：document.body
  • 获取窗口（窗口不是元素）：window（一般用来做一些全局监听）
  • 获取所有元素：document.all(这个document.all是第六个falsy值)
  • 举例：

if（document.all）{console.log（'ie浏览器'）;只能在IE中运行}else{console.log（'其他浏览器'）;只能在非IE中运行}

所以document.all在chrome中为假，但是document.all[1]可以用来找元素，功能还是可以实现，就是可以区分是IE还是非IE浏览器

我们获取的元素都是个对象，我们需要搞清它的原型

console.dir(div) dir为打出这个div的结构

区分节点和元素

节点Node包含以下几种： x.nodeType得到一个数字

  • 1表示元素Element,也叫标签Tag
  • 2表示文本Text
  • 8表示注释Comment
  • 9表示文档Document
  • 11表示文档片段DocumentFragment 熟记元素和文本

节点的增删改查

增

创建一个标签节点

  • let div1 = document.createElement('div')
  • Document.createElement('style')
  • Document.createElement('script')

创建一个文本节点

  • text1.document.createTextNode('你好')

标签里面插入文本

  • div1.appedChild(text1)
  • div1.innerText = '你好'或div.textContent ='你好'
  • 但是不能用div1.appendChild('你好')

如果创建一个div1，它只是在JS中存活，不会显示在页面中的，你需要将它插入到页面中

插入页面中

你创建的节点默认处于JS的线程中，你必须把它插入到head或者body中，他才会生效

  • Document.body.appendChild(div)

或者

  • 已在页面中的元素.appendChild(div)

appendChild(div) 一个元素不能出现在两个地方，除非复制一份（用cloneNode）

删

两种方法： 旧方法：parentNode.removeChlid(childNode) 形象比喻成，找你爸爸删掉你自己

新方法：childNode.remove() ie不支持

先把div移除div.remove()，再把它干掉div = null（原理：当div等于空，div就跟这个内存断开联系了，这个内存就会被垃圾回收掉了）

改

写标准属性

  • 改class：div.className = 'red blue'//把之前的全覆盖
  • 改class : div.classList.add('red')
  • 改style： div style = 'witch:100px; color:blue//样式全覆盖
  • 改 style的一部分：div.style.witch = '200px'
  • 大小写：div.style.backgroundColor = 'white'
  • 改data-* 属性：div.dataset.x = 'frank'

读标准属性

  • div.classlist/ a.href
  • div.getAttribute('class')/a.getAttribute('href')
  • 两种方法都可以，但值可能有些不同

还可以改on开头的属性

改事件处理函数

  • 默认点击div不会有任何事情发生
  • 但如果你把，div.onclick改为一个函数fn
  • 那么点击div时，浏览器就会调用这个函数
  • 并且是这样调用的fn.call(div.event)
  • 并且div会被当做this
  • event则包含点击事件的所有信息，如坐标

改内容

改文本内容

  • div.innerHTML = 'xxx'

  • div.textContent = 'xxx'

两者几乎没有差别

改HTML内容：

div.interHTML = <string>重要内容<string>

改标签：

div.innterHTML =''//先清空

div.appendChild(div) //再加内容

改爸爸:

newParent.appendChild(div) //

newParent:新节点;

appendChild(div)：调用，把div放进去，在原来的地方就消失了

查

  • 查自己：直接打印自己

  • 查爸爸：div.parentNode或 div.parentElement

  • 查爷爷：div.parentNode.parentNode

  • 查子代：node.childNodes//包含文本节点或 node.Children// 不包含文本节点

  • 查兄弟姐妹：node.parentNode.childNodes 还要排除自己，通过遍历 或者 node.parentNode.children

  • 查看老大：node.firstchild

  • 查看老幺：node.lastchild

  • 查看上一哥哥姐姐：node.proviousSibling

  • 查看下一个弟弟妹妹：node.nextSibling

avatar
文章
阅读
粉丝