DOM编程笔记

• DOM全称Document Object Model，即文档对象模型。
• DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
• 由于DOM太难用，在这里记录以下DOM的一些操作，比如节点node的增删查改。

获取元素（标签）

1. window.idxxx或直接idxxx，平时练手用。
2. document.querySelector('#idxxx')或document.querySelectorAll('#idxxx'),工作中常用。

获取特定元素

1. 获取html标签

document.documentElement

2. 获取窗口（窗口非元素）

window

3. 获取head、body等

document.head;
document.body

4. 获取所有元素

document.all//为第六个falsy值

节点node

x.nodeType可获取一个数字，
常见的有：
1表示元素Element，也叫标签Tag。
3表示文本Text。

增

1. 创建一个标签节点

let div = document.createElement('div')

2. 创建一个文本节点

text1 = document.createTextNode('你好')

3. 标签里插入文本

div1.appendChlid(text1)

4. 插入页面中

document.body.appendChild(div)

删

• 旧方法：

parentNode.childChild(childNode)

• 新方法：

childNode.remove()

改

• 改class：

div.classList.add('red')

• 改style：

div.style = 'width:100px;color:blue;'

• 改部分style：

div.style.width='200px'

• 改文本内容

div.innerText = 'xxx';
div.textContent ='xxx';

• 改HTML内容

div.innerHTML = '<strong>重要内容</strong>'

• 改标签

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

查

• 查爸爸：

node.parentNode;
node.parentElement;

• 查爷爷：

node.parentNode.parentNode

• 查子代

node.children//优先使用
node.childNodes

• 查兄弟姐妹

node.parentNode.children//接下来还要排除自己

• 查老大老幺

node.firstChild//老大
node.lastChild//老幺

• 查上下节点

node.previousSibling//上一个
node.nextSibling//下一个

如何遍历一个div里的所有元素

travel = (node,fn) =>{
fn(node)
if(node.childrem){
for(let i=0; i<node.children.length; i++){
travel(node.children[i],fn)
  }
 }
}
travel(div1,(node)=> console.log(node))

DOM的双线程操作中的属性同步

由于DOM的双线程操作比较好理解，记录操作中的一些常见问题。

• 标准属性：对div1的标准属性的修改，会被浏览器同步到页面中。比如：id、className、tittle等。
• data-*属性（在js中写为dataset）：同上
• 非标准属性：对非标准属性的修改，只会停留在js线程中，不会同步到页面里。
  因此可以得出重要启示：想把自定义属性同步到页面中，使用data-作为前缀。