4.层次访问节点和创建节点 

  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>

 

posted @ 2016-08-18 11:38  红酒人生  阅读(290)  评论(0)    收藏  举报