JS中DOM元素的操作等基礎知識筆記

1. DOM的概念和作用

       DOM 是 JavaScript操作網頁的api接口，全稱爲“文檔對象模型”（Document Object Model）。它的作用是將網頁轉爲一個 JavaScript對象，從而可以用腳本進行各種操作（比如增刪內容）。
       瀏覽器會根據 DOM 模型，將結構化文檔（比如 HTML和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。所有的節點和最終的樹狀結構，都有規範的對外接口。
       DOM只是一個接口規範，可以用各種語言實現。所以嚴格地說，DOM 不是 JavaScript 語法的一部分，但是 DOM 操作是JavaScript 最常見的任務，離開了 DOM，JavaScript 就無法控制網頁。另一方面，JavaScript 也是最常用於DOM 操作的語言。

2.節點樹

       一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是DOM 樹。它有一個頂層節點，下一層都是頂層節點的子節點，然後子節點又有自己的子節點，就這樣層層衍生出一個金字塔結構，倒過來就像一棵樹。
       瀏覽器原生提供document節點，代表的是整個文檔。

3.DOM選擇器：（查詢、創建、添加，修改，刪除)

        ①返回匹配指定id屬性的元素節點。如果沒有發現匹配的節點，則返回null：

document.getElementById：

         ②返回一個類似數組的對象（HTMLCollection實例），包括了所有class名字符合指定條件的元素（兼容問題，低版本ie）,如果沒有發現匹配的節點，則返回空數組[ ]：

document.getElementsByClassName：

         ③搜索 HTML 標籤名，返回符合條件的元素。它的返回值是一個類似數組的對象（HTMLCollection實例）：

document.getElementsByTagName：

        ④接受一個 CSS 選擇器作爲參數，返回匹配該選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null;
         例：var el1 = document.querySelector(’.myclass’)：

document.querySelector：（ES5新增選擇器）

        ⑤與querySelector用法類似，區別是返回一個NodeList對象，包含所有匹配給定選擇器的節點;
         例：elementList = document.querySelectorAll(’.myclass’)：

document.querySelectorAll:（ES5新增選擇器）

4.DOM的基本操作

①.添加

document.createElement：

• 用來生成元素節點，並返回該節點;
• createElement方法的參數爲元素的標籤名，即元素節點的tagName屬性，對於 HTML 網頁大小寫不敏感，即參數爲div或DIV返回的是同一種節點;

var newDiv = document.createElement('div');

②.插入

把newDiv添加到oDiv內部的最後面

oDiv.appendChild(newDiv);

例：

// 創建
var span = document.createElement("span");
console.log(span);
// 插入到將來的父元素
var oBox = document.getElementById("box");
oBox.appendChild(span);
sapn.innerHTML = "這是一個span";

• Element.innerHTML屬性返回一個字符串，等同於該元素包含的所有 HTML 代碼。該屬性可讀寫，常用來設置某個節點的內容。它能改寫所有元素節點的內容，包括和元素。
• 如果將innerHTML屬性設爲空，等於刪除所有它包含的所有節點。

③.替換

box.replaceChild(newNode,oldNode);

④.刪除

var el = document.getElementById('mydiv');
el.remove();
box.removeChild(oldNode);

5.DOM節點類型(元素和文本)

①所有節點的數據類型，必然是對象；

②DOM 的最小組成單位叫做節點（node）；

③文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成。每個節點可以看作是文檔樹的一片葉子：

• Element：網頁的各種HTML標籤（比如< body >、< a >等）；
• Text：標籤之間或標籤包含的文本 （創建Text）；
• 註釋也是節點；
• 通過 nodeType屬性可以查看類型：
           如果節點是一個元素節點，nodeType 屬性返回 1。
           如果節點是屬性節點, nodeType 屬性返回 2。
           如果節點是一個文本節點，nodeType 屬性返回 3。
           如果節點是一個註釋節點，nodeType 屬性返回 8
           文檔碎片 document.createDocumentFragment() 作爲容器使用，可以避免頻繁操作dom。

6.DOM屬性節點

① Element.className：

• className屬性用來讀寫當前元素節點的class屬性。它的值是一個字符串，每個class之間用空格分割。

// HTML 代碼 < div class ="one two three" id = "myDiv" >< /div>
var div = document.getElementById('myDiv');
div.className
// "one two three"

② Element.style：

