?

111

什么是DOM

DOM：文檔對象模型。DOM 為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)。目的其實(shí)就是為了能讓js操作html元素而制定的一個(gè)規(guī)范。

DOM就是由節(jié)點(diǎn)組成的。

解析過程

HTML加載完畢，渲染引擎會(huì)在內(nèi)存中把HTML文檔，生成一個(gè)DOM樹，getElementById是獲取內(nèi)中DOM上的元素節(jié)點(diǎn)。然后操作的時(shí)候修改的是該元素的屬性。

DOM樹（一切都是節(jié)點(diǎn)）

DOM的數(shù)據(jù)結(jié)構(gòu)如下：

?

上圖可知，在HTML當(dāng)中，一切都是節(jié)點(diǎn)：（非常重要）

• 元素節(jié)點(diǎn)：HMTL標(biāo)簽。

• 文本節(jié)點(diǎn)：標(biāo)簽中的文字（比如標(biāo)簽之間的空格、換行）

• 屬性節(jié)點(diǎn)：：標(biāo)簽的屬性。

整個(gè)html文檔就是一個(gè)文檔節(jié)點(diǎn)。所有的節(jié)點(diǎn)都是Object。

DOM可以做什么

• 找對象（元素節(jié)點(diǎn)）

• 設(shè)置元素的屬性值

• 設(shè)置元素的樣式

• 動(dòng)態(tài)創(chuàng)建和刪除元素

• 事件的觸發(fā)響應(yīng)：事件源、事件、事件的驅(qū)動(dòng)程序

DOM節(jié)點(diǎn)的獲取

DOM節(jié)點(diǎn)的獲取方式其實(shí)就是獲取事件源的方式

操作元素節(jié)點(diǎn)，必須首先找到該節(jié)點(diǎn)。有三種方式可以獲取DOM節(jié)點(diǎn)：

var div1 = document.getElementById("box1"); //方式一：通過id獲取單個(gè)標(biāo)簽var arr1 = document.getElementsByTagName("div1"); //方式二：通過 標(biāo)簽名 獲得 標(biāo)簽數(shù)組，所以有svar arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲得 標(biāo)簽數(shù)組，所以有s

既然方式二、方式三獲取的是標(biāo)簽數(shù)組，那么習(xí)慣性是先遍歷之后再使用。

特殊情況：數(shù)組中的值只有1個(gè)。即便如此，這一個(gè)值也是包在數(shù)組里的。這個(gè)值的獲取方式如下：

document.getElementsByTagName("div1")[0]; //取數(shù)組中的第一個(gè)元素document.getElementsByClassName("hehe")[0]; //取數(shù)組中的第一個(gè)元素

DOM訪問關(guān)系的獲取

DOM的節(jié)點(diǎn)并不是孤立的，因此可以通過DOM節(jié)點(diǎn)之間的相對關(guān)系對它們進(jìn)行訪問。如下：

節(jié)點(diǎn)的訪問關(guān)系，是以屬性的方式存在的。

JS中的父子兄訪問關(guān)系：

這里我們要重點(diǎn)知道parentNode和children這兩個(gè)屬性的用法。下面分別介紹。

?

獲取父節(jié)點(diǎn)

調(diào)用者就是節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)只有一個(gè)父節(jié)點(diǎn)，調(diào)用方式就是

節(jié)點(diǎn).parentNode

（1）nextSibling：

? ? ?指的是下一個(gè)節(jié)點(diǎn)（包括標(biāo)簽、空文檔和換行節(jié)點(diǎn)）

• 火狐、谷歌、IE9+版本：都指的是下一個(gè)節(jié)點(diǎn)（包括標(biāo)簽、空文檔和換行節(jié)點(diǎn)）。

• IE678版本：指下一個(gè)元素節(jié)點(diǎn)（標(biāo)簽）。

（2）nextElementSibling：

• 火狐、谷歌、IE9+版本：都指的是下一個(gè)元素節(jié)點(diǎn)（標(biāo)簽）。

總結(jié)：為了獲取下一個(gè)元素節(jié)點(diǎn)，我們可以這樣做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，綜合這兩個(gè)屬性，可以這樣寫：

下一個(gè)兄弟節(jié)點(diǎn) = 節(jié)點(diǎn).nextElementSibling || 節(jié)點(diǎn).nextSibling

previous的中文是: 前一個(gè)

（1）previousSibling：

• 火狐、谷歌、IE9+版本：都指的是前一個(gè)節(jié)點(diǎn)（包括標(biāo)簽、空文檔和換行節(jié)點(diǎn)）。

• IE678版本：指前一個(gè)元素節(jié)點(diǎn)（標(biāo)簽）。

