DOM 模型（文件物件模型）重點

馬化騰的爸爸碼ming發表於2020-12-26
模型物件

DOM 模型

DOM 全稱是Document Object Model 文件物件模型
大白話，就是把文件中的標籤，屬性，文字，轉換成為物件來管理。那麼它們是如何實現把標籤，屬性，文字轉換成為物件來管理呢。這就是我們馬上要學習的重點。

Document 物件（*****重點）

在這裡插入圖片描述
Document 物件的理解：
第一點：Document 它管理了所有的HTML 文件內容。
第二點：document 它是一種樹結構的文件。有層級關係。
第三點：它讓我們把所有的標籤都物件化
第四點：我們可以通過document 訪問所有的標籤物件。

什麼是物件化？？

我們基礎班已經學過物件導向。請問什麼是物件化？
舉例：
有一個人有年齡：18 歲，性別：女，名字：張某某
我們要把這個人的資訊物件化怎麼辦！

Class Person {
private int age;
private String sex;
private String name;
}

那麼html 標籤要物件化怎麼辦？

<body>
<div id="div01">div01</div>
</body>

模擬物件化，相當於：

class Dom{
private String id; // id 屬性
private String tagName; //表示標籤名
private Dom parentNode; //父親
private List<Dom> children; // 孩子結點
private String innerHTML; // 起始標籤和結束標籤中間的內容
}

Document 物件中的方法介紹（*****重點）

document.getElementById(elementId)
通過標籤的id 屬性查詢標籤dom 物件，elementId 是標籤的id 屬性值

document.getElementsByName(elementName)
通過標籤的name 屬性查詢標籤dom 物件，elementName 標籤的name 屬性值

document.getElementsByTagName(tagname)
通過標籤名查詢標籤dom 物件。tagname 是標籤名

document.createElement( tagName)
方法，通過給定的標籤名，建立一個標籤物件。tagName 是要建立的標籤名

注：

  • document 物件的三個查詢方法，如果有id 屬性，優先使用getElementById 方法來進行查詢如果沒有id屬性，則優先使用getElementsByName 方法來進行查詢如果id 屬性和name
    屬性都沒有最後再按標籤名查getElementsByTagName

id>name>TagName
以上三個方法，一定要在頁面載入完成之後執行，才能查詢到標籤物件。

