javascript
JavaScript学习笔记05【高级——DOM对象】
- w3school 在線教程：https://www.w3school.com.cn
目錄
09 DOM對象
DOM_概述
HTML DOM樹
DOM、XML DOM、HTML DOM
DOM_Document對象_獲取Element
XML DOM Document 對象
DOM_Document對象_創建DOM
DOM_Element對象
DOM_Node對象
XML DOM - Node 對象
案例4_動態表格_添加
案例4_動態表格_刪除
HTML_DOM_innerHTML
案例4_動態表格——innerHTML簡寫版
HTML_DOM_樣式控制
09 DOM對象
DOM_概述
* 概念： Document Object Model 文檔對象模型
?? ?* 將標記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作。
* W3C DOM 標準被分為 3 個不同的部分：
?? ?* 核心 DOM - 針對任何結構化文檔的標準模型
?? ??? ?* Document：文檔對象
?? ??? ?* Element：元素對象
?? ??? ?* Attribute：屬性對象
?? ??? ?* Text：文本對象
?? ??? ?* Comment：注釋對象
?? ??? ?* Node：節點對象，其他5個的父對象
?? ?* XML DOM - 針對 XML 文檔的標準模型
?? ?* HTML DOM - 針對 HTML 文檔的標準模型
* 核心DOM模型：
?? ?* Document：文檔對象
?? ?* Element：元素對象
?? ?* Node：節點對象，其他5個的父對象
* HTML DOM
HTML DOM樹
DOM、XML DOM、HTML DOM
DOM_Document對象_獲取Element
Document：文檔對象
?? ?1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
?? ??? ?1. window.document
?? ??? ?2. document
?? ?2. 方法：
?? ??? ?1. 獲取Element對象：
?? ??? ??? ?1. getElementById()：根據id屬性值獲取元素對象。id屬性值一般唯一。
?? ??? ??? ?2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組。
?? ??? ??? ?3. getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。
?? ??? ??? ?4. getElementsByName()：根據name屬性值獲取元素對象們。返回值是一個數組。
?? ??? ?2. 創建其他DOM對象
?? ?3. 屬性
XML DOM Document 對象
XML DOM、HTML DOM 是 “核心 DOM”的拓展。學習 核心DOM模型，需要查看XML DOM，因為 HTML DOM 對 “核心 DOM” 做的修改 較多。
DOM_Document對象_創建DOM
Document：文檔對象
?? ?1. 創建(獲取)：在html dom模型中可以使用window對象來獲取
?? ??? ?1. window.document
?? ??? ?2. document
?? ?2. 方法：
?? ??? ?1. 獲取Element對象：
?? ??? ??? ?1. getElementById()：根據id屬性值獲取元素對象。id屬性值一般唯一。
?? ??? ??? ?2. getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組。
?? ??? ??? ?3. getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。
?? ??? ??? ?4. getElementsByName()：根據name屬性值獲取元素對象們。返回值是一個數組。
?? ??? ?2. 創建其他DOM對象：
?? ??? ??? ?createAttribute(name)
?? ??? ??? ?createComment()
?? ??? ??? ?createElement()
?? ??? ??? ?createTextNode()
?? ?3. 屬性
DOM_Element對象
* 核心DOM模型：
?? ?* Element：元素對象
?? ??? ?1. 獲取/創建：通過document來獲取和創建
?? ??? ?2. 方法：
?? ??? ??? ?1. removeAttribute()：刪除屬性
?? ??? ??? ?2. setAttribute()：設置屬性
??
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Element對象</title></head><body><a>點我試一試</a><input type="button" id="btn_set" value="設置屬性"><input type="button" id="btn_remove" value="刪除屬性"><script>//獲取btnvar btn_set = document.getElementById("btn_set");btn_set.onclick = function() {//1.獲取a標簽var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href", "https://www.baidu.com");}//獲取btnvar btn_remove = document.getElementById("btn_remove");btn_remove.onclick = function() {//1.獲取a標簽var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script></body> </html>DOM_Node對象
* 核心DOM模型：
?? ?* Node：節點對象，其他5個的父對象。
?? ??? ?* 特點：所有dom對象都可以被認為是一個節點。
?? ??? ?* 方法：
?? ??? ??? ?* CRUD dom樹：
?? ??? ??? ??? ?* appendChild()：向節點的子節點列表的結尾添加新的子節點。
?? ??? ??? ??? ?* removeChild()：刪除（并返回）當前節點的指定子節點。
?? ??? ??? ??? ?* replaceChild()：用新節點替換一個子節點。
?? ??? ?* 屬性：
?? ??? ??? ?* parentNode：返回節點的父節點。
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Node對象</title><style>div {border: 1px solid red;}#div1 {width: 200px;height: 200px;}#div2 {width: 100px;height: 100px;}#div3 {width: 100px;height: 100px;}</style></head><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><!--<input type="button" id="del" value="刪除子節點">--><script>//1.獲取超鏈接var element_a = document.getElementById("del");//2.綁定單擊事件element_a.onclick = function() {var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.獲取超鏈接var element_add = document.getElementById("add");//2.綁定單擊事件element_add.onclick = function() {var div1 = document.getElementById("div1");//給div1添加子節點//創建div節點var div3 = document.createElement("div");div3.setAttribute("id", "div3");div1.appendChild(div3);}/*超鏈接功能：1.可以被點擊：樣式2.點擊后跳轉到href指定的url需求：保留1功能，去掉2功能實現：href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1); // [object HTMLDivElement]</script></body> </html>XML DOM - Node 對象
案例4_動態表格_添加
分析：
?? ?1.添加：
?? ??? ?1. 給添加按鈕綁定單擊事件
?? ??? ?2. 獲取文本框的內容
?? ??? ?3. 創建td，設置td的文本為文本框的內容。
?? ??? ?4. 創建tr
?? ??? ?5. 將td添加到tr中
?? ??? ?6. 獲取table，將tr添加到table中
??
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>動態表格</title><style>table {border: 1px solid;margin: auto;width: 500px;}td, th {text-align: center;border: 1px solid;}div {text-align: center;margin: 50px;}</style> </head> <body><div><input type="text" id="id" placeholder="請輸入編號"><input type="text" id="name" placeholder="請輸入姓名"><input type="text" id="gender" placeholder="請輸入性別"><input type="button" value="添加" id="btn_add"></div><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="delTr(this);">刪除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delTr(this);">刪除</a></td></tr></table><script>//1.獲取按鈕document.getElementById("btn_add").onclick = function () {//2.獲取文本框的內容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//3.創建td，賦值td的標簽體//id 的 tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name 的 tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender 的 tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a標簽的tdvar td_a = document.createElement("td");var ele_a = document.createElement("a");ele_a.setAttribute("href", "javascript:void(0);");ele_a.setAttribute("onclick", "delTr(this);");var text_a = document.createTextNode("刪除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4.創建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.獲取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}</script> </body> </html>案例4_動態表格_刪除
分析：
?? ?1.添加：
?? ??? ?1. 給添加按鈕綁定單擊事件
?? ??? ?2. 獲取文本框的內容
?? ??? ?3. 創建td，設置td的文本為文本框的內容。
?? ??? ?4. 創建tr
?? ??? ?5. 將td添加到tr中
?? ??? ?6. 獲取table，將tr添加到table中
?? ?2.刪除：
?? ??? ?1.確定點擊的是哪一個超鏈接
?? ??? ??? ?<a href="javascript:void(0);" οnclick="delTr(this);" >刪除</a>
?? ??? ?2.怎么刪除？
?? ??? ??? ?removeChild()：通過父節點刪除子節點
HTML_DOM_innerHTML
案例4_動態表格——innerHTML簡寫版
* HTML DOM
?? ?1. 標簽體的設置和獲取：innerHTML
?? ?2. 使用html元素對象的屬性
?? ?3. 控制元素樣式
HTML_DOM_樣式控制
* HTML DOM
?? ?1. 標簽體的設置和獲取：innerHTML
?? ?2. 使用html元素對象的屬性
?? ?3. 控制元素樣式
?? ??? ?1. 使用元素的style屬性來設置
?? ??? ??? ?如：
?? ??? ??? ??? ?//修改樣式方式1
?? ??? ? ? ? ? ?div1.style.border = "1px solid red";
?? ??? ? ? ? ? ?div1.style.width = "200px";
?? ??? ? ? ? ? ?//font-size--> fontSize
?? ??? ? ? ? ? ?div1.style.fontSize = "20px";
?? ??? ?2. 提前定義好類選擇器的樣式，通過元素的className屬性來設置其class屬性值。
加油~
總結
以上是生活随笔為你收集整理的JavaScript学习笔记05【高级——DOM对象】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript学习笔记04【高级—
- 下一篇： JavaScript学习笔记06【高级—