JavaScript的DOM_节点的增删改

最新推荐文章于 2024-06-14 10:11:23 发布
最新推荐文章于 2024-06-14 10:11:23 发布
阅读量53 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/LO-ME/p/4587512.html
版权

一、概述

　　DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

　　

 

 

 二、write()方法

　　write()方法可以把任意字符串插入到文档中去。会覆盖掉原来的html

<script type="text/javascript">
    window.onload = function () {                         
        document.write('测试write');                         //在网页中打印出测试write，但是原有的HTML的内容被覆盖掉了，连标题都没了  一般用于测试
        document.write('<br /><strong>测试write</strong>');    //可以解析HTML标签
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

 

 

 

 

三、createElement()方法和appendChild()方法

　　1、createElement()方法可以创建一个元素节点。仅仅是创建了标签，不会自动添加到文档中，需要使用appendChild()方法添加到文档中

<script type="text/javascript">
    window.onload = function () {                         
       document.createElement('p');        //只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中  
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

　　2、appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上。

<script type="text/javascript">
    window.onload = function () {  
       var box = document.getElementById('box');　　　　//获取某一个元素节点
       var p = document.createElement('p');　　　　//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
       box.appendChild(p);　　　　　　　　　　　　//把新元素节点<p>添加id=box的div里的子节点列表的末尾上  
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

 

 

 

 

四、createTextNode()方法

　　createTextNode()方法创建一个文本节点。

<script type="text/javascript">
    window.onload = function () {  
       var box = document.getElementById('box');//获取某一个元素节点
       var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
       box.appendChild(p);//把新元素节点<p>添加id=box的div里的子节点列表的末尾上  
       
       var text = document.createTextNode('测试Div4');
       p.appendChild(text);  //把 文本添加到p标签里
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

 

 

 

 

 

 

五、insertBefore()方法

　　insertBefore()方法可以把节点创建到指定节点的前面。

<script type="text/javascript">
    window.onload = function () {  
       var box = document.getElementById('box');//获取某一个元素节点
       var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
       
       //box.parentNode先跳到父节点，这里父节点就是body
       box.parentNode.insertBefore(p,box);//表示在id为box的元素前面添加一个p标签
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

　　insertBefore()方法可以给当前元素的前面创建一个节点，但却没有提供给当前元素的后面创建一个节点。那么，我们可以用已有的知识创建一个 insertAfter()函数。

　　原理是：先创建一个节点后，使用parentNode跑到父节点里将创建的节点使用appendChild添加进去

<script type="text/javascript">
    window.onload = function () {  
       var box = document.getElementById('box');//获取某一个元素节点
       var p = document.createElement('p');//只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中
       insertAfter(p,box);
    }
    function insertAfter(newElement, targetElement) {
        
        var parent = targetElement.parentNode;                //得到父节点

        if (parent.lastChild === targetElement) {
            parent.appendChild(newElement);                            //如果最后一个子节点是当前元素，那么直接添加即可
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);//否则，在当前节点的下一个节点之前添加（也就是当前节点的后一个节点）
        }
    }
</script>
</head>
<body>
    <span>开始</span>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
    <span>结束</span>
</body>

 

 

 

 

六、repalceChild()方法

　　replaceChild()方法可以把节点替换成指定的节点。

<script type="text/javascript">
    window.onload = function () {  
       var span = document.getElementsByTagName('span')[0];
       
       var em = document.createElement('em');
       
       span.parentNode.replaceChild(em,span);
    };
</script>
</head>
<body>
    <span>开始</span>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
    <span>结束</span>
</body>

 

 

 

七、cloneNode()方法

　　cloneNode()方法可以把子节点复制出来。（复制之前先将一些空白节点删除掉）

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        var clone = removeWhiteNode(box).firstChild.cloneNode(true);//当这里的参数为false的时候只复制元素标签，标签中的内容不复制
        box.appendChild(clone);
    };
    
    function removeWhiteNode(nodes) {
        for (var i = 0; i < nodes.childNodes.length; i ++) {
            if (nodes.childNodes[i].nodeType === 3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)) {
                nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
            }
        }
        return nodes;
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

 

 

 

 

 

 

 

八、removeChild()方法

 　　removeChild()方法可以把指定节点删除（同样需要将空白字符删掉在操作）

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        box.removeChild(removeWhiteNode(box).firstChild);    //删除box下的第一个子节点
        box.parentNode.removeChild(box);                //删除整个box（先移到box的父节点后使用删除节点的方法）
    };
    
    function removeWhiteNode(nodes) {
        for (var i = 0; i < nodes.childNodes.length; i ++) {
            if (nodes.childNodes[i].nodeType === 3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)) {
                nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
            }
        }
        return nodes;
    }
</script>
</head>
<body>
    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">
        <p>测试Div1</p>
        <p>测试Div2</p>
        <p>测试Div3</p>
    </div>
</body>

 

转载于:https://www.cnblogs.com/LO-ME/p/4587512.html

dbp5156
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础(23)_DOM增删改
no15870678621的博客
12-06 553
DOM增删改
JavaScript基础(26)_dom增删改练习
no15870678621的博客
01-12 483
dom增删改
javascript中DOM元素节点的增删改操作方法。
cloudyless的博客
10-23 445
1.createElement() 可以用来创建一个元素节点对象， 它需要一个标签名字符串作为参数，它会根据这个标签名创建元素节点对象。然后将创建好的对象作为返回值返回。 const li=document.createElement("li") 2.createTextNode() 可以用来创建一个文本对象，它需要一个文本字符串作为参数，它会根据这个文本内容创建文本节点。然后将创建好的文本节点作为返回值返回。 const gzText=document.createTextNode("广州"
JS的DOM增删
Jamtin的博客
08-17 143
JS的DOM增删 <body> <ul id="city"> <li>北京</li> </ul> <input type="button" id="btn01" value="按钮" /> </body> 增加元素节点li广州 <script type="text/javascript"> function myClick(id, fun) {
DOM.zip_JavaScript dom_it
09-24
when you develop project in javaScript ,DOM is importent to you. just read it
JavaScript之DOM_动力节点Java学院整理
12-09
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。 始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作： 更新：更新该DOM节点的内容，相当于更新了该...
JavaScript HTML DOM元素 节点操作汇总
10-16
主要介绍了JavaScript HTML DOM元素 节点操作汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Javascript_DOM_Learning
02-09
Javascript_DOM_Learning
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 505
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 334
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1220
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 526
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 420
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1229
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
最新发布
mqiqe的专栏
06-14 145
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
前端工程化：基于Vue.js 3.0的设计与实践
weixin_44976692的博客
06-08 4553
本书由程沛权倾力撰写，基于其多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章。从前端工程化的基础开始，到TypeScript的深入学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程，帮助读者在前端工程化领域不断提升实战能力。程沛权，养了三只猫的程序员，热爱烹饪、设计和音乐。在前端领域有多年的开发经验和一线开发团队管理经验。
Ethereum-Score-Hella怎么使用，举例说明
ZJQ的博客
06-09 48
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 593
Vue在表单校验中trigger属性指定何时触发校验规则
音频节点属于javascript中，dom节点
03-06
音频节点和DOM节点都是JavaScript中的对象，但是它们的作用不同。音频节点用于处理音频数据，包括播放、暂停、停止、音量控制等；而DOM节点用于操作HTML文档中的元素，包括创建、修改、删除等。它们之间的联系是，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值