JS-13：DOM基础

2022-01-15 90 阅读3分钟

1 DOM

网页其实是一棵树；
JS操作这棵树的方式是：浏览器往 window 上加一个 document；
JS用 document 操作网页，就是 Document Object Model 文档对象模型；

2 获取全部元素（标签）

获取到的元素是一个对象

window.id名
或者直接 id名
document.getElementById('id名')
document.getElementsByTagName('标签名')[]
document.getElementsByClassName('属性名')[]
document.querySelector('#id名')
document.querySelectorAll('.属性名')[]

一般用 querySelector 和 querySelectorAll，要兼容 IE 时采用 getElement(s)ByXXX;

3 获取特定元素

获取 html 元素 document.documentElement
获取 head 元素 document.head
获取 body 元素 document.body
获取窗口（窗口不是元素） window
获取所有元素 document.all

document.all 是第六个 falsy 值：

4 div 的原型链

4.1 div 原型链

4.2 节点

Node.nodeType 节点完整描述

x.nodeType 可查看节点的类型：

1表示元素 Element，也叫标签Tag
3表示文本Text
8表示注释Comment
9表示文档Document

5 节点的增删改查

5.1 增加节点

创建一个标签节点

let div1 = document.createElement('div')
document.createElement('标签名')

创建一个文本节点 text1 = document.createTextNode('你好')
标签里面插入文本

div1.appendChild(text1)
div1.innerText = '你好'
div1.textContent = '你好'
不能用 div1.appendChild('你好')

将节点插入页面中上述创建的节点默认处于 JS 线程中，没有展示到页面，必须将它们插到 head 或者 body 里面，它们才会生效：

document.body.appendChild(div1)
或者
已经在页面中的元素.appendChild(div1)

一个元素只能 append 到一个地方，除非复制一份；

5.2 删除节点

旧方法：

let oldChild = parentNode.removeChild(childNode);

//被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中;

parentNode.removeChild(child);

//没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收.

新方法：

element.remove();

5.3 改属性

写标准属性

改class：div.className = 'red blue'
添加class：div.classList.add('red')
改style：div.style = 'width:100px;color:blue;'
改style的一部分：div.style.width = '200px'
大小写：div.style.backgroundColor = 'white'
改data-* 属性：div.dataset.x = 'frank'

读标准属性

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.innerText = 'xxx'
div.textContent = 'xx'

改 HTML 内容 div.innerHTML = '<strong>重要内容</strong>'
改标签

div.innerHTML = ''    //先清空
div.appendChild(div2)      //再加内容

改父节点 newParent.appendChild(div)

5.4 查节点

查爸爸 node.parentNode 或者 node.parentElement
查爷爷 node.parentNode.parentNode
查子代

node.childNodes    //包含文本节点
node.children    //不包含文本节点

查兄弟姐妹没有现成的API，需要先获取父节点的所有子节点，再遍历子节点，然后将自己从子节点中排除：

node.parentNode.childNodes    //要排除自己和所有的文本节点
node.parentNode.children    //要排除自己：
let siblings = []
let c = div1.parentElement.children
for(let i=0; i<c.length; i++){
  if(c[i] !== div1){
    siblings.push(c[i])
  }
}

查看老大 node.firstChild
查看老幺 node.lastChild
查看上一个兄弟元素 node.previousSibling
查看下一个兄弟元素 node.nextSibling

6 DOM 跨线程操作

浏览器分为渲染引擎和JS引擎

跨线程操作

插入新标签的完整过程

属性同步

Property 和 Attribute