- 概念: Document Object Model 文檔對象模型
- DOM將HTML文檔表達爲樹結構。
- DOM是W3C(萬維網聯盟)的標準,它定義了訪問HTML和XML文檔的標準。
- 將標記語言文檔的各個組成部分,封裝爲對象。可以使用這些對象,對標記語言文檔進行(CRUD)增刪改查的動態操作。
- W3C DOM標準被分爲3個不同的部分
-
核心DOM - 針對任何結構化文檔的標準模型。
- Document:文檔對象
1.創建(獲取): 在html dom模型中可以使用window對象來獲取.
* window.document
* document
2.方法:
* 獲取Element對象:
getElementById(): 根據id屬性獲取元素對象。id屬性值一般唯一。
getElementsByTagName():根據元素名稱獲取元素對象們。返回值是一個數組。
getElementsClassName(): 根據Class名稱獲取元素對象們。返回值是一個數組。
getElementsByName(): 根據name名稱獲取元素對象們。返回值是一個數組。
* 創建其他DOM對象:
createAttribute(name)
createComment()
createElement()
createTextNode() - Element: 元素對象
1.獲取/創建:通過document來獲取和創建。
2.方法:- 1.removeAttribute(): 刪除屬性
- 2.setAttribute(): 設置屬性
- Attribute:屬性對象
- Text: 文本對象
- Comment:註釋對象
- Node :節點對象,其它五個的父對象
- 特點:所有dom對象都可以被認爲是一個節點。
- 方法:
CURD dom樹:
* appendChild():向子節點列表的結尾添加新的子節點。
* removeChild(): 刪除(並返回)當前節點的指定子節點。
* replaceChild():用新節點替換一個子節點。 - 屬性:
parentNode: 返回當前節點的父節點。
超鏈接功能:
1.可以被點擊:樣式
2.點擊後跳轉到href指定的url
需求:保留1功能,去掉2功能
實現:href=“javascript:void(0);”
- Document:文檔對象
-
XML DOM - 針對XML文檔的標準模型。
-
HTML DOM - 針對 HTML 文檔的標準模型。
1.標籤體的設置和獲取:innerHTML。- 通過innerHTML直接操作html內容。
2.使用html元素對象的屬性。
3.控制樣式。- 使用元素的style屬性來設置(div1.style.border = “1px solid”;)
- 提前定義好類選擇器的樣式,通過元素的className屬性來設置其class屬性值。
-
核心DOM動態表格示例:
<!doctype html>
<html>
<head lang="en">
<title>動態表格示例</title>
<meta charset="utf-8">
<style type="text/css">
table{
border: 1px solid;
margin: auto;
width: 500px;
}
th,td{
border: 1px solid;
text-align: center;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<br>
<br>
<div align="center">
<input id='index' type="text" placeholder="請輸入編號"></input>
   
<input id='name' type="text" placeholder="請輸入姓名"></input>
   
<input id='sex' type="text" placeholder="請輸入性別"></input>
<input id='add' type="button" value="添加"></input>
</div>
<br>
<br>
<table>
<caption>學生信息表</caption>
<tr><th>編號</th><th>姓名</th><th>性別</th><th>操作</th></tr>
<tr><td>1</td><td>張三</td><td>男</td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
<tr><td>2</td><td>李四</td><td>男</td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
<tr><td>3</td><td>王五</td><td>男</td><td><a href="javascript:void(0);" onclick="del_record(this)">刪除</a></td></tr>
</table>
<script>
function del_record(obj){ //刪除記錄
del_tr = obj.parentElement.parentElement;
del_table = del_tr.parentElement;
del_table.removeChild(del_tr);
}
document.getElementById("add").onclick = function(){ //添加記錄
var index = document.getElementById("index").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var td_insert1 = document.createElement("td");
td_insert1.appendChild(document.createTextNode(index));
var td_insert2 = document.createElement("td");
td_insert2.appendChild(document.createTextNode(name));
var td_insert3 = document.createElement("td");
td_insert3.appendChild(document.createTextNode(sex));
var td_insert4 = document.createElement("td");
var elem_a = document.createElement("a");
var text = document.createTextNode("刪除");
elem_a.setAttribute("href","javascript:void(0);");
elem_a.setAttribute("onclick","del_record(this);");
elem_a.appendChild(text);
td_insert4.appendChild(elem_a);
var tr_insert = document.createElement("tr");
tr_insert.appendChild(td_insert1);
tr_insert.appendChild(td_insert2);
tr_insert.appendChild(td_insert3);
tr_insert.appendChild(td_insert4);
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr_insert);
}
</script>
</body>
</html>
演示效果: