本文實例講述了JavaScript DOM元素常見操作。分享給大家供大家參考，具體如下：
DOM概念
DOM（Document Object Model）：文檔對象模型。
通過開發者工具的Elements標簽頁可以查看
通過開發者工具的Sources標簽頁也可以觀察到整個文檔是有一系列節點
整個文檔是由一系列節點對象組成的一棵樹。
節點（Node）包括元素節點（1）、屬性節點（2）、文本節點（3）(1..2..3..代表節點類型)_
|
1
2
3
4
|
var
th1= document.getElementById(
"th1"
);
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);
|
th1代表一個元素節點（nodeType=1），nodeName就是標簽名（th），元素節點的nodeValue=null。
|
1
2
3
4
|
var
attr1=th1.getAttributeNode(
"name"
);
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);
|
getAttributeNode方法是獲取元素的屬性節點，此時輸出的節點類型為屬性節點（2），節點名稱就是屬性名（name），節點值就是屬性值（sex）
|
1
2
3
4
|
var
txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)
|
txt1是一個文本節點（3），節點名稱固定就是#text，節點值就是文本內容。
獲取元素
（1）getElementByid
根據元素的id屬性來獲取元素，獲取到的是一個元素。
（2）getElementsByTagName
根據標簽名來獲取元素，結果是一個元素集合。
（3）getElementsByClassName
根據class屬性來獲取元素，結果是一個元素集合。
（4）getElementsByName
根據name屬性來獲取元素，結果是一個元素集合。
總結：獲取元素可以根據標簽名獲取、也可以根據id、name、class屬性來獲取。根據id屬性獲取的結果是一個元素，而其它的獲取的是一個集合。
document對象支持以上四種，而element對象僅支持getElementsByTagName和getElementsByClassName。
修改元素
（1）修改內容
|
1
2
3
4
5
|
function
fun(){
//獲取到指定元素
var
p1 = document.getElementById(
"p1"
);
p1.innerText =
"我被單擊了！"
;
}
|
通過.innerText屬性可讀取或設置標簽的內容文本
|
1
2
3
4
5
|
function
fun(){
//獲取到指定元素
var
p1 = document.getElementById(
"p1"
);
p1.innerHTML =
"我被單擊了！<br>換行了"
;
}
|
也可以通過innerHTML屬性獲取或設置內容文本
倆者的區別：innerHTML會按照HTML規則解析文本，而innerText只是當做普通文本內容。
（1） 修改樣式
A．xxx．style.屬性名=“值”
B．xxx．classname=“…”(相當於修改了class的屬性)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<style>
.style1{
color:red;
font-size:20px;
text-decoration:underline;
}
.style2{
color:blue;
font-size:32px;
text-decoration:line-through;
}
</style>
</head>
<body>
<p id=
"p1"
>修改樣式測試</p>
<input type=
"button"
value=
"樣式一"
onclick=
"style1()"
>
<input type=
"button"
value=
"樣式二"
onclick=
"style2()"
>
</body>
<script>
var
p1 = document.getElementById(
"p1"
);
function
style1(){
p1.className =
"style1"
}
function
style2(){
p1.className =
"style2"
}
</script>
</html>
|
添加刪除元素
（1）CreateElement建一個元素節點
CreateElement("p")創建一個段落
（2）createTextNode創建一個文本節點
createTextNode("文本內容")，創建一個值為“文本內容”的文本節點.
（3）appendChild添加子節點
（4）removeChild 刪除子節點
動態添加
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<body>
<div id=
"div1"
>
</div>
<input type=
"button"
value=
"添加段落"
onclick=
"add()"
>
</body>
<script>
//全局變量
var
index = 1;
function
add(){
//創建一個段落標簽
var
p = document.createElement(
"p"
);
//創建文本節點
var
content=
"第"
+index+
"段落"
;
var
txt = document.createTextNode(content);
//創建文本節點添加的段落
p.appendChild(txt);
//將段落添加到div中
var
div1 = document.getElementById(
"div1"
);
div1.appendChild(p);
index++
}
</script>
|
動態刪除
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<div id=
"div1"
>
<p id=
"p1"
>第1段落 </p>
<p id=
"p2"
>第2段落 </p>
<p id=
"p3"
>第3段落 </p>
<p id=
"p4"
>第4段落 </p>
</div>
<input type=
"button"
value=
"刪除第二段"
onclick=
"del()"
>
</body>
<script>
function
del(){
//先找到父節點
var
div1 = document.getElementById(
"div1"
);
//再找到要刪除的節點
var
p2 = document.getElementById(
"p2"
);
//將要刪除的節點從父節點中移除
div1.removeChild(p2);
}
</script>
</html>
|
這種方法是分別找到父節點和要刪除的節點，然后執行刪除操作。該方法的一個前提是知道父節點是誰
那么如果並不知道父節點是誰，該如何刪除呢
p2.parentNode.removeChild(p2);
這個方法並不需要父節點是誰
動態的添加和刪除：
動態添加和動態刪除，刪除動態添加的奇數段落
思路1：獲取div1 下的所以段落，遍歷所以的段落，將序號為奇數的段落刪除。
|
1
2
3
4
5
6
7
8
9
|
function
del(){
var
div1 = document.getElementById(
"div1"
);
var
paras = div1.getElementsByTagName(
"p"
);
for
(
var
i
in
paras){
if
((i+1)%2 == 1){
div1.removeChild(paras[i]);
}
}
}
|
這種在初始時是可以的,但是隨着動態添加或刪除的進行，后面的結果就不對了。因為動態刪除操作就影響了原來的順序，而程序是按照序號去判斷奇偶性，所以出現誤判
思路2：添加通過設置class屬性，然后通過getElementsByclassName來獲取奇數行
（也可以從后往前刪）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<body>
<div id=
"div1"
>
</div>
<input type=
"button"
value=
"添加段落"
onclick=
"add()"
>
<input type=
"button"
value=
"刪除奇數第二段"
onclick=
"de1()"
>
</body>
<script>
var
index = 1;
function
add(){
//創建一個段落標簽
var
p = document.createElement(
"p"
);
//創建文本節點
var
content =
"第"
+ index +
"段落"
;
var
txt = document.createTextNode(content);
//將文本節點添加到段落
p.appendChild(txt);
if
(index % 2 == 1) {
p.setAttribute(
"class"
,
"odd"
);
}
//將段落添加到div中
var
div1 = document.getElementById(
"div1"
);
div1.appendChild(p);
index++;
}
/*function de1(){
var div1 = document.getElementById("div1");
var paras =div1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
div1.removeChild(paras[i]);
}
}
}*/
functionde1() {
var
div1 = document.getElementById(
"div1"
);
var
paras = div1.getElementsByClassName(
"odd"
);
// varparas = document.getElementsByName("odd");
for
(
var
i = paras.length - 1; i >= 0; i--) {
div1.removeChild(paras[i]);
}
}
</script>
</html>
|
導航
Document：是根節點
ParentNode：獲取父節點
childNodes：獲取所有子節點
firstChild：第一個子節點
lastChlid：獲取最后一個子節點
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
</head>
<body>
<div name=
"第一章"
>
<p id=
"p1"
>第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type=
"button"
value=
"獲取父節點的name屬性"
onclick=
"fun1()"
>
<input type=
"button"
value=
"顯示p1子節點的個數"
onclick=
"fun2()"
>
<input type=
"button"
value=
"顯示p1第一個子節點的類型"
onclick=
"fun3()"
>
<input type=
"button"
value=
"顯示p1最后一個子節點的類型"
onclick=
"fun4()"
>
</body>
<script>
var
p1 =document.getElementById(
"p1"
);
function
fun1(){
var
value=p1.parentNode.getAttribute(
"name"
);
alert(value);
}
function
fun2(){
var
chlids = p1.childNodes;
alert(chlids.length)
}
function
fun3(){
alert(p1.firstChild.nodeType);
}
function
fun4(){
alert(p1.lastChild.nodeType);
}
</script>
</html>
|