• 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>
  • 相关阅读:
    Unable to load dbxmss.dll (ErrorCode 16). It may be missing from the system Path
    同一网内机器无法连通解决一例
    Day.24
    Day.24
    Day.23
    Day.22
    Day.23
    Day.21
    Day.22
    Day.01-Day.20
  • 原文地址:https://www.cnblogs.com/holly8/p/5783378.html
Copyright © 2020-2023  润新知