getElementById 方法示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
/*
* 需求：當使用者點選了較驗按鈕，要獲取輸出框中的內容。然後驗證其是否合法。<br/>
* 驗證的規則是：必須由字母，數字。下劃線組成。並且長度是5 到12 位。
* */
function onclickFun() {
// 1 當我們要操作一個標籤的時候，一定要先獲取這個標籤物件。
var usernameObj = document.getElementById("username");
// [object HTMLInputElement] 它就是dom 物件
var usernameText = usernameObj.value;
// 如何驗證字串，符合某個規則，需要使用正規表示式技術
var patt = /^\w{5,12}$/;
/*
* test()方法用於測試某個字串，是不是匹配我的規則，
* 匹配就返回true。不匹配就返回false.
* */
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML 表示起始標籤和結束標籤中的內容
// innerHTML 這個屬性可讀，可寫
usernameSpanObj.innerHTML = "國哥真可愛！";
if (patt.test(usernameText)) {
// alert("使用者名稱合法！");
// usernameSpanObj.innerHTML = "使用者名稱合法！";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
// alert("使用者名稱不合法！");
// usernameSpanObj.innerHTML = "使用者名稱不合法！";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">較驗</button>
</body>
</html>

getElementsByName 方法示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全選
function checkAll() {
// 讓所有核取方塊都選中
// document.getElementsByName();是根據指定的name 屬性查詢返回多個標籤物件集合
// 這個集合的操作跟陣列一樣
// 集合中每個元素都是dom 物件
// 這個集合中的元素順序是他們在html 頁面中從上到下的順序
var hobbies = document.getElementsByName("hobby");
// checked 表示核取方塊的選中狀態。如果選中是true，不選中是false
// checked 這個屬性可讀，可寫
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
//全不選
function checkNo() {
var hobbies = document.getElementsByName("hobby");
// checked 表示核取方塊的選中狀態。如果選中是true，不選中是false
// checked 這個屬性可讀，可寫
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
// 反選
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全選</button>
<button onclick="checkNo()">全不選</button>
<button onclick="checkReverse()">反選</button>
</body>
</html>

getElementsByTagName 方法示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全選
function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定標籤名來進行查詢並返回集合
// 這個集合的操作跟陣列一樣
// 集合中都是dom 物件
// 集合中元素順序是他們在html 頁面中從上到下的順序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全選</button>
</body>
</html>

createElement 方法示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 現在需要我們使用js 程式碼來建立html 標籤，並顯示在頁面上
// 標籤的內容就是：<div>國哥，我愛你</div>
var divObj = document.createElement("div"); // 在記憶體中<div></div>
var textNodeObj = document.createTextNode("國哥，我愛你"); // 有一個文字節點物件#國哥，我
愛你
divObj.appendChild(textNodeObj); // <div>國哥，我愛你</div>
// divObj.innerHTML = "國哥，我愛你"; // <div>國哥，我愛你</div>,但，還只是在記憶體中
// 新增子元素
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>

節點的常用屬性和方法

節點就是標籤物件

方法：

通過具體的元素節點呼叫
getElementsByTagName()
方法，獲取當前節點的指定標籤名孩子節點
appendChild( oChildNode )
方法，可以新增一個子節點，oChildNode 是要新增的孩子節點

屬性：

名屬性
childNodes屬性，獲取當前節點的所有子節點
firstChild屬性，獲取當前節點的第一個子節點
lastChild屬性，獲取當前節點的最後一個子節點
parentNode屬性，獲取當前節點的父節點
nextSibling屬性，獲取當前節點的下一個節點
previousSibling屬性，獲取當前節點的上一個節點
className用於獲取或設定標籤的class 屬性值
innerHTML屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText屬性，表示獲取/設定起始標籤和結束標籤中的文字

練習：05.DOM 查詢練習


```handlebars
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom 查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查詢#bj 節點
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
//2.查詢所有li 節點
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length)
};
//3.查詢name=gender 的所有節點
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length)
};
//4.查詢#city 下所有li 節點
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1 獲取id 為city 的節點
//2 通過city 節點.getElementsByTagName 按標籤名查子節點
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length)
};
//5.返回#city 的所有子節點
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1 獲取id 為city 的節點
//2 通過city 獲取所有子節點
alert(document.getElementById("city").childNodes.length);
};
//6.返回#phone 的第一個子節點
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
// 查詢id 為phone 的節點
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj 的父節點
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1 查詢id 為bj 的節點
var bjObj = document.getElementById("bj");
//2 bj 節點獲取父節點
alert( bjObj.parentNode.innerHTML );
};
//8.返回#android 的前一個兄弟節點
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
// 獲取id 為android 的節點
// 通過android 節點獲取前面兄弟節點
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.讀取#username 的value 屬性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.設定#username 的value 屬性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "國哥你真牛逼";
};
//11.返回#bj 的文字值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("city").innerHTML);
// alert(document.getElementById("city").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br>
<br>
<p>
你喜歡哪款單機遊戲?
</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br />
<br />
<p>
你手機的作業系統是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查詢#bj 節點</button></div>
<div><button id="btn02">查詢所有li 節點</button></div>
<div><button id="btn03">查詢name=gender 的所有節點</button></div>
<div><button id="btn04">查詢#city 下所有li 節點</button></div>
<div><button id="btn05">返回#city 的所有子節點</button></div>
<div><button id="btn06">返回#phone 的第一個子節點</button></div>
<div><button id="btn07">返回#bj 的父節點</button></div>
<div><button id="btn08">返回#android 的前一個兄弟節點</button></div>
<div><button id="btn09">返回#username 的value 屬性值</button></div>
<div><button id="btn10">設定#username 的value 屬性值</button></div>
<div><button id="btn11">返回#bj 的文字值</button></div>
</div>
</body>
</html>

相關文章