dom 小知识总结

Posted 2023-02-10 一杯清泉

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。