1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <meta charset="utf-8" />
7 </head>
8 <body>
9 <ul>
10 <li id="html">html</li>
11 <li id="css">css</li><li id="js">js</li>
12 </ul>
13 <script type="text/javascript">
14 //访问指定元素
15 var html = document.getElementById("html"); //通过ID获取对象
16 html.style.fontWeight = "bold";//改变元素的样式
17 var arr = document.getElementsByTagName("li"); //通过标签获取对象的集合
18 alert(arr.length); //共有3个
19 </script>
20
21 <script type="text/javascript">
22 //访问相关的元素
23 var elm = document.lastChild; //获取文档的最后一个子节点(html)标记
24 document.write(elm.nodeName + "<br/>");
25
26 var body = elm.lastChild; //获取(html)的(最后一个子节点)body标记
27 document.write(body.nodeName + "<br/>"); //最后一个子节点
28
29 var head = elm.firstChild;//获取(html)的(第一个子节点)head标记
30 document.write(head.nodeName + "<br/>"); //第一个子节点
31
32 var ul = body.childNodes[1]; //获取(body)的子节点数组 ul标记
33 document.write(ul.nodeName+"<br/>");//数组第1个元素的名字
34
35 var li1 = ul.childNodes[1]; //获取ul下的子节点数组第一个 li标记
36 document.write(li1.nodeName + "<br/>");//数组第1个元素的名字
37
38 var text1 = li1.nextSibling; //获取li1后一个兄弟节点
39 document.write(text1.nextSibling.nodeName + "<br/>");//数组第个元素的名字 li //li与li之间必须紧挨着 否则未定义
40 //默认把换行当成元素; 两次获取兄弟元素
41 </script>
42
43 <div id="div1"></div>
44 <script type="text/javascript">
45 //追加元素
46 var div1 = document.getElementById("div1");//当前节点
47 var newH1 = document.createElement("h1");//创建元素节点(h1标签)
48 var newText = document.createTextNode("abcdefghijk");//创建文本节点
49 newH1.appendChild(newText);//将文本节点添加到 (h1中)
50 div1.appendChild(newH1); //将新建元素节点添加到<div>中 (作为最后一个节点)
51 </script>
52
53 <div id="div2">
54 <p id="p1">段落1</p>
55 <p id="p2">段落2</p>
56 </div>
57 <script type="text/javascript">
58 //插入元素
59 var newPara = document.createElement("p");//创建元素节点
60 var newText = document.createTextNode("新段落");
61 newPara.appendChild(newText);//将文本节点添加到 p中
62 var myDiv = document.getElementById("div2"); //获取父节点
63 var para2 = document.getElementById("p2"); //指定插入位置的节点
64 myDiv.insertBefore(newPara, para2);//插入指定节点值前 (p2前)
65 </script>
66
67 <div id="div3">
68 <p id="p11">段落11</p>
69 <p id="p12">段落12</p>
70 </div>
71 <script type="text/javascript">
72 //替换元素
73 var newH1 = document.createElement("h1"); //创建节点h1
74 var newText = document.createTextNode("标题1");//创建文本节点
75 newH1.appendChild(newText);//将文本节点添加到h1节点中
76 var myDiv = document.getElementById("div3");//获取父节点
77 var para1 = document.getElementById("p11"); //获取替换的节点
78 myDiv.replaceChild(newH1,para1); //把段落p11替换为标题1
79 </script>
80
81 <div id="div4">
82 <p id="p21">段落21</p>
83 <p id="p22">段落22</p>
84 </div>
85 <script type="text/javascript">
86 //删除子节点
87 var myDiv = document.getElementById("div4");//获取父节点
88 var para1 = document.getElementById("p21");//指定要删除的节点
89 myDiv.removeChild(para1);//删除指定的子节点
90 </script>
91
92 <div id="div5"></div>
93 <script type="text/javascript">
94 //元素的属性与内容操作
95 var myDiv = document.getElementById("div5");//获取元素对象
96 myDiv.innerHTML = "<h1>asdfghjk<h1>";//设置元素里面的html内容
97 myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //为元素设置新的属性
98 </script>
99
100 <div id="div6"></div>
101 <div id="div7"></div>
102 <script type="text/javascript">
103 //style属性
104 var myDiv = document.getElementById("div6");
105 myDiv.style.width = "200px";
106 myDiv.style.height = "50px";
107 myDiv.style.border = "1px solid #000";//设置div6的样式
108 var myDiv1 = document.getElementById("div7");
109 myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //设置div7的样式
110 //javascript不允许在属性或方法名称里使用连字符;例如background-Color; 因此需要调整书写格式backgroundColor;连字符后面用大写
111 </script>
112
113 <div id="div8"></div>
114 <script type="text/javascript">
115 //className属性
116 var myDiv = document.getElementById("div8");//获取div8对象
117 myDiv.className = "a"; //更改样式<div id="div8" class ="a"></div>
118 myDiv.className = "b"; //更改样式<div id="div8" class ="b"></div>
119 </script>
120 </body>
121 </html>
<script>
(function () { document.getElementsByTagName("body")[0].style.cssText = "overflow:hidden"; }) ();
</script>
