我與DOM的第一次邂逅

RoOK1E發表於2018-08-27

DOM

DOM 是 JavaScript 操作網頁的介面，全稱為“文件物件模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 物件，從而可以用指令碼進行各種操作

節點

DOM 的最小組成單位叫做節點（node）。文件的樹形結構（DOM 樹），就是由各種不同型別的節點組成

節點樹

一個文件的所有節點，按照所在的層級，類似樹狀結構 它有一個頂層節點，下一層都是頂層節點的子節點，然後子節點又有自己的子節點

除了根節點，其他節點都有三種層級關係:

  • 父節點關係（parentNode）：直接的那個上級節點
  • 子節點關係（childNodes）：直接的下級節點
  • 同級節點關係（sibling）：擁有同一個父節點的節點

Domcument物件

Document物件提供了訪問和更新HTML頁面內容的屬性和方法
Document物件作為DOM訪問和更新HTML頁面內容的入口 可以定位HTML頁面中的元素 或者建立新的元素

測試Document物件

console.log(document)    //#document   頁面上的內容

Document物件的屬性和方法

Document物件的屬性和方法被定義在prototype原型中

console.log(Document.prototype)   //一個包含很多屬性和方法的物件

繼承關係

Document物件繼承於Node物件 Node物件繼承於EventTarget物件

console.log(Document.prototype instanceof Node)  //true
console.log(Node.prototype instanceof EventTarget) //true
console.log(Document.prototype instanceof EventTarget) //true

定位頁面元素的方法

DOM無論是使用的還是得到的都應該是物件

  • getElementById()方法
    var buttonElement =document.getElementById('btn');
    console.log(buttonElement instanceof Object)  //true
  • getElementsByName()方法
    通過name屬性獲取
    由於name屬性不唯一 得到的結果可能是多個 所以為Elements
    因為得到的是一個集合 如果想取到對應的值 需要新增索引值
 <button name='btn'></button>
 var btn=document.getElementsByName('btn')[0]
  • getElementsByTagName
    通過TagName屬性獲取 與name屬性相同
 <button ></button>
 var btn=document.getElementsByTagName('button')[0]
  • getElementsByClassName
    通過ClassName屬性獲取 與name屬性相同 存在相容問題
 <button class='btn'></button>
 var btn=document.getElementsByClassName('btn')[0]
  • querySelector()方法
    通過CSS選擇器定位第一個匹配的元素
    接收引數 表示選擇器 可以包含一個或多個CSS選擇器 多個用逗號分隔
  <button id='btn'></button<
  var btn=document.querySelector("btn")
  • querySelectorAll()方法
    通過CSS選擇器定位所有匹配的元素
    返回一個NodeList集合
var liList=document.querySelectorAll('li);

建立節點

建立元素節點
Document物件提供了createElement()方法建立元素節點

var buttonElement=document.crateElement('button');

建立文字節點
Document物件提供了createTextNode()方法建立元素節點
接收一個引數 是文字節點中的內容 是一個字串

var text=document.createTextNode('我是文字內容')

建立屬性節點
Document物件提供了createAttribute()方法建立元素節點
接受一個引數 為節點的屬性名稱
建立屬性節點方法只具有屬性名稱 沒有屬性值

var attributeNode=document.createAttributeNode('id')   //為元素新增一個id屬性

Node物件

Node物件主要提供了用於解析DOM節點樹結構的屬性和方法
Node物件是解析DOM節點結構的主要入口

繼承關係

Node物件繼承於EventTarget物件 EventTarget是一個用於接收事件的物件

console.log(Node.prototype instanceof EventTarget)   //true

Document物件和Element物件都繼承於Node物件

console.log(Document.prototype instanceof Node)  //true
console.log(Element.prototype instanceof Node)   //true

測試Node物件
Node物件是DOM底層封裝的物件 所以並不能通過直接列印Node物件來檢視它的屬性或者方法圖片描述

判斷節點型別

Node物件中提供了nodeName nodeType nodeValue 分別用於獲取指定節點的節點名稱 節點型別 節點值

nodeName 用於獲取指定節點的節點名稱

<button id='btn'></button>
var btn =document.getElementById('btn');
console.log(btn.nodeName)   //BUTTON

不同的節點型別 nodeName返回的節點名稱不同 :

  • 元素節點(Element) ---> 元素節點的節點名
  • 屬性節點(Attribute) ---> 屬性節點的屬性名
  • 文字節點(Text) ---> #text
  • 文件節點(Document) ---> #document

nodeType 用於獲取指定節點的節點型別

<button id='btn'></button>
var btn =document.getElementById('btn');
console.log(btn.nodeType)  //1

不同的節點型別 nodeType返回的節點名稱也不同:

  • 元素節點(Element) ---> 1
  • 屬性節點(Attribute) ---> 2
  • 文字節點(Text) ---> 3
  • 文件節點(Document) ---> 9

nodeValue用於獲取指定節點的值

<button id='btn'>按鈕</button>
var btn =document.getElementById('btn');
console.log(btn.nodeValue);   // null

不同的節點型別 nodeValue返回的節點型別也不同:

  • 元素節點(Element) ---> null
  • 屬性節點(Attribute) ---> 屬性節點的屬性值
  • 文字節點(Text) ---> 文字節點的內容
  • 文件節點(Document) ---> null

獲取節點

獲取父節點

通過指定元素查詢它的父節點 可以用Node物件的parentNode屬性實現

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>

 var abm =document.getElementById('abm');
 var parent =abm.parentNode;
 console.log(parent); //  <ul id='parent'>...</ul>

通過parentElement屬性 獲取其父元素節點

console.log(abm.parentElement)  //<ul id='parent'>...</ul>

區別:

  • 父節點(parentNode) 並沒有指定節點的父節點是哪一個型別的節點
  • 父元素節點(parentElement) 指定了節點的父節點一定是元素節點

獲取html的父節點 為document文件節點
但document文件節點並不是元素節點

var html=document.documentElement;
console.log(html.parentNode)    //文件節點
console.log(html.parentElement)  //null

獲取子節點

可以通過Node物件的childNodes firstChild lastChild 屬性實現

  • 獲取所有子節點
    childNodes用於獲取指定節點的所有子節點
    返回一個只讀的NodeList物件 並且是一個動態的NodeList物件
<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


var parent =document.getElementById('parent');
var children=parent.childNodes;
console.log(children)  //NodeList(7) [text, li, text, li#abm, text, li, text]
  • 獲取第一個子節點
    Node物件提供的firstChild屬性用於獲取指定節點的第一個子節點
    如果當前節點無子節點 則返回null
<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


var parent =document.getElementById('parent');
console.log(parent.firstChild) //#text   第一個li前的換行
  • 獲取最後一個子節點
    Node物件提供的lastChild屬性用於獲取指定節點的最後一個子節點
<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>


var parent =document.getElementById('parent');
console.log(parent.lastChild)   //#text 最後一個li後的換行

獲取相鄰兄弟節點

previousSibling 獲取指定節點的上一個兄弟節點

<ul id="parent">
    <li>Xayah</li><li id="abm">Lucian</li>
    <li>Vayne</li>
</ul>

var abm=document.getElementById('abm');
console.log(abm.previousSibling)  //<li>Xayah</li>

nextSibling 獲取指定節點的下一個兄弟節點

<ul id="parent">
    <li>Xayah</li>
    <li id="abm">Lucian</li><li>Vayne</li>
</ul>

var abm=document.getElementById('abm');
console.log(abm.nextSibling)  //<li>Vayne</li>

相關文章