js的DOM（节点操作）

来源：互联网发布：qq群优化软件怎么用编辑：程序博客网时间：2024/06/05 19:13

插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
例子：现创建一个新li标签，内容为"php",并将新创建的li插入到内容为HTML的标签前；
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><ul id="test"><li>JavaScript</li><li id="html">HTML</li></ul>  <script type="text/javascript">  var otest = document.getElementById("test");    var  newnode=document.createElement("li");   var  node=document.getElementById("html");       newnode.innerHTML="PHP";       otest.insertBefore(newnode,node);     /*要先取node的值并且创建newnode，使用格式是父节点.inserBefore（newnode,node）*/    </script> </body></html>
注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);
输出：
    JavaScript    PHP    HTML
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node ：必需，指定需要删除的节点。
例子：
定义clearText()函数，完成节点内容的删除。
1. 删除该节点的内容，先要获取子节点。
2. 然后使用循环遍历每个子节点。
3. 使用removeChild()删除节点。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><div id="content">  <h1>html</h1>  <h1>php</h1>  <h1>javascript</h1>  <h1>jquery</h1>  <h1>java</h1></div><script type="text/javascript">function clearText() {  var content=document.getElementById("content");  // 在此完成该函数 /*把空格去掉，content别忘了.childNodes*/  for(var i=0;i<content.childNodes.length;i++){  if(content.childNodes[i].nodeType==1){      var x=content.removeChild(content.childNodes[i]);      document.write("删除节点的内容："+x.innerHTML+"<br/>");  }   }}</script><button onclick="clearText()">清除节点内容</button></body></html>
注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值，代码如下:
输出结果为：
删除节点的内容：html删除节点的内容：php删除节点的内容：javascript删除节点的内容：jquery删除节点的内容：java
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：
node.replaceChild (newnode,oldnew ) 
参数：
newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。
例子：补充函数 replaceMessage() 代码，实现将 b 标签替换成 i 标签。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body>  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>    <script type="text/javascript">      function replaceMessage(){          var newnode=document.createElement("i");        /*  newnode.innerHTML="javascript"; 用这个可以替换以下两行代码*/          var newnodeText=document.createTextNode("Javascript");     /*createTextNode()添加节点文本*/          newnode.appendChild(newnodeText);                   /*添加子节点？*/          var oldNode=document.getElementById("oldnode");          oldNode.parentNode.replaceChild(newnode,oldNode);         }      </script>   </body></html>
注意:
1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
2. newnode 必须先被建立。
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：
document.createElement(tagName)
参数:
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
我们来创建一个按钮，代码如下：
<script type="text/javascript">   var body = document.body;    var input = document.createElement("input");     input.type = "button";     input.value = "创建一个按钮";     body.appendChild(input);   </script>  
效果：在HTML文档中，创建一个按钮。
我们也可以使用setAttribute来设置属性，代码如下：
<script type="text/javascript">     var body= document.body;                var btn = document.createElement("input");     btn.setAttribute("type", "text");     btn.setAttribute("name", "q");     btn.setAttribute("value", "使用setAttribute");     btn.setAttribute("onclick", "javascript:alert('This is a text!');");          body.appendChild(btn);  </script>  
效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。
例子：实现在HTML文档中创建一个链接，并设置相应属性。
1. 在右边编辑器补充代码，完善createa(url,text)创建链接函数，参数1为链接地址，参数2为链接文本。函数中添加链接地址、文本、文字颜色属性。
2. 调用createa函数，链接地址 http://www.imooc.com，文本为百度
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><script type="text/javascript">var main = document.body;//创建链接function createa(url,text){    var link=document.createElement("a");    link.href=url;    link.innerHTML=text;    link.style.color="red";    main.appendChild(link);}// 调用函数创建链接createa("http://www.baidu.com/","百度");</script> </body></html>
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
document.createTextNode(data)
参数：
data : 字符串值，可规定此节点的文本
例子：创建一个P标签，设置className属性，使用createTextNode创建文本节点"I love JavaScript!"。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.message{    width:200px;height:100px;background-color:#CCC;}</style></head><body><script type="text/javascript">  var body=document.body;  var newnode=document.createElement("p");  newnode.className="message";  var nodeText=document.createTextNode("I Love Javascript！");  newnode.appendChild(nodeText);  body.appendChild(newnode);</script> </body></html>

0 0