1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta chaset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <p name="pname">Hello</p>
9 <p name="pname">Hello</p>
10 <p name="pname">Hello</p>
11 <p name="pname">Hello</p>
12 <p name="pname">Hello</p>
13 <a name="pname">Hello</a>
14 <a id="aid" title="获取a标签的属性成功">aaaaaaa</a>
15 <a id="aid2">aid2</a>
16
17 <ul><li>1</li><li>2</li><li>3</li></ul> <!--设置一个ul节点,包含三个li子节点-->
18
19 <div id="div">
20 <p id="pid">div的p元素</p> <!--设置一个p节点，它的父节点是div-->
21 </div>
22 <script>
23 //通过名字查找元素查找并修改其内容
24 getName();
25 function getName(){
26 var count = document.getElementsByName("pname"); //计算名为pname的节点一共多少个
27 alert("id=pname的标签个数："+count.length);
28 var p = count[1];
29 p.innerHTML = "World"; //通过下标改变标签的内容
30 }
31
32 //通过id查找并获取节点属性内容
33 getAttr();
34 function getAttr(){
35 var anode = document.getElementById("aid");//获取id=aid的节点
36 var attr = anode.getAttribute("title"); //获取title属性的内容
37 alert(attr);
38 }
39
40 //通过id查找并动态设置标签属性
41 setAttr();
42 function setAttr(){
43 var anode = document.getElementById("aid2");//获取id=aid2的节点
44 anode.setAttribute("title","动态设置a的title属性");//动态设置title属性
45
46 var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功
47 alert(attr);
48 }
49
50 //通过标签名查找节点并获取子节点个数
51 getChileNode();
52 function getChileNode(){
53 var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点
54 alert("ul子节点个数："+childnode.length);//计算子节点的个数
55 }
56
57 //通过子节点获取父节点
58 getParentNode();
59 function getParentNode(){
60 var div = document.getElementById("pid");
61 alert(div.parentNode.nodeName);//通过子节点获取父节点
62 }
63
64 //动态添加节点
65 createNode();
66 function createNode(){
67 var body = document.body;
68 var input = document.createElement("input"); //动态添加节点
69 input.type = "button";
70 input.value = "动态添加的按钮";//创建一个按钮
71 body.appendChild(input);
72 }
73
74 //在特定的位置动态添加一个p元素
75 //addNode();
76 function addNode(){
77 var div = document.getElementById("div");
78 var node = document.getElementById("pid");
79 var newnode = document.createElement("p");
80 newnode.innerHTML = "在特定的位置动态添加一个p元素";
81 div.insertBefore(newnode,node);
82 }
83
84 //删除节点
85 removeNode();
86 function removeNode(){
87 var div = document.getElementById("div");
88 var p = div.removeChild(div.childNodes[1]);
89 }
90
91 //网页尺寸
92 getSize();
93 function getSize(){
94 //offsetWidth，offsetHeight获取不包含滚动条的页面宽和高
95 var width = document.documentElement.offsetWidth;
96 var height = document.documentElement.offsetHeight;
97 alert("不包含滚动条的页面宽和高:"+width+","+height);
98
99 //scrollWidth，scrollHeight获取不包含滚动条的页面宽和高
100 var width1 = document.documentElement.scrollWidth;
101 var height1 = document.documentElement.scrollHeight;
102 alert("包含滚动条的页面宽和高:"+width1+","+height1);
103 }
104
105
106 </script>
107 </body>
108 </html>
时间： 2024-10-27 13:30:20