总结DOM中的节点和关系属性-js教程-PHP中文网

总结DOM中的节点和关系属性

PHP中文网

发布： 2017-06-21 13:20:59

原创

1254人浏览过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <h1>培训课程</h1>
        <ul>
            <li>html+css</li>
            <li>javascript</li>
            <li>正式课</li>
            <li>移动端课程</li>
            <li>node.js正式课</li>
        </ul>
    </div>
    <script>//获取关系的属性var oDiv = document.getElementById("div1");
        console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>

登录后复制

节点:node 一个页面中的标签、文字、注释。。。都是节点

childNodes：获取所有的子节点

children:获取所有的元素子节点

parentNode:获取父亲节点

previousSibling:获取上一个哥哥节点

nextSibling:获取下一个弟弟节点

firstChild：获取所有的子节点中的第一个

lastChild：获取所有子节点中的最后一个

在js中需要我们掌握的节点类型:

　　　　　　　　　　　　　　nodeType nodeName nodeValue

　　元素节点(元素标签) 1 大写的标签名 null

　　文本节点（文字）　　　　　　3 　　　　　　#text　　　　　　　　　文字内容

　　注释节点（注释）　　　　　　8　　　　　　#comment　　　　　　　注释内容

　　document　　　　　　　　　9　　　　　　#document　　　　　　　null

　　注意：在标准浏览器下，我们把space空格和Enter回车都当作我们的文本节点

　　方法：模拟我们的children方法，实现获取指定元素下的元素子节点　　

<em><em><span style="color: #008000">       /        * getMyChildren:获取制定元素下的所有的元素节点<em><em><em>        * @parameter：</em></em></em> <br/>　　*   ele:我们要获取谁下面的，就把谁传过来<br/>　　　　　　　tagName:获取元素的类型
        * @return:
        *   我们最后获取的元素子节点
        *   by xxxxxxxxx
        * </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br/>　　　　　　　　　　　　if(tagName){<br/>　　　　　　　　　　　　　　if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br/>　　　　　　　　　　　　　　　　ary.push(cur)<br/>　　　　　　　　　　　　　　}<br/>　<br/>　　　　　　　　　　　　}else{<br/></span></em></em>

登录后复制

 　　　　　　　　　　　　ary.push(cur);

登录后复制

　　　　　　　　　　　　}
                   
                }
            }return ary;

        }

登录后复制

获取一个元素的上一个哥哥元素子节点　

 pre =(pre && pre.nodeType!==1=

登录后复制

获取一个元素的所有的哥哥元素节点

 function prevAll(ele){var pre = ele.previousSibling,ary = [];while(pre){if(pre,nodeType===1){
                    ary.unshift(pre);
                }
                pre = pre.previousSibling;
            }return ary;
        }

登录后复制

以上就是总结DOM中的节点和关系属性的详细内容，更多请关注php中文网其它相关文章！