• 技术文章 >web前端 >js教程

    一文详解JavaScript之DOM节点导航

    藏色散人藏色散人2022-08-06 16:49:56转载185

    本文主要介绍如何利用DOM节点获取页面元素,页面文档中的所有事物都是节点:包括元素节点、文本节点、属性节点、文档节点、注释节点。下面介绍获取节点的两大类方法:

    (1)获取节点(包含文本节点、元素节点等所有节点)

    1.parentNode:获取父节点

    2.childNodes:获取子节点,通过索引值获取各个子节点

    3.firstChild:获取父节点的第一个子节点

    4.lastChild:获取父节点的最后一个子节点

    5.nextSibling:获取子节点相邻的下一个兄弟节点

    6.previousSibling:获取子节点相邻的前一个兄弟节点

    7.attributes:获取属性节点

    <!DOCTYPE html>
    <html>
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>由节点关系获取元素</title>
        <style>
     
        </style>
    </head>
     
    <body>
        <div name="div1">
            <p name='p1'>文本节点</p>
            <p>2</p>
            <ul>
                <li>3</li>
                <li id="li4">4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
        <section>7</section>
        <main><span>8</span><i>9</i></main>
        <script>
            //注意换行和空格也属于结点,属于文本节点,按节点关系访问时需要考虑。属性节点无须考虑。
            //1. parentNode获取div
            console.log(document.querySelector('p').parentNode);
            console.log(document.querySelector('p').parentNode.attributes[0]);
            console.log(document.querySelector('p').parentNode.nodeName); //DIV
            console.log(document.querySelector('p').parentNode.nodeValue); //null
            console.log(document.querySelector('p').parentNode.nodeType); //1 元素节点
            // 2.通过childNodes获取第一个p
            console.log(document.querySelector('div').childNodes[1]);
            console.log(document.querySelector('div').childNodes[1].firstChild.nodeName);
            console.log(document.querySelector('div').childNodes[1].firstChild.nodeType); //2 文本节点
            console.log(document.querySelector('div').childNodes[1].firstChild.nodeValue);
            // 3.firstChild获取main中的第一个子节点
            console.log(document.querySelector('main').firstChild);
            // 4.lastChild获取main中的最后一个子节点
            console.log(document.querySelector('main').lastChild);
            // 5.nextSibling获取相邻下一个兄弟元素
            console.log(document.querySelector('#li4').nextSibling.nextSibling);
            // 6.previousSibling获取相邻上一个兄弟元素
            console.log(document.querySelector('#li4').previousSibling.previousSibling);
            // 总结:除parentNode外,其他方法谨慎选择,一旦代码格式有变,就会出现错误
            // 通过nodeName获取节点名称
            //通过nodeValue获取节点值
            // 通过nodeType返回节点类型
        </script>
    </body>
     
    </html>

    (2)获取元素节点

    1.parentElement:获取父元素节点

    2.children:获取子元素节点,通过索引值获取各个子元素节点

    3.firstElementChild:获取父级的第一个子元素节点

    4.lastElementChild:获取父级的最后一个子元素节点

    5.nextElementSibling:获取相邻的下一个兄弟元素节点

    6.previousElementSibling:获取相邻的前一个兄弟元素节点

    <!DOCTYPE html>
    <html>
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>获取子元素节点</title>
    </head>
     
    <body>
        <div>
            <p>123</p>
            <p>456</p>
            <p>789</p>
        </div>
        <script>
            //p标签总体算一个节点,内部的“123”不算
            console.log(document.querySelector('div').childNodes);
            console.log(document.querySelector('div').childNodes.length);
            // 获取子元素节点
            console.log(document.querySelector('div').children);
            console.log(document.querySelector('div').children[1]);
            console.log(document.querySelector('div').firstElementChild);
            console.log(document.querySelector('div').firstElementChild.nextElementSibling);
            console.log(document.querySelector('div').lastElementChild);
            console.log(document.querySelector('div').lastElementChild.previousElementSibling);
            console.log(document.querySelector('div').children[1].parentElement);
        </script>
    </body>
     
    </html>

    相关推荐:【JavaScript视频教程

    以上就是一文详解JavaScript之DOM节点导航的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    上一篇:实例讲解js怎么通过类名获得多个input对象 下一篇:解析JS如何获取节点并进行兼容性封装
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 完全掌握DOM属性成员与文档流• javaScript归纳总结之Dom获取集合元素对象• JavaScript HTML DOM导航(总结分享)• 归纳分享DOM节点属性知识点
    1/1

    PHP中文网