JavaScript 11 节点

  • A+
所属分类:Web前端
摘要

节点的层次结构nodeType节点的类型1 元素节点  //nodeType=12 属性节点3 文本节点  //nodeType=3

节点的层次结构

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>