5、层次关系访问节点和创建节点
层次关系访问节点和创建节点
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>层次关系访问节点和创建节点</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //funFindNode(); //查找 9 //funAttribute(); //属性设置 10 funCreateNode(); //创建节点 11 } 12 //3.创建节点 13 function funCreateNode(){ 14 //创建li标签 15 var newli=document.createElement("li"); 16 17 //创建input标签 18 var newinput=document.createElement("input"); 19 20 //给input添加属性和属性值 21 newinput.setAttribute("type","text"); 22 newinput.setAttribute("value","陆怡雯"); 23 24 //将input放在li标签 25 newli.appendChild(newinput); 26 27 //li标签放入ul 28 document.getElementsByTagName("ul")[0].appendChild(newli); 29 30 //复制节点 31 var cloneli=newli.cloneNode(true); 32 33 //复制的li标签放入ul 34 document.getElementsByTagName("ul")[0].appendChild(cloneli); 35 36 //新节点插入到内部列表之前 37 document.getElementsByTagName("ul")[0].insertBefore(newli,document.getElementsByTagName("li")[0]); 38 } 39 //2.给元素添加属性或获取属性 40 function funAttribute(){ 41 var inp=document.getElementsByTagName("input")[0]; 42 //设置属性值 43 inp.setAttribute("value","holly"); 44 45 //获取属性值 46 var inpvalue=inp.getAttribute("value"); 47 48 alert(inpvalue); 49 } 50 //1.查找节点 51 function funFindNode(){ 52 //获取span标签 53 var thisspan=document.getElementsByTagName("span")[0]; 54 55 //拼接显示的内容 56 //1.获取span标签的父节点的内容 57 var divstr="span标签的父节点内容:"+thisspan.parentNode.innerHTML+"<br/>"; 58 console.log("span标签的父节点内容:"+divstr+"<br/>"); 59 60 //2.获取div子节点集合 61 var divlist=document.getElementsByTagName("div")[0].childNodes; 62 divstr+="div子节点集合:<br/>"; 63 for(var i=0;i<divlist.length;i++){ 64 divstr+=divlist[i].innerHTML; 65 } 66 67 console.log("div子节点集合:"+divstr+"<br/>"); 68 69 //3.获取第一个子节点 70 divstr+="<br/>div第一个子节点:"+document.getElementsByTagName("div")[0].firstChild.innerHTML+"<br/>"; 71 console.log("div第一个子节点:"+divstr+"<br/>"); 72 73 //4.获取最后一个子节点 74 divstr+="div的最后一个子节点:"+document.getElementsByTagName("div")[0].lastChild.innerHTML+"<br/>"; 75 console.log("div的最后一个子节点:"+divstr+"<br/>"); 76 77 //5.获取ul标签下一个节点 78 divstr+="ul列表的下一个节点:"+document.getElementsByTagName("ul")[0].nextSibling.innerHTML+"<br/>"; 79 console.log("ul列表的下一个节点:"+divstr+"<br/>"); 80 81 //6.获取ul标签上一个节点 82 divstr+="ul列表的上一个节点:"+document.getElementsByTagName("ul")[0].previousSibling.innerHTML+"<br/>"; 83 84 console.log("ul列表的上一个节点:"+divstr+"<br/>"); 85 86 //获取显示内容的div 87 document.getElementsByTagName("div")[1].innerHTML=divstr; 88 } 89 90 </script> 91 </head> 92 93 <body> 94 <div> 95 <h3>动画列表</h3> 96 <ul> 97 <li>熊出没</li> 98 <li>喜洋洋</li> 99 <li id="lastli"><input type="text"/></li> 100 </ul> 101 <span>希望大家明天上午,好好把我爱我家网页画完!</span> 102 </div> 103 <div></div> 104 </body> 105 </html>
