首页
HTML+CSS
JavaScript
Vue
WordPress
WP Functions
注册/登录
首页 > JavaScript > 正文

JS:DOM操作 节点元素 遍历树

DOM,主要用来修改HTML的标准编程接口,可以用来修改各种html标签内容 和属性 样式。

查找:

document: 整个文档。

document.getElementsByTagName

document.getElementById

document.getElementsByClassName

遍历节点:

var div = document.getElementsByClassName(‘con’)[0];

div.parentNode-> 父节点  (最顶端的parentNode为#document);

遍历元素:

div.children 遍历所有的子元素(孙子就不算)这就是一个对象,可以.length属性

获取节点类型:div.firstElementChild.nodeType

总结

节点 元素节点
div.parentNode div.parentElement
div.childNodes div.children
div.firstchild div.firstElementChild
div.lastchild div.lastElementchild
div.nextSibling div.nextElementSibling
div.previousSibling div.prevElementSibling

节点的类型

获取节点类型  div.nodeType,对应的返回值如下:

元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11

几个练习

 1. 封装函数,返回元素e的第n层祖先元素

<body>

    <div id="app">
        <span></span>
        <p><span><strong></strong></span></p>
        <p></p>
        <span></span>
        <strong></strong>		
    </div>

</body>

<script type="text/javascript">
    
    var strong = document.getElementsByTagName('strong')[0];
    function retparent(elem,n) {
        while(elem && n){
            elem = elem.parentElement;
            n--;
        }
        return elem;
    } 
    
    console.log(retparent(strong, 2));	// <p>...</p>	
    console.log(retparent(strong, 3));	// <div id="app">...</div>
    console.log(retparent(strong, 4));	// <body>...</body>	
    console.log(retparent(strong, 7));	// null	
    
</script>

2.遍历节点元素

a.只遍历儿子节点

<body>

    <div id="app">
        <span></span>
        <p><span><strong></strong></span></p>
        <p></p>
        <span></span>
        <strong></strong>		
    </div>

</body>

<script type="text/javascript">

    var div = document.getElementsByTagName('div')[0];
    var arr = [];
    arr.push(div.children);
    
</script>

b.遍历所有节点

<body>

    <div id="app">
        <span></span>
        <p><span><strong></strong></span></p>
        <p></p>
        <span></span>
        <strong></strong>		
    </div>

</body>

<script type="text/javascript">
        
    var div = document.getElementsByTagName('div')[0];
    
    function retChild(parent) {
        var child = parent.childNodes;
        for(var i = 0; i < child.length; i++) {
            if(child[i].nodeType == 1) {
                console.log(child[i]);
                retChild(child[i]);
            }
        }
    }
    retChild(div);
    
</script>

 

 

展开全部
分享到:

网友评论comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注

暂无评论

Copyright © 2012-2013 Weesh Net Media
扫二维码
扫二维码
返回顶部