dom 小知识总结

1、nodeName获取节点的名称只读

<div>111</div>

div.nodeName;打印DIV注意都是大写。

2、nodeValue获取节点的值可写

div.nodeValue;打印111。

3、遍历节点树

包含所以的节点包含注释节点换行的文本节点等无效的内容

• parentNode注意没有s。父节点终点是 document
• childNodes注意有s。子节点。
• nextSibling当前节点的下一个节点。
• previousSibling当前节点的上一个节点。
• firstChild/lastChild第一个节点/最后一个节点。
• hasChildNodes()是否有子节点。换行也算子节点。

4、遍历元素节点树

仅遍历元素。

• parentElement父元素
• children子元素不包含注释、换行文本等。
• childElementCount子元素长度等于 children.length
• nextElementSibling当前元素的下一个元素。
• previousElementSibling当前元素的上一个元素。
• firstElementChild/lastElementChild第一个/最后一个节点

5、nodeType节点编号可以使用该编号过滤node节点生成有效的元素节点。

6、window.getComputedStyle(element,null).props获取css的style对象后面可以跟具体值属性。第二个参数是填写伪元素的如果有只读例如

const width = window.getComputedStyle(div,'after').width;

7、函数foreach等

list.foreach(function (item, index, array) {
    console.log(this)
}, false)

是有第二个参数的第二个参数是修改this 的指向的如果传递的不是对象会强制转为包装类对象如果不传指向 window。