前端 --- 关于DOM的介绍
?
111
什么是DOM
DOM：文檔對象模型。DOM 為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。
DOM就是由節點組成的。
解析過程
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然后操作的時候修改的是該元素的屬性。
DOM樹（一切都是節點）
DOM的數據結構如下：
?
上圖可知，在HTML當中，一切都是節點：（非常重要）
-
元素節點：HMTL標簽。
-
文本節點：標簽中的文字（比如標簽之間的空格、換行）
-
屬性節點：：標簽的屬性。
整個html文檔就是一個文檔節點。所有的節點都是Object。
DOM可以做什么
-
找對象（元素節點）
-
設置元素的屬性值
-
設置元素的樣式
-
動態創建和刪除元素
-
事件的觸發響應：事件源、事件、事件的驅動程序
DOM節點的獲取
DOM節點的獲取方式其實就是獲取事件源的方式
操作元素節點，必須首先找到該節點。有三種方式可以獲取DOM節點：
var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽var arr1 = document.getElementsByTagName("div1"); //方式二：通過 標簽名 獲得 標簽數組，所以有svar arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲得 標簽數組，所以有s既然方式二、方式三獲取的是標簽數組，那么習慣性是先遍歷之后再使用。
特殊情況：數組中的值只有1個。即便如此，這一個值也是包在數組里的。這個值的獲取方式如下：
document.getElementsByTagName("div1")[0]; //取數組中的第一個元素document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素DOM訪問關系的獲取
DOM的節點并不是孤立的，因此可以通過DOM節點之間的相對關系對它們進行訪問。如下：
節點的訪問關系，是以屬性的方式存在的。
JS中的父子兄訪問關系：
這里我們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。
?
獲取父節點
調用者就是節點。一個節點只有一個父節點，調用方式就是
節點.parentNode（1）nextSibling：
? ? ?指的是下一個節點（包括標簽、空文檔和換行節點）
-
火狐、谷歌、IE9+版本：都指的是下一個節點（包括標簽、空文檔和換行節點）。
-
IE678版本：指下一個元素節點（標簽）。
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一個元素節點（標簽）。
總結：為了獲取下一個元素節點，我們可以這樣做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，綜合這兩個屬性，可以這樣寫：
下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSiblingprevious的中文是: 前一個
（1）previousSibling：
-
火狐、谷歌、IE9+版本：都指的是前一個節點（包括標簽、空文檔和換行節點）。
-
IE678版本：指前一個元素節點（標簽）。
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一個元素節點（標簽）。
總結：為了獲取前一個元素節點，我們可以這樣做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，綜合這兩個屬性，可以這樣寫：
前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling3、補充：獲得任意一個兄弟節點：
節點自己.parentNode.children[index]; //隨意得到兄弟節點獲取單個的子節點
1、第一個子節點 | 第一個子元素節點：
（1）firstChild：
-
火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標簽、空文檔和換行節點）。
-
IE678版本：指第一個子元素節點（標簽）。
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標簽）。
總結：為了獲取第一個子元素節點，我們可以這樣做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，綜合這兩個屬性，可以這樣寫：
第一個子元素節點 = 節點.firstElementChild || 節點.firstChild2、最后一個子節點 | 最后一個子元素節點：
（1）lastChild：
-
火狐、谷歌、IE9+版本：都指的是最后一個子節點（包括標簽、空文檔和換行節點）。
-
IE678版本：指最后一個子元素節點（標簽）。
（2）lastElementChild：
- 火狐、谷歌、IE9+版本：都指的是最后一個子元素節點（標簽）。
總結：為了獲取最后一個子元素節點，我們可以這樣做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，綜合這兩個屬性，可以這樣寫：
最后一個子元素節點 = 節點.lastElementChild || 節點.lastChild獲取所有的子節點
（1）childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、所有屬性、文本節點）。是W3C的親兒子。
- 火狐 谷歌等高本版會把換行也看做是子節點。（了解）
用法：
子節點數組 = 父節點.childNodes; //獲取所有節點。（2）children：非標準屬性。返回的是指定元素的子元素節點的集合。【重要】
- 它只返回HTML節點，甚至不返回文本節點。
- 在IE6/7/8中包含注釋節點（在IE678中，注釋節點不要寫在里面）。
雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。
用法：（用的最多）
子節點數組 = 父節點.children; //獲取所有節點。用的最多。nodeType
這里講一下nodeType。
-
nodeType == 1 表示的是元素節點（標簽） 。記住：元素就是標簽。
-
nodeType == 2 表示是屬性節點 了解
-
nodeType == 3 是文本節點 了解
?
DOM節點操作（重要）
上一段的內容：節點的訪問關系都是屬性。
節點的操作都是函數（方法）
創建節點
格式如下：
新的標簽(元素節點) = document.createElement("標簽名");比如，如果我們想創建一個li標簽，或者是創建一個不存在的adbc標簽，可以這樣做：
<script type="text/javascript">var a1 = document.createElement("li"); //創建一個li標簽var a2 = document.createElement("adbc"); //創建一個不存在的標簽console.log(a1);console.log(a2);console.log(typeof a1);console.log(typeof a2); </script>結果：
插入節點
插入節點有兩種方式，它們的含義是不同的。
方式1：
父節點.appendChild(新的子節點);解釋：父節點的最后插入一個新的子節點。
方式2：
父節點.insertBefore(新的子節點,作為參考的子節點);解釋：
- 在參考節點前插入一個新的節點。
- 如果參考節點為null，那么他將在父節點最后插入一個子節點。
刪除節點
格式如下：
父節點.removeChild(子節點);解釋：用父節點刪除子節點。必須要指定是刪除哪個子節點。
如果我想刪除自己這個節點，可以這么做：
node1.parentNode.removeChild(node1);復制節點（克隆節點）
格式如下：
要復制的節點.cloneNode(); //括號里不帶參數和帶參數false，效果是一樣的。要復制的節點.cloneNode(true);括號里帶不帶參數，效果是不同的。解釋如下：
-
不帶參數/帶參數false：只復制節點本身，不復制子節點。
-
帶參數true：既復制節點本身，也復制其所有的子節點。
?
設置節點的屬性
我們可以獲取節點的屬性值、設置節點的屬性值、刪除節點的屬性。
我們就統一拿下面這個標簽來舉例：
<img src="images/1.jpg" class="image-box" title="美女圖片" alt="地鐵一瞥" id="a1">下面分別介紹。
1、獲取節點的屬性值
方式1：
元素節點.屬性;元素節點[屬性];舉例：（獲取節點的屬性值）
<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：（推薦）
素節點.getAttribute("屬性名稱");例子：
console.log(myNode.getAttribute("src"));console.log(myNode.getAttribute("class")); //注意是class，不是classNameconsole.log(myNode.getAttribute("title"));方式1和方式2的區別在于：前者是直接操作標簽，后者是把標簽作為DOM節點。推薦方式2。
2、設置節點的屬性值
方式1舉例：（設置節點的屬性值）
myNode.src = "images/2.jpg" //修改src的屬性值myNode.className = "image2-box"; //修改class的name方式2：（推薦）
元素節點.setAttribute(屬性名, 新的屬性值);方式2舉例：（設置節點的屬性值）
? myNode.setAttribute("src","images/3.jpg");myNode.setAttribute("class","image3-box");myNode.setAttribute("id","你好");3、刪除節點的屬性
格式：
元素節點.removeAttribute(屬性名);舉例：（刪除節點的屬性）
myNode.removeAttribute("class");myNode.removeAttribute("id");轉載于:https://www.cnblogs.com/liuafan/p/9523773.html
總結
以上是生活随笔為你收集整理的前端 --- 关于DOM的介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EtherCAT(扒自百度百科)
- 下一篇： 前端、数据库、Django简单的练习