javaScript操作节点(6个案例+代码+效果)

已于 2024-10-07 17:27:51 修改
阅读量715 收藏 13
点赞数 8
分类专栏： js知识梳理 文章标签： javascript 前端 开发语言 css3 html vscode web
于 2024-10-07 17:25:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142741729
版权

目录

1.节点属性

2.节点操作

1)获取父节点

案例:获取父节点

1.代码

2.效果

2)获取子节点

案例:获取子节点

1.代码

2.效果

3.获取兄弟元素

案例:获取兄弟元素

1.代码

2.效果

4.创建节点

案例:创建一个节点

1.代码

2.效果

5.添加节点

案例:添加一个节点

1.代码

2.效果

6.移除节点

案例:移除一个节点

1.代码

HTML部分

页面结构:

样式:

JavaScript部分

功能:

实现细节:

2.效果

1.节点属性

  • nodeName 获取节点名称
  • nodeValue 用户获取节点值
  • nodeType  获取节点类型

var node = document.body;          //获取body节点

console.log(node.nodeName)       //获取节点名称，输出为Body

console.log(node.nodeValue)       //获取节点值,输出为null

console.log(node.nodeType)        //获取节点类型

2.节点操作

1)获取父节点

通过元素节点.parentNode获取父节点

案例:获取父节点

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取父节点</title>
</head>
<body>
    <div class="myDivStyle"> 
        父节点
        <div  id="myIdDivStyle" >子节点</div>
    </div>
    
    <script>
        // 获取元素
        var myDiv = document.querySelector(".myDivStyle");
        var myIdDiv = document.getElementById("myIdDivStyle");

        // 获取父节点
        var myParentNode = myIdDiv.parentNode;
        // 输出
        console.log("获取myIdDivStyle的父节点");
        console.log(myParentNode);

        //获取myDivStyle的父节点
        console.log("获取myDivStyle的父节点");
        var myParentNode2 = myDiv.parentNode;
        console.log(myParentNode2);

    </script>
    </script>
</body>
</html>

2.效果

2)获取子节点

  • firstChild   获取当前节点的第一个子节点
  • lastChild   获取当前节点的最后一个子子节点
  • firstElementChild    获取当前节点的第一个子元素节点
  • lastElementChild     获取当前节点最后一个子元素
  • children                    获取当前节点的所有子元素
  • childNodes               获取当前元素的所有子节点

案例:获取子节点

1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取子节点</title>
</head>
<body>
    <div id="myDiv">
        <p>这是第一段文字</p>
        <p>这是第二段文字</p>
        <p>这是第三段文字</p>
        <p>这是第四段文字</p>
        
    </div>>
    <button id="myButton">获取子节点</button>
    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");
        var myButton = document.getElementById("myButton");

        // 绑定事件
        myButton.onclick = function () {
            // 获取子节点
            var childNodes = myDiv.childNodes;

            // 遍历子节点
            for (var i = 0; i < childNodes.length;i++) {

                console.log(childNodes[i]);

                //在HTML文档上输出节点内容
                document.write("<hr>");
                document.write(childNodes[i].nodeName + "<br>");
                document.write(childNodes[i].nodeType + "<br>");
                document.write(childNodes[i].nodeValue + "<br>");
                document.write("<br>");
            }
        }
    </script>
    
</body>
</html>

2.效果

初始状态

点击获取

3.获取兄弟元素

  • previousSibling    获取上一个兄弟节点
  • nextSibling   获取下一个兄弟节点
  • previousElementSibling    获取上一个兄弟节点
  • nextElementSibling   获取下一个兄弟节点

案例:获取兄弟元素

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取兄弟元素</title>
    <style>
        
    </style>
</head>
<body>
    <div id="myDiv">这是div元素</div>
    <div id="myDiv2">这是div元素2</div>
    <div id="myDiv3">这是div元素3</div>

    <div id="myDiv5">这是div元素5</div>
    <div id="myDiv6">这是div元素6</div>
    
    <script>
        //通过myDiv3获取前后兄弟元素节点
        var myDiv3 = document.getElementById("myDiv3");
        var nextSibling = myDiv3.nextElementSibling;
        var previousSibling = myDiv3.previousElementSibling;
        console.log(nextSibling);
        console.log(previousSibling);
        //获取兄弟节点
        var myNext =  myDiv3.previousSibling;
        var mypre = myDiv3.nextSibling;
        console.log(myNext);
        console.log(mypre);
    </script>
    
</body>
</html>

2.效果

注:节点元素是指节点内HTML文档中的信息

    节点是指当前节点的所有信息

4.创建节点

通过document.createElement("标签名")

