11-DOM介紹

時間 2019-11-13

標籤 dom 介紹欄目 HTML 简体版

原文原文鏈接

什麼是DOM

DOM：文檔對象模型。DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。javascript

DOM就是由節點組成的。html

解析過程

HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性。java

DOM樹（一切都是節點）

DOM的數據結構以下：node

上圖可知，在HTML當中，一切都是節點：（很是重要）數組

元素節點：HMTL標籤。瀏覽器
文本節點：標籤中的文字（好比標籤之間的空格、換行）數據結構
屬性節點：：標籤的屬性。app

整個html文檔就是一個文檔節點。全部的節點都是Object。dom

DOM能夠作什麼

找對象（元素節點）函數
設置元素的屬性值
設置元素的樣式
動態建立和刪除元素
事件的觸發響應：事件源、事件、事件的驅動程序

DOM節點的獲取

DOM節點的獲取方式其實就是獲取事件源的方式

操做元素節點，必須首先找到該節點。有三種方式能夠獲取DOM節點：

    var div1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

    var arr1 = document.getElementsByTagName("div1");     //方式二：經過 標籤名 得到 標籤數組，因此有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：經過 類名 得到 標籤數組，因此有s

既然方式2、方式三獲取的是標籤數組，那麼習慣性是先遍歷以後再使用。

特殊狀況：數組中的值只有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 || 節點.nextSibling

previous的中文是: 前一個

（1）previousSibling：

火狐、谷歌、IE9+版本：都指的是前一個節點（包括標籤、空文檔和換行節點）。
IE678版本：指前一個元素節點（標籤）。

（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一個元素節點（標籤）。

總結：爲了獲取前一個元素節點，咱們能夠這樣作：在IE678中用previousSibling，在火狐谷歌IE9+之後用previousElementSibling，因而，綜合這兩個屬性，能夠這樣寫：

 前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling

三、補充：得到任意一個兄弟節點：

節點本身.parentNode.children[index];  //隨意獲得兄弟節點

獲取單個的子節點

一、第一個子節點 | 第一個子元素節點：

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標籤、空文檔和換行節點）。
IE678版本：指第一個子元素節點（標籤）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標籤）。

總結：爲了獲取第一個子元素節點，咱們能夠這樣作：在IE678中用firstChild，在火狐谷歌IE9+之後用firstElementChild，因而，綜合這兩個屬性，能夠這樣寫：

 第一個子元素節點 = 節點.firstElementChild || 節點.firstChild

二、最後一個子節點 | 最後一個子元素節點：

（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：

    元素節點.屬性;
    元素節點[屬性];

舉例：（獲取節點的屬性值）

<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，不是class
    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>

方式2：（推薦）

素節點.getAttribute("屬性名稱");

例子：

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

方式1和方式2的區別在於：前者是直接操做標籤，後者是把標籤做爲DOM節點。推薦方式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","你好");

三、刪除節點的屬性

格式：

    元素節點.removeAttribute(屬性名);

舉例：（刪除節點的屬性）

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

補充：

innerHTML、innerText 、value

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。