«

js常用节点操作方法有哪些

时间:2024-5-16 13:07     作者:韩俊     分类: Javascript


这篇“js常用节点操作方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js常用节点操作方法有哪些”文章吧。

一:父节点

1:返回父节点

element.parentNode,得到的是离元素最近的父节点。如果找不到则返回为null
代码:

<body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var divs=document.querySelector(".s")
        console.log(divs.parentNode);
    </script>
</body>

效果:

二:子节点

1:返回子节点

element.children,是一个只读属性,返回所有子元素节点,其余节点不返回
代码:

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children);
    </script>
</body>

效果:

2:返回第一个和最后一个子节点

2.1:

element.firstElementChild,element.lastElementChild分别返回第一个和最后一个子元素节点,IE9+
代码:

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
    </script>
</body>

效果:

2.2:

element.children[0] , element.children[element.children.length-1]分别返回第一个和最后一个子元素节点
代码:

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1]);
    </script>
</body>

效果:

三:兄弟节点

1:返回兄弟节点

element.nextElementSibling,返回当前元素下一个兄弟元素节点,找不到则返回null
element.previousElementSiblig,返回当前元素上一个兄弟元素节点,找不到则返回null
IE9+

四:创建和添加元素节点

1:创建元素节点

1.1:

document.createElement(),动态创建元素节点

1.2:

innerHtml,创建节点

1.3:

document.write,创建节点,但导致页面重绘

2:添加节点

2.1:

fartherelement.appendChild(childelement),将一个节点添加到指定父节点的子节点列表末尾
注意事项:创建和添加元素节点需要联合使用

1&2:
添加前代码:

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
    </script>
</body>

效果:

添加后代码:

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.appendChild(li)
    </script>
</body>

注意:appendChild()中无引号。因为:规定变量或对象是不用加引号的
效果:

2.2:

element.insertBefore(child,指定元素),将一个节点添加到父节点指定节点前面
代码:

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.insertBefore(li,ul.children[0])
    </script>
</body>

效果:

五:删除节点

1:删除元素节点

element.removeChild()
代码:

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style type="text/css">
    button{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
    <button></button>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var button=document.querySelector("button")
        var ul=document.querySelector("ul")
        button.onclick=function(){
        ul.removeChild(ul.children[0])
      }
    </script>
</body>
</html>

六:克隆节点

克隆节点(元素或文本)

element.cloneNode(),括号参数为空或者为false则为浅拷贝,只复制标签。括号参数为ture则复制标签和里面的内容。克隆节点需要和添加节点一起使用

标签: javascript

热门推荐