javascript操作dom
前端笔记 2017-11-20 16:03:22

1、javascript 给dom绑定click事件

例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

JavaScript Code复制内容到剪贴板
  1. addEvent(document.getElementById("demo"),"click",myAlert);    
  2. function myAlert(){    
  3.     alert("又是一个警告框");    
  4. }  

 

2、javascript 删除元素节点 / 删除dom

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

XML/HTML Code复制内容到剪贴板
  1. <div id="parent">    
  2.     <p>First</p>    
  3.     <p>Second</p>    
  4. </div>    

当我们用如下代码删除子节点时：

JavaScript Code复制内容到剪贴板
  1. var parent = document.getElementById('parent');    
  2. parent.removeChild(parent.children[0]);    
  3. parent.removeChild(parent.children[1]); // <-- 浏览器报错    

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

 

一：获取元素节点方法：

1.var node = document.getElementById("nodeId");

2.var nodelist = document.getElementsByClassName("nodeclassname");

3.var nodelist = document.getElementsByTagName("nodetagname");

 

二：获取到元素节点以后我们可以对他进行的操作：1.对自身的操作。2.对子节点的操作。3.对兄弟节点的操作。4.对父节点的操作

2.1. 删除自身：node.parentNode.removeChild(node);

2.2.判断是否有子节点：var boolean = node.hasChildNodes();

获取子节点列表：var childList = node.childNodes;

获取节点元素类型：var nodetype = node.nodeType; var nodename = node.nodeName;

删除子节点。node.removeChild(childNode);

在子节点尾部插入一个子节点:node.appendChild(childNode);

在子节点收不插入一个子节点:node.insertBefore(childNode);

用A节点替换B节点：node.replaceChild(A,B);

2.3.node.nextSibling获取相邻的下一个兄弟节点

node.previousSibling获取相邻的上一个兄弟节点

2.4 . 获取父节点node.parentNode

 

 

DEMO：

JavaScript Code复制内容到剪贴板
  1. let currentNode = event.target;    
  2.                 let parentNode = currentNode.parentNode;    
  3.                     
  4.     
  5.                 let newNode = currentNode.cloneNode(false);     
  6.                 newNode.innerHTML = "修改";    
  7.                 newNode.setAttribute("src", "/cms/update-base/"+id);    
  8.                     
  9.                 parentNode.removeChild(currentNode); //删除当前dom    
  10.                 parentNode.appendChild(newNode); //添加新节点    
  11.                     
  12.                 console.log(currentNode);    
  13.                 console.log(parentNode);    
  14.                 return false;    

 

3、替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。

oldnew : 必需，被 newnode 替换的对象。

注意:

1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。

2. newnode 必须先被建立。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>    
  2. <html>    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  5. <title>无标题文档</title>    
  6. </head>    
  7. <body>    
  8.     
  9.     
  10.   <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>    
  11.   <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>    
  12.     
  13.     <script type="text/javascript">    
  14.       function replaceMessage(){    
  15.         var newNode=document.createElement("i");    
  16.         //var text=document.createTextNode("aaa");    
  17.        //newNode.appendChild(text);    
  18.         var oldNode=document.getElementById("oldnode");      
  19.         oldNode.parentNode.replaceChild(newNode,oldNode);    
  20.        }        
  21.   </script>    
  22.     
  23.  </body>    
  24. </html>    

效果：点击“将粗体改为斜体”后，“JavaScript”将消失：

是一个很常用的技术，为网页添加动态效果。
将加粗改为斜体


将注释取消后：

aaa是一个很常用的技术，为网页添加动态效果。
将加粗改为斜体

 

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/219.html

上一篇 Javascript数组操作
下一篇 关于选中label就可以直接选中input的小技巧
相关的文章
Powered by yoyo苏ICP备15045725号