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
节点

性能优化篇之Webpack构建代码质量压缩的建议
这篇文章主要介绍了性能优化篇之Webpack构建代码质量压缩的建议，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
JS异步文件分片断点上传的实现思路
在项目中有时会遇到大文件上传，经常会出现链接超时的问题，所以就需要使用文件分片上传的方式来上传大文件。下面通过本文给大家介绍js异步文件分片断点上传的实例代码，需要的的朋友参考下吧
2016-12-12
原生javascript兼容性测试实例
原生javascript兼容性：currentStyle、scrollTop、event以及绑定事件IE的绑定事件为attachEvent/detachEvent等等兼容性测试实例,感兴趣的朋友可以参考下哈
2013-07-07
微信小程序返回上一页的各种方法实例
在开发小程序的时候我们总是能遇到各种奇怪的需求,下面这篇文章主要给大家介绍了关于微信小程序返回上一页的各种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
JavaScript 如何在线解压 ZIP 文件
本文将介绍浏览器解压和服务器解压两种在线解压ZIP文件的方案。帮助大家用JavaScript实现在线解压，感兴趣的朋友可以参考下
2021-05-05
JavaScript极简入门教程（三）：数组
这篇文章主要介绍了JavaScript极简入门教程（二）：数组,本文主要讲解了数组的创建和length属性的介绍,其它方法属性都没有介绍,需要的朋友可以参考下
2014-10-10
JS获取地址栏参数的几种方法小结
本篇文章主要是对JS获取地址栏参数的几种方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
用javascript对一个json数组深度赋值示例
本节主要介绍了用javascript对一个json数组深度赋值的具体实现，需要的朋友可以参考下
2014-07-07
JS 强制设为首页的代码
把网站设置为浏览器的首页是我们做网站时经常加到网站顶部的功能！下面这段代码是强制设置为首页的代码！最好别用啊！呵呵！
2009-01-01
JS实现点击文本框改变背景颜色
这篇文章主要为大家详细介绍了JS实现点击文本框改变背景颜色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08