js操作节点（添加、删除、更改属性）(转)

最新推荐文章于 2023-05-11 11:05:57 发布
最新推荐文章于 2023-05-11 11:05:57 发布
阅读量151 收藏
点赞数
原文链接：http://www.cnblogs.com/vbluebirdv/archive/2012/11/18/2776308.html
版权

1.创建节点并添加内容:使用的方法:createElement和createTextNode

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
        <script type=text/javascript>
function Message()
        {
         var op=document.createElement("p");
         var oText=document.createTextNode("hello world!");
         op.appendChild(oText);
         document.body.appendChild(op);
        }
        </script>
</head>
<body οnlοad="Message();">
</body>
</html>

2,删除节点 方法:getElementsByTagName和removeChild

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>HTML DOM</title>
        <script type=text/javascript>
        function removeMessage()
        {
         var op=document.body.getElementsByTagName("p")[0];
         op.parentNode.removeChild(op);
        }
        </script>
</head>
<body οnlοad="removeMessage();">
        <p>hello world!</p>
</body>
</html>

3.替换节点 方法replace(new,old)

<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>HTML DOM</title>
<script type=text/javascript>
      function replaceMessage()
      {
       var oNewp=document.createElement("p");
       var oText=document.createTextNode("World Hello");
       oNewp.appendChild(oText);
       var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);
      }
      </script>
</head>
<body οnlοad="replaceMessage();">
      <p>hello world!</p>
</body>
</html>

4.插入新消息 insertBefore(new,old)

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>HTML DOM</title>
<script type=text/javascript>
     function replaceMessage()
     {
      var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);
      var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);
     }
     </script>
</head>
<body οnlοad="replaceMessage();">
     <p>hello world!</p>
</body>
</html>

5,文档碎片

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>HTML DOM</title>
<script type=text/javascript>
    /****************
     * 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
     * 方法:createDocumentFragment()
     ********************************************/
    function replaceMessage()
    {
     var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
     var oFragment=document.createDocumentFragment();//文档碎片
     for(var i=0;i<arrText.length;i++)
     {
      var op=document.createElement("p");
      var oText=document.createTextNode(arrText[i]);
      op.appendChild(oText);
      oFragment.appendChild(op);
     }
     document.body.appendChild(oFragment);
    }
    </script>
</head>
<body οnlοad="replaceMessage();">
    <p>hello world!</p>
</body>
</html>

6,操作document元素属性

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>HTML DOM</title>
   <script type=text/javascript>
   function   Load_message()
   {
    var oimg=document.getElementById("a");
       alert(oimg.getAttribute("border"));
    oimg.setAttribute("alt","DOM Test");
   }
   </script>
</head>
<body οnlοad="Load_message();">
   <img border="0" width="100" height="150" id="a"/>
</body>
</html>

转载于:https://www.cnblogs.com/vbluebirdv/archive/2012/11/18/2776308.html

