插入节点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 οnclick="clearText()">清除节点内容</button> </body> </html>
注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。
如果要完全删除对象,给 x 赋 null 值,代码如下:
输出结果为:删除节点的内容:html 删除节点的内容:php 删除节点的内容:javascript 删除节点的内容:jquery 删除节点的内容:java
替换元素节点replaceChild()
例子:补充函数 replaceMessage() 代码,实现将 b 标签替换成 i 标签。replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法:
node.replaceChild (newnode,oldnew )参数:
newnode : 必需,用于替换 oldnew 的对象。
oldnew : 必需,被 newnode 替换的对象。
<!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
例子:创建一个P标签,设置className属性,使用createTextNode创建文本节点"I love JavaScript!"。createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:
document.createTextNode(data)参数:
data : 字符串值,可规定此节点的文本
<!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>
js的DOM(节点操作)
最新推荐文章于 2023-03-31 10:17:26 发布