dom节点树、dom节点关系

目录

一、dom节点树

遍历文档节点树

遍历元素节点树

二、dom节点关系

节点属性

父级属性

子级属性

同级属性

节点方法

---

一、dom节点树

根据w3c的dom标准，文档中的所有内容都是节点，节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点，这些节点组成一个树状结构，称为dom节点树。dom节点树体现了文档的层次结构。dom节点树有两种类型，其一dom文档节点树，其二dom元素节点树，dom文档节点树包含文档中所有类型的节点，dom元素节点树只包含元素节点。

遍历文档节点树

遍历所有Node节点。遍历dom文档节点树的方法兼容于所有浏览器。

1、parentNode
2、childNodes
3、firstChild
4、lastChild
5、nextSibling
6、previousSibling

//兼容写法获取前一个元素节点
function previousElem(elem){
    var ret = elem && elem.previousSibling;
    if(ret && ret.nodeType != 1){
        ret = previousElem(ret);
    }
    return ret;
}

遍历元素节点树

遍历元素节点，其余类型的节点忽略。除了children方法外其余方法在ie8及以下版本的浏览器中都不兼容。

1、parentElement
2、children
3、childElementCount
4、firstElementChild
5、lastElementChild
6、nextElementSibling
7、previousElementSibling

二、dom节点关系

dom将文档解析成一个由多层次节点构成的结构即dom结构。节点是dom结构的基础。dom节点包含12种类型，每种类型的节点分别表示文档中不同的信息及标记。节点之间的关系构成了层次，整个文档表现为一个以特定节点为根节点的树形结构。节点关系类似于传统的家族关系，节点树相当于家谱。

节点属性

dom节点的关系属性都是只读的。

父级属性

parentNode

每个节点都有一个parentNode属性，该属性指向当前节点在节点树中的父节点。对于一个节点来说，它的父节点只可能为三种类型，分别是元素节点、文档节点和文档片段节点。如果父节点不存在，则返回null。

parentElement

与parentNode属性不同的，该属性指向当前节点在节点树中的父元素节点。ie浏览器中只有元素节点有该属性，其它浏览器中所有类型的节点都有该属性。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var strong = document.getElementsByTagName("strong")[0]; 
    console.log(strong.parentElement);    
</script>

子级属性

childNodes

childNodes返回一个只读的NodeList集合，保存着当前节点的第一层子节点。

<div>
    123
    <--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.childNodes);    
    //NodeList(7) [text, comment, text, strong, text, span, text]
    //返回7个子节点，text表示文本节点，comment是注释节点
</script>

children

children返回一个只读的HTMLCollection集合，保存着当前节点的第一层子元素节点。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.children); //HTMLCollection(2) [strong, span]    
</script>

childElementCount

返回当前节点下子元素节点的个数，相当于children.length。ie8及以下版本的浏览器中不兼容。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.childElementCount); //2 
</script>

firstChild

当前节点的第一个子节点。ie8及以下版本浏览器忽略空白文本节点。

lastChild

当前节点的最后一个子节点。ie8及以下版本浏览器忽略空白文本节点。

<div>
    123
    <!--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.firstChild); //"    123    " --> 文本节点
    console.log(div.lastChild);  //#text --> 空文本节点
</script>

firstElementChild

当前节点的第一个元素节点。ie8及以下版本浏览器不兼容。

lastElementChild

当前节点的最后一个元素节点。ie8及以下版本浏览器不兼容。

同级属性

nextSibling

当前节点的后一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

previousSibling

当前节点的前一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

<div>
    123
    <!--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("strong")[0]; 
    console.log(div.nextSibling);      //#text
    console.log(div.previousSibling);  //#text 
</script>

nextElementSibling

当前节点的后一个兄弟元素节点。ie8及以下版本浏览器不兼容。

previousElementSibling

当前节点的前一个兄弟元素节点。ie8及以下版本浏览器不兼容。

节点方法

hasChildNodes()

判断当前节点是否包含子节点，包含一个或多个子节点时返回true。子节点可以是任意类型。

contains()

contains方法接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。参数为后代节点即返回true，不一定是第一层子节点。ie和safari不支持document.contains()方法，只支持元素节点的contains()方法。

<div id="d1">
    <span id="s1"></span>
    <span id="s2"></span>
</div>
<script>
    console.log(d1.contains(s1)); //true
    console.log(s1.contains(s2)); //false
</script>