<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//遍历节点数
//parenNode -> 父节点(最顶端的parentNode为#document);
//childNodes -> 子节点们
//firstChild -> 第一个子节点
//lastChild -> 最后一个子节点
//nextSibing -> 最后一个兄弟节点
//previousSibing -> 前一个兄弟节点
//基于元素节点数的遍历
//parentElement -> 返回当前元素的父元素节点(IE不兼容)
//children -> 只返回当前元素的元素子节点
//node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)
//firstElementChild -> 返回的是第一个元素节点(IE不兼容)
//lastElementChild -> 烦恼会的事最后一个元素节点(IE不兼容)
//nextElementSibing / previousElementSibing -> 返回后一个 / 前一个兄弟元素节点(IE不兼容)
//节点的四个属性
//nodeName
//元素的标签名,以大写形式表示,只读
//nodeValue
//Text节点或Comment节点的文本内容,可读写(只有文本节点和注释节点含有)
//nodeType
//该节点的类型,只读(*)
//attributes
//Element节点的属性集合
//节点的一个方法 Node.hasChildNodes();
//调用节点的nodeType返回的值
//节点的类型 返回的值
//元素节点 ---- 1
//属性节点 ---- 2 (基本上没啥用)
//文本节点 ---- 3
//注释节点 ---- 8
//document ---- 9
//DocumentFragment ---- 11
</script>
</head>
<body>
<div>
<span> </span>
<em></em>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
function retElementChild(node) {
// no children
var temp = {
length : 0,
push : Array.prototype.push,
splice : Array.prototype.splice
},
child = node.childNodes;
len = child.length;
for (var i = 0; i < len; i++) {
if (child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp ;
}
console.log(retElementChild(div));
</script>
</body>
</html>
dom操作下的节点树属性以及内方法的重写
最新推荐文章于 2022-08-22 09:44:13 发布