案例:创建一个节点

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建一个节点</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        div {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            width: 300px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <div>
        <ul id="myUl">
            <li>列表1</li>
        </ul>
    </div>

    <script>
        // 创建一个节点
        var li = document.createElement("li");
        li.innerHTML = "列表2";
        document.getElementById("myUl").appendChild(li);
    </script>

</body>
</html>

2.效果

可以看到已经创建添加了列表2

5.添加节点

通过元素节点.appendChild(元素)  //在当前元素节点之前添加节点

通过元素节点.beforeChild(元素)  //在当前元素节点之前添加节点

案例:添加一个节点

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加一个节点</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #myDiv {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            width: 300px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <ul id="myList">
            <li>第一个元素</li>
            <li id="testLi">第二个元素</li>
            <li>第三个元素</li>
        </ul>
    </div>
    <button id="myButtonAfter">之后添加一个节点</button>
    <button id="myButtonBefore">之前添加一个节点</button>
    
    <script>
        // 获取元素
        var testLiElement = document.getElementById("testLi");
        var myButtonAfter = document.getElementById("myButtonAfter");
        var myButtonBefore = document.getElementById("myButtonBefore");
        
        // 绑定事件
        // 在之后添加元素事件绑定
        myButtonAfter.onclick = function () {
            // 创建一个节点
            var newNode = document.createElement("li");
            // 添加文本节点
            var newTextNode = document.createTextNode("通过myButtonAfter添加的节点");
            // 将文本节点添加到节点中
            newNode.appendChild(newTextNode);
            // 在testLi之后添加节点
            testLiElement.parentNode.insertBefore(newNode, testLiElement.nextSibling);
        }
        // 在之前添加元素事件绑定
        myButtonBefore.onclick = function () {
            // 创建一个节点
            var newNode = document.createElement("li");
            // 添加文本节点
            var newTextNode = document.createTextNode("通过myButtonBefore添加的节点");
            // 将文本节点添加到节点中
            newNode.appendChild(newTextNode);
            // 在testLi之前添加节点
            testLiElement.parentNode.insertBefore(newNode, testLiElement);
        }
    </script>
</body>
</html>

2.效果

原始效果

在之前添加元素

在之后添加元素

6.移除节点

通过元素节点.removeChild(子元素)   移除节点

案例:移除一个节点

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移除节点</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #myDiv {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            width: 300px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            background-color: #e0e0e0;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <ul id="myList">
            <li>第一个元素</li>
            <li id="testLi">第二个元素</li>
            <li>第三个元素</li>
        </ul>
    </div>
    <button id="myRemoveButton">移除最后一个节点</button>

    <script>
        var myRemoveButton = document.getElementById("myRemoveButton");

        // 绑定事件
        myRemoveButton.onclick = function () {
            // 获取 ul 元素
            var testLiElement = document.getElementById("myList");

            // 移除最后一个节点
            if (testLiElement.children.length > 0) {
                //注意这里面传递的是元素
                testLiElement.removeChild(testLiElement.lastElementChild);
            } else {
                console.log("没有可以移除的节点");
            }
        };
    </script>
</body>
</html>
HTML部分
页面结构:
  • 这是一个简单的网页，用来展示如何通过点击按钮移除列表中的最后一个项目。
  • 页面上有一个白色的方框（<div>），里面包含一个无序列表（<ul>），列表中有三个条目（<li>）。
  • 页面底部还有一个蓝色的按钮，上面写着“移除最后一个节点”。
样式:
  • 页面整体看起来很干净，背景是浅灰色的，字体使用的是Arial或类似的无衬线字体。
  • 列表项有圆角和轻微的背景色，看起来像是卡片一样。
  • 按钮是蓝色的，鼠标悬停时会变深一些，给人一种可以点击的感觉。
JavaScript部分
功能:
  • 当你点击那个蓝色按钮的时候，会发生一些事情。具体来说，就是列表中的最后一个条目会被删除掉。
  • 如果列表里已经没有任何条目了，那么在浏览器的控制台（开发者工具里可以看到）会打印出一条消息：“没有可以移除的节点”。
实现细节:
  • 首先，JavaScript找到那个按钮，并且给它绑定了一个点击事件处理函数。
  • 当你点击按钮时，这个处理函数就会运行。
  • 函数首先找到那个包含所有列表项的<ul>元素。
  • 然后检查这个<ul>元素下是否有子元素（也就是列表项）。如果有，就移除最后一个；如果没有，就在控制台上提示说没有东西可以移除了。

2.效果

惜.己
关注
专栏目录
JavaScript 图片放大效果及代码说明
10-29
本文将详细介绍如何使用JavaScript实现这一效果，并提供相应的代码说明。 首先，我们来看一下HTML部分，这里定义了两个重要的元素：一个原始图片（#img）和一个放大镜（#magnifier）。`<style>`标签中的CSS样式设置...
javascript得到XML某节点的子节点个数的脚本
10-30
### JavaScript 获取 XML 某节点的子节点个数 在 Web 开发中，JavaScript 经常被用来处理 XML 数据，特别是在客户端对 XML 文件进行解析、提取数据或进行其他操作时。本文将详细介绍如何使用 JavaScript 来获取 XML...
javaScript操作元素(9个案例+代码+效果)
2301_76862031的博客
10-07 1073
js中操作元素的常用操作，innerHtml,innerText,textContext,style属性,className属性，classList属性，img属性,Attribute属性,data*-属性。案例:使用innerHTML修改文本内容 案例:data属性的简单操作;案例:修改我的链接地址;案例:修改img标签图片的文本;; 案例:添加/去除背景图;;案例:改变形状
todolist 案例 原生JavaScript写法+HTML代码+CSS代码
hangshao_123的博客
11-06 2743
1. html结构： <header> <section> <label for="title">ToDoList</label> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> </sectio
js获取HTML中元素的5种方法(5个案例+代码+效果)
2301_76862031的博客
10-07 2055
javasript中获取元素的5种办法，案例：点击使球球变大，案例:点击显示图片，案例:点击使小球随机移动随机获取颜色；案例:控制小球移动；案例:获取网页的基本机构
JavaScript增加节点案例
qq_36507046的博客
07-12 1792
增加节点分为两个步骤：1、创建元素节点语法：元素.creatElement('标签名')2、追加节点创建的元素节点不会显示在页面中，要想在界面看到，还得插入到某个父元素中。有两种追加给父元素的方法。（一定是追加给元素所以需要先获取父元素） 插入到父元素的最后一个子元素语法：父元素.appendChild(子元素) 插入到父元素中某个子元素的前面语法：父元素.InsertBefore(要插入的元素，在哪个元素前插入).........
b站pink老师JavaScript的DOM+节点案例代码——新浪下拉菜单
weixin_72322475的博客
08-24 547
b站pink老师JavaScript的DOM+节点案例代码——新浪下拉菜单
Javascript 替换节点详解
大剑师兰特的GIS世界
06-09 1039
在JavaScript中，替换节点是指将DOM树中的某个节点用另一个新节点替换的操作。这一功能对于动态修改页面内容、实现复杂的UI交互非常有用。以下是关于替换节点的详细说明、示例代码、注意事项以及应用场景。
JavaScript小案例程序保存（完整代码+效果展示）
热门推荐
xubuhui的博客
11-20 1万+
1.案例——点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换照片</title> </head> <body> <button id="btn">点我...
b站pink老师JavaScript的DOM+节点案例代码——简单发布留言+删除留言
weixin_72322475的博客
08-24 526
b站pink老师JavaScript的DOM+节点案例代码——简单发布留言
Javascript高级+小案例
qq_45638271的博客
04-11 3027
BOM：Windows对象 目标 掌握Windows对象的基本使用 路径 BOM介绍 Window对象 BOM介绍 BOM是Browser Object Model的缩写，简称浏览器对象模型，是将使用的浏览器抽象成对象模型。 简单理解：把整个浏览器当做一个对象来处理。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 Screen对象， Screen 对象中存放着有关显示浏览器屏幕的信息。 Navigator对象，包含的属性描述了正在使用的浏览器(当前浏览器的相关
HTML+Javascript+CSS测试题
06-08
5. DOM操作：了解如何使用JavaScript操作DOM节点，包括创建、删除、查找和修改元素。 6. 事件处理：理解事件冒泡、事件捕获和事件委托，以及如何绑定和移除事件监听器。 7. AJAX使用：测试异步请求的编写和数据处理...
《数据采集与网络爬虫》大作业-7个爬虫案例代码+实验报告.rar
06-29
《数据采集与网络爬虫》大作业包含了七个Python爬虫案例，这些案例旨在帮助初学者掌握数据采集的基本技能，特别是针对网页数据的抓取。在这个压缩包中，我们可以看到涉及了多个关键的Python爬虫技术，包括正则表达式...
JavaScript实现节点的删除与序号重建实例
10-23
通过以上知识点的介绍，我们可以了解到，实现一个功能完整的JavaScript节点删除与序号重建实例，不仅需要掌握DOM操作的基本技巧，还需要考虑到代码的实用性和安全性。这要求我们在开发过程中，不断积累经验，并对所...
Echarts 折线图
weixin_44443380的博客
11-08 241
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 912
关于vue2API的面试题
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 519
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 386
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 640
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值