首页 > 资讯 > 前端开发 > JavaScript >js常用节点操作实例总结

394

分享到

js常用节点操作实例总结

js 节点操作 2023-05-17 11:05:15 394人浏览薄情痞子

摘要

一：父节点 1：返回父节点 element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null代码： <body> <div>

一：父节点

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 测试上述代码运行效果~

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: js常用节点操作实例总结

本文链接: https://www.lsjlt.com/news/211136.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

js常用节点操作实例总结

一：父节点 1：返回父节点 element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null代码： <body> <div>...

99+

2023-05-17

js 节点操作
js不常见操作运算符总结

目录2、逗号运算符3、javaScript空值合并操作符（??）4、javaScript可选链操作符( ?. )1、前言 js的运算符很多，之前有文章提过。例...

99+

2024-04-02
python中numpy 常用操作总结

前言： NumPy 是 Python 语言的一个扩充程序库，支持大量高维度数组与矩阵运算，此外也针对数组运算提供大量的数学函数库。同时NumPy 是机器学习必不可少的工具之一。常用...

99+

2024-04-02
JavaScript的节点操作实例分析

今天小编给大家分享一下JavaScript的节点操作实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一...

99+

2024-04-02
MySql常用表操作命令总结

本篇内容介绍了“MySql常用表操作命令总结”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 1:使用SH...

99+

2024-04-02
14个用Python实现的Excel常用操作总结

目录前言一、关联公式:Vlookup二、数据透视表三、对比两列差异四、去除重复值五、缺失值处理六、多条件筛选七、模糊筛选数据八、分类汇总九、条件计算十、删除数据间的空格十一、数据分...

99+

2024-04-02
js中不常见的运算符与操作符总结

javaScript常用运算符和操作符总结类别 ...

99+

2024-04-02
python常用字符串操作的总结

本篇内容主要讲解“python常用字符串操作的总结”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“python常用字符串操作的总结”吧!1、字符串使用乘法运算符*做乘法运算的含义是复制。>&...

99+

2023-06-20
JavaScript中DOM操作常用事件总结

目录常用事件演示得到焦点和失去焦点演示鼠标划过和离开点击事件load加载页面事件onkeyup 键盘弹起事件内容变化事件选中时触发上一篇聊了如何同JavaScript获得页面元素，...

99+

2024-04-02
python切片操作方法的实例总结

目录前言一、切片的2种索引方向二、切片的操作方式三、一些基本操作1、切取单个对象2、切取整个列表3、步长step正负值决定索引方向的一些案例四、进阶操作1.修改某个元素值2.替换元...

99+

2024-04-02
db2数据库常用操作命令总结

本篇内容介绍了“db2数据库常用操作命令总结”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文详细汇总了D...

99+

2024-04-02
PHP常用的文件操作函数总结

目录1 ：basename()2 ：copy()3 ：dirname()4 ：disk_free_space()5 ：disk_total_space()6 ：f...

99+

2022-11-13

PHP文件操作函数 PHP文件操作
Git文件常用操作总结及拓展

目录1、Git本地版本库结构2、Git常用操作方法3、补充：添加多个文件到暂存区4、补充：提交操作未写备注5、补充：从工作区直接提交到版本库1、Git本地版本库结构如下图所示： ...

99+

2024-04-02
Python和Excel的完美结合的常用操作案例汇总

目录前言Python和Excel的交互vlookup函数绘图柱状图雷达图前言在以前，商业分析对应的英文单词是Business Analysis，大家用的分析工具是Excel，后来数...

99+

2024-04-02
R语言中data.frame的常用操作总结

前言：近段时间学习R语言用到最多的数据格式就是data.frame，现对data.frame常用操作进行总结，其中函数大部分来自dplyr包，该包由Hadley Wickham所作，...

99+

2024-04-02
JavaScript操作数组的常用方法总结

我们在日常开发过程中，使用到原生 JavaScript的时候，有时候会频繁的对数组进行操作，今天我把工作以来，经常用到的有关 JavaScript数组的方法总结一...

99+

2024-04-02
JS中的6种打断点的方式实例总结

目录前言普通断点条件断点DOM 断点URL 断点Event Listener 断点异常断点总结前言 Debugger 是前端开发很重要的一个工具，它可以在我们关心的代码处断住，通过单...

99+

2024-04-02
python常用小脚本实例总结

目录前言打印16进制字符串文件合并多线程下载图集多线程下载图片爬虫抓取信息爬虫多线程下载电影名称串口转tcp工具远程读卡器server端黑客rtcp反向链接调用c的动态库示例tcp的...

99+

2024-04-02
JavaScript中常用的数组操作方法总结

目录前言数组基础遍历方法forfor offor in数组的基础操作方法push：尾部追加元素pop：尾部移出元素unshift：头部追加元素shift：头部移出元素splice：删...

99+

2024-04-02
MyBatis-Plus删除操作知识点总结

系列文章目录 Mybatis-Plus知识点[MyBatis+MyBatis-Plus的基础运用]_心态还需努力呀的博客-CSDN博客 Mybatis-Plus+SpringBoot结合运用_心态还需努力呀的博客-CSDN博客MyBai...

99+

2023-09-03

mybatis spring boot mysql 后端 java-ee