• 每個元素節點都有style用來讀寫該元素的行內樣式信息，不過，連詞號需要變成駱駝拼寫法。
• Element.style返回的只是行內樣式，並不是該元素的全部樣式。通過樣式表設置的樣式，或者從父元素繼承的樣式，無法通過這個屬性得到。
• 元素的全部樣式要通過window.getComputedStyle()得到。

var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';
divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

③ 獲取屬性和設置屬性（自定義屬性）

• Element.getAttribute方法接受一個字符串作爲參數，返回同名屬性的值。如果沒有該屬性，則返回null。

var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');

• Element.setAttribute方法用於爲當前節點設置屬性。
• 如果屬性已經存在，將更新屬性值，否則將添加該屬性。該方法沒有返回值。

// HTML代碼爲
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);
// Element.removeAttribute方法移除指定屬性。該方法沒有返回值。
document.getElementById('div1').removeAttribute('id')

④
outerHTML：

• outerHTML包括整個標籤，而不僅限於標籤內部的內容；

innerText：

• innerText只獲取元素內的文本內容，html標籤將被忽略。

⑤ 獲取孩子節點childNodes和children：

• Element.children屬性返回一個類似數組的對象（HTMLCollection實例），包括當前元素節點的所有子元素。如果當前元素沒有子元素，則返回的對象包含零個成員；
• Node.childNodes屬性與Element.children屬性的區別是，Element.children只包括元素類型的子節點，不包括其他類型的子節點。而childNodes屬性包含空白節點。

7.DOM高級操作

①
Element.firstElementChild：

• 返回當前元素的第一個元素子節點；

Element.lastElementChild：

• 返回最後一個元素子節點。
• 如果沒有元素子節點，這兩個屬性返回null。

② 兄弟節點：
nextElementSibling：

• 下一個節點；

previousElementSibling：

• 上一個節點 。

Element.nextElementSibling：

• 返回當前元素節點的後一個同級元素節點，如果沒有則返回null。

Element.previousElementSibling：

• 返回當前元素節點的前一個同級元素節點，如果沒有則返回null。
• （分別對應的還有 firstChild，lastChild，nextSibling ，previousSibling方法 不過這些個方法都能獲取到文本節點）

③ 元素的全部樣式要通過window.getComputedStyle()得到。

• 行內樣式（inline style）具有最高的優先級，改變行內樣式，通常會立即反映出來。但是，網頁元素最終的樣式是綜合各種規則計算出來的。因此，如果想得到元素實際的樣式，只讀取行內樣式是不夠的，需要得到瀏覽器最終計算出來的樣式規則。
• window.getComputedStyle方法，就用來返回瀏覽器計算後得到的最終規則。它接受一個節點對象作爲參數，返回一個 CSSStyle 實例，包含了指定節點的最終樣式信息。所謂“最終樣式信息”，指的是各種 CSS 規則疊加後的結果。

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);// 只能獲取樣式，不能設置
styleObj.backgroundColor
// 上面代碼中，得到的背景色就是div元素真正的背景色

• 兼容性問題：
  低版本ie 使用box.currentStyle 獲取全部樣式。

④insertBefore:

box.insertBefore(newNode, existNode)    // 插入節點
// 在box的子節點existNode前面插入一個新節點
document.createTextNode()               // 創建文本節點
var t = document.createTextNode('你好');
box.appendChild(t) ;
// 在box尾部添加一個文本節點

⑤ offsetWidth 和 offsetHeight：

• Element.offsetHeight屬性返回一個整數，表示元素的 CSS 垂直高度（單位像素），包括元素本身的高度、padding 和 border；
• Element.offsetWidth屬性表示元素的 CSS 水平寬度（單位像素），其他都與Element.offsetHeight一致。
• 這兩個屬性都是隻讀屬性，如果元素的 CSS 設爲不可見（比如display: none;），則返回0。

⑥Element.offsetParent:

• 該屬性返回最靠近當前元素的、並且 CSS 的position屬性不等於static的上層元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>
// 上面代碼中，span元素的offsetParent屬性就是div元素。

• 該屬性主要用於確定子元素位置偏移的計算基準，Element.offsetTop和Element.offsetLeft就是offsetParent元素計算的。

⑦ offsetLeft 和 offsetTop：

• Element.offsetLeft返回當前元素左上角相對於Element.offsetParent節點的水平位移； Element.offsetTop返回垂直位移，單位爲像素；
• 通常，這兩個值是指相對於父節點的位移。