码迷,mamicode.com
首页 > Web开发 > 详细

js学习总结----DOM中的节点和关系属性

时间:2017-06-20 23:28:43      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:next   ==   while   null   function   ast   lang   logs   odi   

<!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方法,实现获取指定元素下的元素子节点  

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

        }

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

    function prev(ele){var pre = ele.previousSibling;
        while(pre && pre.nodeType!==1){
            pre = pre.previousSibling;
        }
      return pre;
    }

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

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

 

js学习总结----DOM中的节点和关系属性

标签:next   ==   while   null   function   ast   lang   logs   odi   

原文地址:http://www.cnblogs.com/diasa-fly/p/7056768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!