- A+
所属分类:Web前端
节点的层次结构
nodeType节点的类型
1 元素节点 //nodeType=1
2 属性节点
3 文本节点 //nodeType=3
4 注释节点 //nodeType=8
nodeName 节点的名称(标签名称)
nodeValue 节点值
元素节点的nodeValue始终是null
父子结构:
父:parentNode //父节点只有一个,所以不加s 获取父节点:box.parentNode
子:childNodes //一般子节点有很多,所以是复数 获取子节点:box.childNodes
兄弟节点: 下一个兄弟节点:box.nextSibling 上一个兄弟节点:box.previousSibling 下一个兄弟元素:box.previousSibling,如果当前元素已经是最后一个,就返回null 上一个兄弟元素:box.previousSibling
子元素:children
判断当前子节点是否为元素节点:nodeType属性为1
<div id="box" age=12> <span>123</span> <!-- sdsd? --> </div> <script type="text/javascript"> var box = document.getElementById('box'); //判断当前节点是否为元素节点 for(i=0,i<box.childNodes.length,i++){ node = box.childNodes[i]; if(node.nodeType === 1){ console.log(node) } } </script>
只 获取所有子元素:
box = document.getElementById('box'); console.log(box.children)
获取第一个子节点:box.firstChild //包含文本节点
获取第二个子节点:box.lastChild //包含文本节点
获取第一个子元素:box.firstElementChild //需处理兼容性问题
var ul = getFirstElementChild()
void 是运算符,执行void后面的表达式,并始终返回undefined
<a herf="javascript : void(0)"></a>