什么是DOM
DOM：Document Object Model，文檔對象模型，把整個文檔當成一個一個的節(jié)點對象。
他是：
- js的組成部分
- 一套標準，目前有DOM1和DOM2這兩種標準
我們可以使用DOM操作來操作頁面中的元素。
DOM節(jié)點
子節(jié)點
- childNode：返回值一個數(shù)組，放的是父節(jié)點中所有的子節(jié)點
- nodeType:返回值是一個數(shù)組，1表示元素節(jié)點，3表示文本節(jié)點
在某些瀏覽器中，如火狐，使用childNode獲取所有元素節(jié)點時會把空格等一起或取出來，此時就需要使用nodeType來判斷。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 使用childNode獲取到所有的li標簽，并將背景顏色改為紅色
window.onload = function () {
var oUl = document.getElementById('ul');
for (var i = 0; i < oUl.childNodes.length; i++) {
// 判斷nodeType的值是否為1
if (oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.backgroundColor = 'red';
};
};
}
</script>
</head>
<body>
<ul id = 'ul'>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
- childern： 取子節(jié)點，與childNode相比，chlidren不會把非標簽元素解析出來，不用擔心兼容性問題
父節(jié)點
- parentNode
首尾子節(jié)點
| IE下的語法 | 火狐下的語法 | 含義 |
|---|---|---|
| firstChild | firstElementChild | 首 |
| lastChild | lastElementChild | 尾 |
兄弟節(jié)點
| IE下的語法 | 火狐下的語法 | 含義 |
|---|---|---|
| nextSibling | nextElementSibling | 下一個 |
| previousSilbing | previousElementSibling | 上一個 |
添加元素
createElement(元素名):創(chuàng)建一個元素
父元素.appendChild（子元素）將子元素添加進父元素中(添加在最后邊)
示例：點擊一次按鈕，添加一個li標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var oText = document.getElementById('text');
oBtn.onclick = function () {
// 創(chuàng)建一個新標簽
var oLi = document.createElement('li');
// 將輸入框中的文字寫在新li標簽中
oLi.innerHTML = oText.value;
// 將新標簽添加在父標簽里
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input type="text" id = "text">
<input type="button" value="點擊添加" id = "btn">
<ul id = "ul">
<li>hello</li>
</ul>
</body>
</html>
父元素.insertBefore(子元素，在誰之前插入),在誰之前插入子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var oText = document.getElementById('text');
oBtn.onclick = function () {
// 創(chuàng)建一個新標簽
var oLi = document.createElement('li');
// 將輸入框中的文字寫在新li標簽中
oLi.innerHTML = oText.value;
// 將新標簽添加在父標簽里
// oUl.appendChild(oLi);
var aLi = document.getElementsByTagName('li');
// 在第0個元素之前插入新元素
oUl.insertBefore(oLi, aLi[0]);
}
}
</script>
</head>
<body>
<input type="text" id = "text">
<input type="button" value="點擊添加" id = "btn">
<ul id = "ul">
<li>hello</li>
</ul>
</body>
</html>
刪除元素
父元素.removeChild(要刪除的元素)：刪除父元素中的某個子元素
示例：點擊刪除，刪除某個元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementsByTagName('a');
var oUl = document.getElementById('ul');
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].onclick = function() {
oUl.removeChild(this.parentNode);
}
};
}
</script>
</head>
<body>
<input type="text" id = "text">
<input type="button" value="點擊添加" id = "btn">
<ul id = "ul">
<li>hello<a href="javascript:;">刪除</a></li>
<li>123<a href="javascript:;">刪除</a></li>
<li>234<a href="javascript:;">刪除</a></li>
<li>hel234lo<a href="javascript:;">刪除</a></li>
</ul>
</body>
</html>
