一、基本概念
Document Object Model 文檔對象模型
將標記語言文檔的各個組成部分，封裝爲對象，可以使用這些對象，對標記語言文檔進行CRUD的動態操作
W3C DOM 標準被分爲 3 個不同的部分：
（1）核心 DOM - 針對任何結構化文檔的標準模型
* Document：文檔對象
* Element：元素對象
* Attribute：屬性對象
* Text：文本對象
* Comment:註釋對象
* Node：節點對象，其他5個的父對象
（2）XML DOM - 針對 XML 文檔的標準模型
（3）HTML DOM - 針對 HTML 文檔的標準模型
二、核心DOM模型
- Document：文檔對象
（1）創建(獲取)：在html dom模型中可以使用 window 對象來獲取
window.document
document
（2）方法
獲取Element對象：
a. getElementById() ： 根據id屬性值獲取元素對象。id屬性值一般唯一
b. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
c. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
d. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
創建其他DOM對象：
a. createAttribute(name)
b. createComment()
c. createElement()
d. createTextNode()
其他點擊參考
（3）屬性
（1）獲取/創建：通過document來獲取和創建
（2）方法：
removeAttribute()：刪除屬性
setAttribute()：設置屬性
特點：所有 dom 對象都可以被認爲是一個節點
方法：
* CRUD dom樹：
* appendChild()：向節點的子節點列表的結尾添加新的子節點。
* removeChild() ：刪除（並返回）當前節點的指定子節點。
* replaceChild()：用新節點替換一個子節點。
* 屬性：
* parentNode 返回節點的父節點。
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">刪除節點</a>
<a href="javascript:void(0);" id="add">增加節點</a>
<script>
// 刪除節點
// 獲取超鏈接
var e_d = document.getElementById("del");
//綁定單擊事件
e_d.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
// 增加節點
var e_a = document.getElementById("add");
e_a.onclick = function () {
var div1 = document.getElementById("div1");
// 給 div1 添加子節點首先需要創建 div 添加子節點
var div3 = document.createElement("div")
div3.setAttribute("id","div3")
div1.appendChild(div3)
}
</script>
</body>
超鏈接功能：
（1）可以被點擊：樣式
（2）點擊後跳轉到 href 指定的 url
如果需求：保留（1）功能，去掉（2）功能，意思就是不跳轉到其他頁面，也不重新加載本頁面
實現：href="javascript:void(0);"
三、HTML DOM
- 標籤體的設置和獲取：innerHTML
- 使用 html 元素對象的屬性
- 控制元素樣式
（1）使用元素的style屬性來設置
如：
//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
（2）提前定義好類選擇器的樣式，通過元素的 className 屬性來設置其 class 屬性值。
第（2）種方法常用
<head>
<style>
.text{
text-align: center;
color: red;
}
</style>
</head>
<body>
<div>
<div id="div">div</div>
</div>
<script>
var div = document.getElementById("div");
//通過提前設置 className 屬性設置樣式
div.className = "text";
</script>
</body>