《DOM编程》

知有
357 阅读3分钟

获取元素的API

获取元素（element），也叫标签（tag）

  • window.idxxx 或者直接idxxx // 获取一个页面的某个元素
  • document.querySelector('#idxxx') // 借用了css的写法，找到某一项满足条件的元素
  • document.querySelectorAll('.red')[0] // 找到所有满足条件的元素
  • document.getElementById('idxxx') 一般不用，在id名和全局属性冲突的情况下使用
  • document.getElementsByTagName('div')[0] // 找到所有标签名为‘div’的元素
  • document.getElmentsByClassName('red')[0] // 根据类名来获取元素 通常使用前三个API，后三个在要兼容IE的时候才用

获取特定元素

  • 获取html元素 document.documentElemnt
  • 获取head元素 document.head
  • 获取body元素 document.body
  • 获取窗口 window（窗口不是元素，有时会获取window添加一些全局事件监听时使用） 举例

image.png

  • 获取所有元素document.all是IE发明的，早期很多程序员用这个来检测当前页面是不是IE浏览器。document.all是第6个falsy值。

元素的6层原型链

  • div完整原型链

image.png

节点 Node 类型

在任何一个节点后输入.nodeType可以获取到节点的类型

  • 1 表示元素 Elment，也叫标签Tag
  • 3 表示文本 Text
  • 8 表示注释 Comment
  • 9 表示文档 Document
  • 11 表示文档片段 DocumentFragment

节点的增删改查

增

  • 创建一个标签节点
  1. let div1 = document.createElement('div')
  2. document.createElement('style')
  3. document.createElement('script')
  4. document.createElement('li')
  • 创建一个文本节点 text1 = document.createTextNode('你好')
  • 标签里面插入文本
  1. div1.appendChild(text1) //node提供的接口
  2. div1.innerText ='你好' 或者 div1.textContent='你好' //Element提供的接口
  3. 不能用div1.appendChild('你好')， 如果div1只是在JS里创建，不会显示在页面中，只存在于JS内存中，必须要加在body里面
  • 插入页面中 你创建的标签默认处于JS线程中，你必须把它插到head或者body里面，它才会生效

document.body.appendChild(div)

或者

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

  • appendChild 的特性：一个元素不能出现在两个地方，除非用clone复制一份，eg：let div2 = div1.cloneNode() 举例：

页面中有 div#test1 和 div#test2

let div = document.createElement('div')

test1.appendChild(div)

test2.appendChild(div)

最终div会出现在test2里面

删

两种方法：

  1. 旧方法： parentNode.childChild(childNode)
  2. 新方法: childNode.remove() //IE不支持 如果一个node被移出页面（DOM树），仍然可以再次回到页面中，移出页面但还是存在内存中，如果要删除node，先移出再让node=null，此时node就会和内存断开连接，会被内存自动垃圾回收

改

改属性

  • 写标准属性
  1. 改 class: div.className='red blue' // className的bug：每次改动className会把之前的覆盖
  2. 改 class:div.classList.add('red')
  3. 改 style:div.style='width:100px; color:bule'//不推荐，会覆盖之前的style
  4. 改 style的一部分:div.style.color='blue'
  • 读标准属性 div.style

div.className

div.classList / a.href //这种方法有可能会被浏览器加工

div.getAttribute('class') / a.getAttribute('href') //此方法更保险

改事件处理函数

  • div.onclick 默认为 null 默认点击div不会有任何事情发生，

但是如果你把div.onclick改为一个函数fn，

那么点击div的时候，浏览器就会调用这个函数，

并且是这样调用的 fn.call(div, event),

div会被当作this，

event则包含了点击事件的所有信息，如坐标

  • div.addEventListener 是div.onclick的升级版，onclick只能写一个函数，写多个会覆盖之前的，而addEventListener可以写无数个函数

改内容

  • 改文本内容
  1. div.innertext = 'xxx'
  2. div.textContent = 'xxx' 浏览器一般会默认支持这两种方式，几乎没有区别
  • 改HTML内容 div.innerHTML = '<strong>重要内容</strong>'

如果内容太长太复杂，超过两万字符，可能会出现页面卡死

  • 改标签
  1. div.innnerHTML = '' // 先清空
  2. div.appendChild(div2) // 再加内容

改父元素

newParent.appendChild(div)

查

查看元素的API

  • 查爸爸 node.parentNode 或者 node.parentElement
  • 查爷爷 node.parentNode.parentNode
  • 查子代 node.childNodes （包括文本节点）或者 node.children（不包括文本节点）
  • 查兄弟姐妹 node.parentNode.childNodes 还要排除自己和文本节点

node.parentNode.children还要排除自己

  • 查老大 node.firstChild
  • 查老幺 node.lastChild
  • 查看上一个哥哥/姐姐 node.previousSibling (可能会查到文本节点)

node.previousElementSibling (避开文本节点)

  • 查看下一个弟弟/妹妹 node.nextSibling (可能会查到文本节点)

node.nextElementSibling (避开文本节点)

  • 遍历一个div里面的所有元素
travel = (node,fn) => {
  fn(node)
  if(node.children){
    for(let i=0; i<node.children.length; i++){
      travel(node.children[i], fn)
    }
  }
}
travel(div1,(node) => console.log(node))
avatar
文章
阅读
粉丝