（2）previousElementSibling：

• 火狐、谷歌、IE9+版本：都指的是前一個(gè)元素節(jié)點(diǎn)（標(biāo)簽）。

總結(jié)：為了獲取前一個(gè)元素節(jié)點(diǎn)，我們可以這樣做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，綜合這兩個(gè)屬性，可以這樣寫：

前一個(gè)兄弟節(jié)點(diǎn) = 節(jié)點(diǎn).previousElementSibling || 節(jié)點(diǎn).previousSibling

3、補(bǔ)充：獲得任意一個(gè)兄弟節(jié)點(diǎn)：

節(jié)點(diǎn)自己.parentNode.children[index]; //隨意得到兄弟節(jié)點(diǎn)

獲取單個(gè)的子節(jié)點(diǎn)

1、第一個(gè)子節(jié)點(diǎn) | 第一個(gè)子元素節(jié)點(diǎn)：

（1）firstChild：

• 火狐、谷歌、IE9+版本：都指的是第一個(gè)子節(jié)點(diǎn)（包括標(biāo)簽、空文檔和換行節(jié)點(diǎn)）。

• IE678版本：指第一個(gè)子元素節(jié)點(diǎn)（標(biāo)簽）。

（2）firstElementChild：

• 火狐、谷歌、IE9+版本：都指的是第一個(gè)子元素節(jié)點(diǎn)（標(biāo)簽）。

總結(jié)：為了獲取第一個(gè)子元素節(jié)點(diǎn)，我們可以這樣做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，綜合這兩個(gè)屬性，可以這樣寫：

第一個(gè)子元素節(jié)點(diǎn) = 節(jié)點(diǎn).firstElementChild || 節(jié)點(diǎn).firstChild

2、最后一個(gè)子節(jié)點(diǎn) | 最后一個(gè)子元素節(jié)點(diǎn)：

（1）lastChild：

• 火狐、谷歌、IE9+版本：都指的是最后一個(gè)子節(jié)點(diǎn)（包括標(biāo)簽、空文檔和換行節(jié)點(diǎn)）。

• IE678版本：指最后一個(gè)子元素節(jié)點(diǎn)（標(biāo)簽）。

（2）lastElementChild：

• 火狐、谷歌、IE9+版本：都指的是最后一個(gè)子元素節(jié)點(diǎn)（標(biāo)簽）。

總結(jié)：為了獲取最后一個(gè)子元素節(jié)點(diǎn)，我們可以這樣做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，綜合這兩個(gè)屬性，可以這樣寫：

最后一個(gè)子元素節(jié)點(diǎn) = 節(jié)點(diǎn).lastElementChild || 節(jié)點(diǎn).lastChild

獲取所有的子節(jié)點(diǎn)

（1）childNodes：標(biāo)準(zhǔn)屬性。返回的是指定元素的子節(jié)點(diǎn)的集合（包括元素節(jié)點(diǎn)、所有屬性、文本節(jié)點(diǎn)）。是W3C的親兒子。

• 火狐 谷歌等高本版會(huì)把換行也看做是子節(jié)點(diǎn)。（了解）

用法：

子節(jié)點(diǎn)數(shù)組 = 父節(jié)點(diǎn).childNodes; //獲取所有節(jié)點(diǎn)。

（2）children：非標(biāo)準(zhǔn)屬性。返回的是指定元素的子元素節(jié)點(diǎn)的集合。【重要】

• 它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。
• 在IE6/7/8中包含注釋節(jié)點(diǎn)（在IE678中，注釋節(jié)點(diǎn)不要寫在里面）。

雖然不是標(biāo)準(zhǔn)的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。

用法：（用的最多）

子節(jié)點(diǎn)數(shù)組 = 父節(jié)點(diǎn).children; //獲取所有節(jié)點(diǎn)。用的最多。

nodeType

這里講一下nodeType。

• nodeType == 1 表示的是元素節(jié)點(diǎn)（標(biāo)簽） 。記住：元素就是標(biāo)簽。

• nodeType == 2 表示是屬性節(jié)點(diǎn) 了解

• nodeType == 3 是文本節(jié)點(diǎn) 了解

?

DOM節(jié)點(diǎn)操作（重要）

上一段的內(nèi)容：節(jié)點(diǎn)的訪問關(guān)系都是屬性。

節(jié)點(diǎn)的操作都是函數(shù)（方法）

創(chuàng)建節(jié)點(diǎn)

格式如下：

新的標(biāo)簽(元素節(jié)點(diǎn)) = document.createElement("標(biāo)簽名");

比如，如果我們想創(chuàng)建一個(gè)li標(biāo)簽，或者是創(chuàng)建一個(gè)不存在的adbc標(biāo)簽，可以這樣做：

