JavaScript—节点_js 子元素touchenable=false父元素会触发吗-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59715238/article/details/124560865

本文详细介绍了JavaScript中关于节点的操作，包括获取父节点、子节点和兄弟节点的方法，如parentNode、children、firstChild等；创建、添加、删除及复制节点的函数，如createElement、appendChild、removeChild和cloneNode等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父节点

父节点 parentNode（离的最近的父节点）

<body>
    <div class="demo">
        <div class="box"></div>
        <span class="erweima">×</span>
    </div>
    <script>
        //1.父节点 parentNode
        var erweima=document.querySelector('.erweima');
        // var box=document.querySelector('.box');
        //得到的是离元素最近的父级节点 如果得不到父节点就为null
        console.log(erweima.parentNode);
    </script>
</body>

2.子节点

2.1.children 获取子节点

2.2.childNodes 所有子节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        //DOM提供的方法(API)获取
        var ul=document.querySelector('ul');
        var lis=document.querySelectorAll('li');
        //1.子节点  childNodes所有的子节点 (包含元素节点 文本节点等等)
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);//3 文本节点
        console.log(ul.childNodes[1].nodeType);//1 元素节点
        //2.children 获取所有的子元素节点
        console.log(ul.children);
    </script>
</body>

2.3 firstChild 获取第一子节点

2.4 lastChild 获取最后一个子节点

<body>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ol>
    <script>
        var ol=document.querySelector('ol');
        //1.firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        //2.firstElementChild 返回第一个子元素节点
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        //3.实际开发的写法 既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length-1]);
    </script>
</body>

3.兄弟节点

nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点

<body>
    <div>div</div>
    <span>span</span>
    <script>
        var div=document.querySelector('div');
        //1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        //2.previousSibling 上一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.previousSibling);
        //3.nextElementSibing 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.preElementSibling);
    </script>
</body>

4.创建节点

document.createElement 创建节点

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1.创建节点
        var lis=document.createElement('li');
    </script>
</body>

5.添加节点

添加节点 node.appendChild(child)
添加指定节点node.insertBefore(child,指定元素)

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1.创建节点
        var lis=document.createElement('li');
        //2.添加节点 node.appendChild(child) node 父级 child 是子级
        var ul=document.querySelector('ul');
        ul.appendChild(lis);
        //3.添加节点 node.insertBefore(child,指定元素);
        var lili=document.createElement('li');
        ul.insertBefore(lili,ul.children[0]);

    </script>
</body>

6.删除节点

删除元素 node.removeChild(child)

<body>
    <button>删除</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //1.获取元素
        var ul=document.querySelector('ul');
        var btn=document.querySelector('button');
        //2.删除元素 node.removeChild(child);
        ul.removeChild(ul.children[0]);
        //3.点击按钮依次删除里面的孩子
        btn.onclick=function(){
            if(ul.children.length==0){
                //按钮锁定
                this.disabled=true;
            }else{
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

7.复制节点

node.cloneNode()；复制节点括号为空或者里面是false 只复制标签不复制里面的内容
node.cloneNode(true)；复制节点括号为true 复制标签复制里面的内容

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        //1. node.cloneNode();  复制节点  括号为空或者里面是false 只复制标签不复制里面的内容
        //2. node.cloneNode(true);  复制节点  括号为true 复制标签 复制里面的内容
        var lili=ul.children[0].cloneNode()
        //添加子节点到末尾
        ul.appendChild(lili);
    </script>
</body>