js常用节点操作实例总结

更新时间：2023年04月24日 10:53:09 作者：小白白中之白

这篇文章主要介绍了js常用节点操作,结合实例形式总结分析了JavaScript针对dom节点的遍历、查找、创建、删除、克隆等相关实现技巧与注意事项,需要的朋友可以参考下

一：父节点

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>

六：克隆节点

1：克隆节点（元素或文本）

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

感兴趣的朋友可以使用本站在线工具： http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果~

您可能感兴趣的文章:

js
节点

js中易弄混淆的"位置"相关属性详解
js中有各种位置相关的属性,平时用起来比较混乱,特此整理一下,下面这篇文章主要给大家介绍了关于js中易弄混淆的“位置”相关属性的相关资料,需要的朋友可以参考下
2022-04-04
JS 实现分页打印功能
这篇文章主要介绍了JS 实现分页打印功能的相关资料,需要的朋友可以参考下
2018-05-05
js验证密码强度解析
这篇文章主要为大家详细介绍了js验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
javaScript如何生成xmlhttp
生成xmlhttp的方法有很多，在本文为大家介绍下javaScript中是如何实现的
2013-12-12
js注册时输入合法性验证方法
这篇文章主要为大家详细介绍了js注册时输入合法性验证方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
JS实现搜索关键词的智能提示功能
最近在百度搜索的时候，当你输入一个字或者词的时候，他会给你们弹出一个下拉框出来，里面是和你相关的搜索提示，效果非常人性化，基于js怎么实现搜索关键词智能提示功能，下面小编通过实例代码给大家介绍下，需要的的朋友参考下吧
2017-07-07
JS循环遍历ul中li的点击事件给选中li添加css样式(示例代码)
对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色，怎么实现这个功能呢，下面小编给大家带来了js循环遍历ul中li的点击事件，给给选中li添加css样式，感兴趣的朋友一起看看吧
2023-07-07
小程序实现带年月选取效果的日历
这篇文章主要为大家详细介绍了小程序实现带年月选取效果的日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-06-06
使用js实现html标签、文本的隐藏、显示、删除及添加
在设计网页时,有时需要静态或动态地隐藏标签或显示被隐藏的标签,那该怎么实现呢?这篇文章主要给大家介绍了关于使用js实现html标签、文本的隐藏、显示、删除及添加的相关资料,需要的朋友可以参考下
2023-06-06
javascript代码编写需要注意的7个小细节小结
每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。
2011-09-09