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

使用JavaScript实现一个简易的热更新
热更新是指在应用程序运行时,对程序的部分内容进行更新,而无需重启整个应用程序,热更新是在不停止整个应用程序的情况下,将新的代码、资源或配置应用于正在运行的应用程序,本文讲给大家介绍一下使用JavaScript实现一个简易的热更新,需要的朋友可以参考下
2023-08-08
js canvas实现红包照片效果
这篇文章主要介绍了js canvas实现红包照片效果
2018-08-08
js实现的光标位置工具函数示例
这篇文章主要介绍了js实现的光标位置工具函数,结合实例形式分析了JavaScript操作textarea文本框光标位置及文本操作相关技巧,需要的朋友可以参考下
2016-10-10
百度移动版的url编码解码示例
这篇文章主要介绍了百度移动版的url编码解码的具体实现,需要的朋友可以参考下
2014-04-04
关于JavaScript递归经典案例题详析
递归是算法中一个重要的解法,因此,有必要单拎出来讲讲,所以下面这篇文章主要给大家介绍了关于JavaScript递归经典案例题的相关资料,需要的朋友可以参考下
2021-07-07
页面使用密码保护代码
这是一个由JS实现的网页密码保护代码，在进入网页前需要在弹出框中输入密码才可以，不过现在不怎么用了，一般情况下，目前都在后台处理这种功能，用户输入用户名和密码后交给服务器处理，然后再返回信息，若登录无误就可看到某些内容
2013-04-04
JavaScript中async和await的使用及队列详情
这篇文章主要介绍了JavaScript中async和await的使用及队列详情，主要围绕js中async和await简单解析展开面试中可能会问到的关于队列的一些场景和知识点,需要的朋友可以参考一下
2022-07-07
BootStrapValidator校验方式
做输入校验的时候如果你前端框架用的是bootstrap的话，首推bootstrapValidator校验方式，下面通过本文给大家分享下校验流程，一起看看吧
2016-12-12
JS版获取字符串真实长度和取固定长度的字符串函数
JS版获取字符串真实长度和取固定长度的字符串函数...
2007-04-04
TypeScript常见类型及应用示例讲解
这篇文章主要介绍了TypeScript常见类型及应用示例讲解，本章我们会讲解 JavaScript 中最常见的一些类型，以及对应的描述方式，有需要的朋友可以借鉴参考下
2022-02-02