美文网首页
JS基础学习:节点

JS基础学习:节点

作者: Merbng | 来源:发表于2019-04-03 21:06 被阅读0次

    文档:document
    元素:页面中所有的标签,元素---element 标签--- 元素 ---对象
    节点:页面中所有的内容(标签,属性,文本(文字,换行,回车,空格)),Node
    根元素:html标签

    相关属性

    可以使用标签--元素.出来 也可以使用属性节点.出来, 文本节点.出来

    • nodeType:节点的类型,
      1---标签 2----属性 3---- 文本

    • nodeName:节点的名字,
      标签节点---大写的标签名字,
      属性节点----小写的属性名字 ,
      文本节点----#text

    • nodeValue:节点的值,
      标签节点---null ,
      属性节点----属性值 ,
      文本节点----文本内容

    获取相关节点

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="dv">
                <span>卡卡我看了</span>
                <p>安居客为借口的健康</p>
                <ul id="uu">
                    <li>请求</li>
                    <li>嗯嗯</li>
                    <li>让人</li>
                </ul>
            </div>
            <script src="js/common.js"></script>
            <script type="text/javascript">
                var ulObj = my$('uu');
                // ul标签的父级节点
                console.log(ulObj.parentNode);
                // ul标签的父级元素
                console.log(ulObj.parentElement);
    
                console.log("ulObj.parentNode:" + ulObj.parentNode); //div
                console.log("ulObj.parentNode.parentNode:" + ulObj.parentNode.parentNode); //body
                console.log("ulObj.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode); //html
                console.log("ulObj.parentNode.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode.parentNode); //document
                console.log("ulObj.parentNode.parentNode.parentNode.parentNode.parentNode:" + ulObj.parentNode.parentNode.parentNode
                    .parentNode.parentNode); //null
                //页面中最顶级的元素就是document了,
    
                // 标签 的
                console.log("ul标签的nodeType:" + ulObj.parentNode.nodeType);
                console.log("ul标签的nodeName:" + ulObj.parentNode.nodeName);
                console.log("ul标签的nodeValue:" + ulObj.parentNode.nodeValue);
    
                var dvObj = document.getElementById('dv');
                console.log("ulObj.childNodes:" + dvObj.childNodes); //7个
                console.log("ulObj.children:" + dvObj.children); //3个
    
                for (i = 0; i < dvObj.childNodes.length; i++) {
                    var node = dvObj.childNodes[i];
                    //nodeType:1----标签   2----属性   3----文本
                    // nodeName: 大写的标签:标签;  小写的属性名:属性; #text:文本
                    // nodeValue:标签:null; 属性:属性的值, 文本:文本内容
                    console.log("nodeType:" + node.nodeType + "=========nodeName:" + node.nodeName + "===========nodeValue:" + node.nodeValue);
                }
                
                // 获取的属性的节点
                var node =dvObj.getAttributeNode('id');
                console.log("nodeType:"+node.nodeType);
                console.log("nodeName:"+node.nodeName);
                console.log("nodeValue:"+node.nodeValue);
            </script>
        </body>
    </html>
    
    

    12行代码:都是获取节点和元素的

    // ul
    var ulObj = document.getElementById('uu');
    // 父级节点
    console.log("父级节点:" + ulObj.parentNode);
    // 父级元素
    console.log("父级元素:" + ulObj.parentElement);
    // 子节点
    console.log("子节点:" + ulObj.childNodes);
    // 子元素
    console.log("子元素:" + ulObj.children);

    console.log("==================================================");
    // 第一个子节点
    console.log("第一个子节点:" + ulObj.firstChild); //IE8中是第一个子元素
    // 第一个子元素
    console.log("第一个子元素:" + ulObj.firstElementChild); //IE8中不支持
    // 最后一个子节点
    console.log("最后一个子节点" + ulObj.lastChild); //IE8中是最后一个子元素
    // 最后一个子元素
    console.log("最后一个子元素" + ulObj.lastElementChild); //IE8中不支持
    // 某个元素的前一个兄弟节点
    console.log("某个元素的前一个兄弟节点:" + my('three').previousSibling); // 某个元素的前一个兄弟元素 console.log("某个元素的前一个兄弟元素:" + my('three').previousElementSibling);
    // 某个元素的后一个兄弟节点
    console.log("某个元素的后一个兄弟节点:" + my('three').nextSibling); // 某个元素的后一个兄弟元素 console.log("某个元素的后一个兄弟元素:" + my('three').nextElementSibling);

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="dv">
                <span>卡卡我看了</span>
                <p>安居客为借口的健康</p>
                <ul id="uu">
                    <li>请求</li>
                    <li>嗯嗯</li>
                    <li id="three">来晚了</li>
                    <li>让人</li>
                </ul>
            </div>
            <script src="js/common.js"></script>
            <script>
                // 12行代码:都是获取节点和元素的
                // ul
                var ulObj = document.getElementById('uu');
                // 父级节点
                console.log("父级节点:" + ulObj.parentNode);
                // 父级元素
                console.log("父级元素:" + ulObj.parentElement);
                // 子节点
                console.log("子节点:" + ulObj.childNodes);
                // 子元素
                console.log("子元素:" + ulObj.children);
    
                console.log("==================================================");
                // 第一个子节点
                console.log("第一个子节点:" + ulObj.firstChild); //IE8中是第一个子元素
                // 第一个子元素
                console.log("第一个子元素:" + ulObj.firstElementChild); //IE8中不支持
                // 最后一个子节点
                console.log("最后一个子节点" + ulObj.lastChild); //IE8中是最后一个子元素
                // 最后一个子元素
                console.log("最后一个子元素" + ulObj.lastElementChild); //IE8中不支持
                // 某个元素的前一个兄弟节点
                console.log("某个元素的前一个兄弟节点:" + my$('three').previousSibling);
                // 某个元素的前一个兄弟元素
                console.log("某个元素的前一个兄弟元素:" + my$('three').previousElementSibling);
                // 某个元素的后一个兄弟节点
                console.log("某个元素的后一个兄弟节点:" + my$('three').nextSibling);
                // 某个元素的后一个兄弟元素
                console.log("某个元素的后一个兄弟元素:" + my$('three').nextElementSibling);
            </script>
        </body>
    </html>
    
    

    相关链接:
    demo地址

    相关文章

      网友评论

          本文标题:JS基础学习:节点

          本文链接:https://www.haomeiwen.com/subject/tzetiqtx.html