节点的层次结构
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>