weixin_30363817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
1. `appendChild`: 将新节点添加到当前节点的子节点列表末尾。 2. `cloneNode`: 复制当前节点及其所有子节点。 3. `createAttribute`、`createCDATASection`、`createComment`等：用于创建不同类型的节点。 4. `...
html dom节点操作(获取/修改/添加或删除)
09-04
在DOM中，获取、修改、添加和删除节点是常见的操作： 1. **获取元素节点**： - `document.getElementById("nodeId")`：通过ID获取唯一元素。 - `document.getElementsByClassName("nodeclassname")`：根据类名...
js元素节点的新增，修改，删除
qq_56008371的博客
05-16 383
1.创建元素节点 //新增元素节点 书写格式：document.createElement("元素名称"); let pEle = document.createElement("p"); //添加节点 //书写格式：父元素节点.appendChild(子元素节点) let preEle = document.getElementById("container"); preEle.appendChild(pEle); 2.插入节点 /** * 插入节点 * 1、创建/获取:节点A
JS元素节点的属性之修改元素内容
wang_swa99er的博客
08-27 504
JS元素节点的属性之修改元素内容 1.innerHTML 获取标签间内容，会解析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
JS添加、删除节点
weixin_74167379的博客
11-26 2542
appendChild() insertBefore() removeChild() remove()
JS 节点操作
最新发布
weixin_43850458的博客
05-11 688
前端节点操作常用方法
JS基础之DOM对节点属性和样式的基本操作（一）
ZQsSpace的博客
02-08 968
元素节点.setAttribute("属性名","值");元素节点.removeAttribute("属性名");元素节点.getAttributeNode("属性名");元素节点.getAttribute("属性名");元素节点.getAttribute("属性名");element.setAttribute("class","类名")父节点.insertBefore(新节点，引用节点);元素节点.attributes //获取当前元素所有的属性节点。父节点.replaceChild(新节点，旧节点);
有关jquery与DOM节点操作方法和属性记录
11-26
总结一下，jQuery与DOM节点操作相关的知识主要包括：如何使用jQuery的方法进行元素的添加、插入、删除和替换，以及DOM API中的基本节点操作方法如`appendChild()`, `insertBefore()`, `replaceChild()`和`...
JS实现的DOM插入节点操作示例
11-28
// 将文本节点添加到元素中 return newP; } function insetNode(nodeId, str) { var node = document.getElementById(nodeId); // 获取目标节点 var newNode = crNode(str); // 创建新的元素 if (node....
添加和删除HTML节点的简单示例
09-28
需要注意的是，频繁的节点添加和删除会影响页面性能，尤其是在处理大量数据时。因此，为了优化，可以考虑使用虚拟DOM库（如React）或利用CSS隐藏/显示元素，而不是真正地创建和销毁DOM节点。 总结起来，HTML节点的...
纯js的树形菜单(添加删除节点)
02-10
纯js的树形菜单(添加删除节点)动态添加父节点子节点。jquery实现
JS实现添加,替换,删除节点元素的方法
11-22
本文实例讲述了JS实现添加,替换,删除节点元素的方法。分享给大家供大家参考，具体如下： 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- Created by TopStyle Pro Trial Versi
JS获取HTML属性内容并增加、删除属性
甜到你了么的博客
07-14 667
一、获取对象 通过js获取HTML对象有三种方式：通过getElementById（获取ID）方法获取单个对象，通过getElementsByName（获取Name）获取一组对象，通过getElementsByTagName（获取标签）获取一组对象 二、操作对象 //通过ID获取该对象 var obj=document.getElementById('id'); //操作该对象 添加属性：obj.setAttribute('accept','.xlsx'); 获取属性值：obj.get
JS创建、插入、删除和修改节点
m0_61685240的博客
09-26 1375
在 JavaScript 中，使用 HTML DOM 创建、插入、修改（替换）和删除节点需要分别调用 document 对象和元素对象的相应方法来实现，调用情况分别如下： 创建节点： 创建元素节点调用 document.createElement（节点名）； 创建文本节点调用 document.createTextNode（节点名）； 创建属性节点调用 document.createAttribute（节点名）; 元素节点的内容也可以使用：元素节点 .innerHTML 来设置。 节点的
自定义属性
qq_44378009的博客
12-05 833
1.5. 自定义属性操作 1.5.1 获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); //(2) elemen...
js添加、删除 、替换节点
qq_52104411的博客
03-20 1956
1、添加几个按钮 <button onclick="add()">添加</button>/*onclick是鼠标事件，当鼠标单击时执行脚本*/ <button onclick="del()">删除</button> <button onclick="rep()">替换</button> <div> </div> 2、js部分 <script>
JS代码动态设置节点属性
heliuerya的博客
02-06 445
JS代码动态设置节点属性
JavaScript实现节点的增加修改删除查找
ziwenya的博客
08-21 665
JavaScript实现增删改查
js DOM节点操作之创建、添加、删除和克隆节点
RayShyy的博客
03-21 4349
1. 创建节点 document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。 <body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> </body> <script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值