一、結點
文檔對象模型（Document Object Model），是W3C組織推薦的處理可擴展標記語言的標准編程接口。js的DOM操作可以改變網頁的內容、結構和樣式，可以利用DOM操作來改變元素里面的內容、屬性等。
1、html的DOM樹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body bgcolor="white">
<h5 align="middle">文字鏈接和圖片鏈接</h5>
<center>
<a href="https://www.baidu.com/" title="百度一下">百度</a><br><br><br><br><br><br>
<a href="https://www.baidu.com/" title="百度一下"><img src="img/百度圖標.png" /></a>
</center>
</body>
</html>
上面的HTML文件可以轉化為如下的DOM樹：
Document： 整個HTML文件稱為一個Document文檔。
Element：標簽稱為Element元素，例如：head、title、body、h5等。
Attribute：標簽里面的屬性，例如：href、title等。
Text：text文本、空格、換行，例如：<h5>之間的文本內容。
Node：Document、Element、Attribute、Text統稱為Node。
2、DOM對象的常用方法：
getElementById() 返回帶有指定 ID的元素 getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組） getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表 appendChild() 把新的子節點添加到指定節點 removeChild() 刪除子節點 replaceChild() 替換子節點 insertBefore() 在指定的子節點前面插入新的子節點 createAttribute() 創建屬性節點 createElement() 創建元素節點 createTextNode() 創建文本節點 getAttribute() 返回指定的屬性值 setAttribute() 把指定屬性設置或修改為指定的值
應用舉例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="d1"> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("23日，@電影熊出沒 發布撤檔聲明，
“我們不願看到觀眾朋友們因為觀看《熊出沒·狂野大陸》承擔任何健康風險，更不願看到疫情進一步擴散的可能。
沒有什么比家人和孩子的安全更加重要!我們特此宣布，《熊出沒·狂野大陸》將正式退出春節檔，擇日再映。”"); para.appendChild(node); var element=document.getElementById("d1"); element.appendChild(para); </script> </body> </html>
首先創建段落元素結點，然后創建文本結點，最后將文本結點放入段落中。
3、結點操作（父子節點）
（1）獲取子結點
普通方式：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
</ul>
<script>
var myul=document.querySelector(".fu");
var myli=document.querySelector(".zi"); </script> </body>
需要分別獲取父節點和子節點
通過結點操作獲取（獲取父節點）
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
</ul>
<script>
var myli=document.querySelector(".zi");
console.log(myli.parentElement);
</script>
</body>
利用父子關系獲取結點
（3）獲取子節點
普通方式：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
</ul>
<script>
var myul=document.querySelector(".fu");
var lis=myul.querySelectorAll("li");
console.log(lis);
</script>
</body>
結點操作：獲取的是所有的結點
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
</ul>
<script>
var myul=document.querySelector(".fu");
console.log(myul.childNodes);
</script>
</body>
可以通過判斷nodetype獲取需要的結點
獲取所有的子元素節點：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
</ul>
<script>
var myul=document.querySelector(".fu");
console.log(myul.children);
</script>
</body>
獲取最后一個和第一個元素結點（IE9以上可使用）：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var myul=document.querySelector(".fu");
console.log(myul.firstElementChild);
console.log(myul.lastElementChild)
</script>
</body>
沒有兼容性問題的情況下返回第一個子元素和最后一個子元素：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var myul=document.querySelector(".fu");
console.log(myul.children[0]);
console.log(myul.children[3])
</script>
</body>
優化：
<body>
<ul class="fu">
<li class="zi">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var myul=document.querySelector(".fu");
console.log(myul.children[0]);
console.log(myul.children[myul.children.length-1])
</script>
</body>
4、結點操作（兄弟結點）
（1）獲取兄弟結點
<body>
<div id="1"></div>
<div id="2"></div>
<span id="3"></span>
<script>
var mydiv=document.getElementById("3")
console.log(mydiv.nextSibling);
console.log(mydiv.previousSibling);
</script>
</body>
因為存在換行，所以兄弟結點都為文本結點
（2）獲取兄弟元素結點
<body>
<div id="1"></div>
<div id="2"></div>
<span id="3"></span>
<script>
var mydiv=document.getElementById("2")
console.log(mydiv.nextElementSibling);
console.log(mydiv.previousElementSibling);
</script>
</body>
二、dom改變結點的內容
1、改變元素內容
（1）element.innerText：從起始位置到終止位置，但它除去html標簽、空格、換行
改變元素內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
</head>
<body>
<button>獲取時間</button>
<div>hello</div>
<script>
//獲取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
//注冊事件
btn.onclick = function() {
div.innerText = "2020年7月24日15:58:00";
}
</script>
</body>
</html>
點擊按鈕：
因為script需要獲取標簽，因此將標簽放到最前方，保證能夠先獲取到標簽
不識別標簽：
<body>
<button>獲取時間</button>
<div>hello</div>
<script>
//獲取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
//注冊事件
btn.onclick = function() {
div.innerText = "<strong>2020年7月24日15:58:00<strong>";
}
</script>
</body>
（2）element.innerHTML：起始位置到終止位置的全部內容，包括html標簽、空格和換行
修改元素內容：
<body>
<button>獲取時間</button>
<div>hello</div>
<script>
//獲取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
//注冊事件
btn.onclick = function() {
div.innerHTML = "2020年7月24日15:58:00";
}
</script>
</body>
識別元素標簽：
<body>
<button>獲取時間</button>
<div>hello</div>
<script>
//獲取元素
var btn = document.querySelector("button");
var div = document.querySelector("div");
//注冊事件
btn.onclick = function() {
div.innerHTML = "<strong>2020年7月24日15:58:00<strong>";
}
</script>
</body>
不識別鏈接：
<body>
<button>獲取時間</button>
<div>hello</div>
<script>
//獲取元素
var btn = document.querySelector("button");
var div = document.querySelector("div"); //注冊事件 btn.onclick = function() { div.innerHTML = "https://www.cnblogs.com/zhai1997/"; } </script> </body>
為文本，點擊鏈接不能跳轉
2、改變元素的屬性
（1）操作input的屬性
<body>
<button>請點擊</button>
<input type="text" value="請輸入"/>
<script>
//獲取元素
var btn = document.querySelector("button");
var input = document.querySelector("input");
//注冊事件
btn.onclick = function() {
input.value="被點擊了";
btn.disabled=true;
}
</script>
</body>
點擊前：
點擊后：
（2）src的屬性
<body>
<button id="button1">1</button>
<button id="button2">2</button>
<img src="img/1.jpeg" />
<script>
//獲取元素
var btn1 = document.getElementById("button1");
var btn2= document.getElementById("button2");
var img=document.querySelector("img");
//注冊事件
btn1.onclick = function() {
img.src="img/hua.png"
}
btn2.onclick=function(){
img.src="img/1.jpeg";
}
</script>
</body>
點擊按鈕1：
點擊按鈕2：
（3）密碼明文
<body>
<button id="button">1</button>
<input type="password" id="pwd"/>
<script>
var button =document.getElementById("button");
var pwd=document.getElementById("pwd");
var flag=0;
button.onclick=function(){
if(flag==0){
pwd.type="text";
}else{
pwd.type="password";
}
}
</script>
</body>
未點擊按鈕：
點擊按鈕：
3、改變樣式
（1）普通方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
div.onclick=function(){
this.style.backgroundColor="red";
}
</script>
</body>
</html>
點擊按鈕前：
點擊后：
（2）className方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.change{
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div>hello</div>
<script>
var div=document.querySelector("div");
div.onclick=function(){
this.className="change";
}
</script>
</body>
</html>
點擊前：
點擊后：加載相應的樣式
此種方式會覆蓋原有的樣式，如果要保留原有的樣式，可以將原有的樣式寫在前面，修改后的樣式寫在后面