<script type="text/javascript">var a1 = document.createElement("li"); //創(chuàng)建一個(gè)li標(biāo)簽var a2 = document.createElement("adbc"); //創(chuàng)建一個(gè)不存在的標(biāo)簽console.log(a1);console.log(a2);console.log(typeof a1);console.log(typeof a2); </script>

結(jié)果：

插入節(jié)點(diǎn)

插入節(jié)點(diǎn)有兩種方式，它們的含義是不同的。

方式1：

父節(jié)點(diǎn).appendChild(新的子節(jié)點(diǎn));

解釋：父節(jié)點(diǎn)的最后插入一個(gè)新的子節(jié)點(diǎn)。

方式2：

父節(jié)點(diǎn).insertBefore(新的子節(jié)點(diǎn),作為參考的子節(jié)點(diǎn));

解釋：

• 在參考節(jié)點(diǎn)前插入一個(gè)新的節(jié)點(diǎn)。
• 如果參考節(jié)點(diǎn)為null，那么他將在父節(jié)點(diǎn)最后插入一個(gè)子節(jié)點(diǎn)。

刪除節(jié)點(diǎn)

格式如下：

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn));

解釋：用父節(jié)點(diǎn)刪除子節(jié)點(diǎn)。必須要指定是刪除哪個(gè)子節(jié)點(diǎn)。

如果我想刪除自己這個(gè)節(jié)點(diǎn)，可以這么做：

node1.parentNode.removeChild(node1);

復(fù)制節(jié)點(diǎn)（克隆節(jié)點(diǎn)）

格式如下：

要復(fù)制的節(jié)點(diǎn).cloneNode(); //括號(hào)里不帶參數(shù)和帶參數(shù)false，效果是一樣的。要復(fù)制的節(jié)點(diǎn).cloneNode(true);

括號(hào)里帶不帶參數(shù)，效果是不同的。解釋如下：

• 不帶參數(shù)/帶參數(shù)false：只復(fù)制節(jié)點(diǎn)本身，不復(fù)制子節(jié)點(diǎn)。

• 帶參數(shù)true：既復(fù)制節(jié)點(diǎn)本身，也復(fù)制其所有的子節(jié)點(diǎn)。

?

設(shè)置節(jié)點(diǎn)的屬性

我們可以獲取節(jié)點(diǎn)的屬性值、設(shè)置節(jié)點(diǎn)的屬性值、刪除節(jié)點(diǎn)的屬性。

我們就統(tǒng)一拿下面這個(gè)標(biāo)簽來舉例：

<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">

下面分別介紹。

1、獲取節(jié)點(diǎn)的屬性值

方式1：

元素節(jié)點(diǎn).屬性;元素節(jié)點(diǎn)[屬性];

舉例：（獲取節(jié)點(diǎn)的屬性值）

<body> <img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];console.log(myNode.src);console.log(myNode.className); //注意，是className，不是classconsole.log(myNode.title);console.log("------------");console.log(myNode["src"]);console.log(myNode["className"]); //注意，是className，不是classconsole.log(myNode["title"]); </script> </body>

方式2：（推薦）

素節(jié)點(diǎn).getAttribute("屬性名稱");

例子：

console.log(myNode.getAttribute("src"));console.log(myNode.getAttribute("class")); //注意是class，不是classNameconsole.log(myNode.getAttribute("title"));

方式1和方式2的區(qū)別在于：前者是直接操作標(biāo)簽，后者是把標(biāo)簽作為DOM節(jié)點(diǎn)。推薦方式2。

2、設(shè)置節(jié)點(diǎn)的屬性值

方式1舉例：（設(shè)置節(jié)點(diǎn)的屬性值）

myNode.src = "images/2.jpg" //修改src的屬性值myNode.className = "image2-box"; //修改class的name

方式2：（推薦）

元素節(jié)點(diǎn).setAttribute(屬性名, 新的屬性值);

方式2舉例：（設(shè)置節(jié)點(diǎn)的屬性值）

? myNode.setAttribute("src","images/3.jpg");myNode.setAttribute("class","image3-box");myNode.setAttribute("id","你好");

3、刪除節(jié)點(diǎn)的屬性

格式：

元素節(jié)點(diǎn).removeAttribute(屬性名);

舉例：（刪除節(jié)點(diǎn)的屬性）

myNode.removeAttribute("class");myNode.removeAttribute("id");

轉(zhuǎn)載于:https://www.cnblogs.com/liuafan/p/9523773.html

總結(jié)

以上是生活随笔為你收集整理的前端 --- 关于DOM的介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。