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>
时间： 2024-12-20 20:04:28