js中的节点属性 和上下级访问关系

一、节点属性

1、nodeType:用于检测节点的类型

返回值为：1、元素节点  2、属性节点  3、文本节点

2、nocdName ：返回节点的标签名为全大写 ；如 DIV；

3、nodeValue ：对于元素来说nodeValue返回值为null；

 

二、节点访问关系

<div id="fa">

        <div id="box">

            <p>这是p标签</p>

            <span>这是span</span>

        </div>

</div>

var box = document.getElementById('box')；

获取box的父节点,获取结果包含文本节点

box.parentNode;

 

获取box的所有子节点；,获取结果包含文本节点

box.childNodes

 

获取box的所有  元素  子节点；(非常好用)；

box.children;

 

获取box的第一个子元素；ie9以下不支持

box.firstChild;

 

获取box的最后一个子节点；ie9以下不支持

box.lastChild;

 

同级访问关系；

获取下一个兄弟节点,会获取到文本节点;

box.nextSibling;

 

获取下一个同级元素节点，ie9以下不支持

box.nextElementSibling

 

获取上一个同级兄弟节点，会获取到文本节点;

box.previousSibling;

 

获取上一个元素兄弟节点、ie9以下不支持

box.previousElementSibling;

 

同级节点如果无法获取对应节点返回 null

 

三、节点的移动方式

 

1、父节点.appendChild(要移动的节点)；此方法 会将子节点移动到父节点所有子元素之后；

 

2、父节点.insertBefore(要移动的节点，参考节点)；插入子节点会被添加的参考节点的最前面；

当参考节点为null或undefined时 此方法和 appendChild方法相同；