DOM 知識點梳理（筆記）

時間  2019-11-12
標籤 dom 知識 梳理 筆記 欄目 HTML 简体版
原文   原文鏈接

　　1998年10月DOM1級規範成爲了W3C的推薦標準，爲基本的文檔結構及查詢提供了接口。css

1、Node類型

　　每一個節點都有個nodeType屬性，代表了節點的類型。共有12種類型：html

     元素節點            　　     Node.ELEMENT_NODE(1)java

     屬性節點            　　     Node.ATTRIBUTE_NODE(2)node

     文本節點            　　     Node.TEXT_NODE(3)編程

    CDATA節點                    Node.CDATA_SECTION_NODE(4)瀏覽器

    實體引用名稱節點    　   Node.ENTRY_REFERENCE_NODE(5)app

    實體名稱節點        　　   Node.ENTITY_NODE(6)dom

    處理指令節點        　　   Node.PROCESSING_INSTRUCTION_NODE(7)函數

    註釋節點            　         Node.COMMENT_NODE(8)spa

    文檔節點            　         Node.DOCUMENT_NODE(9)

    文檔類型節點        　　  Node.DOCUMENT_TYPE_NODE(10)

    文檔片斷節點        　　  Node.DOCUMENT_FRAGMENT_NODE(11)

    DTD聲明節點                 Node.NOTATION_NODE(12)

 

　　這12個類型並不徹底受到瀏覽器的支持；而開發人員經常使用的就是前三個（元素節點，屬性節點，文本節點）

 if(someNode.nodeType==3){
//爲了兼容ie，一般將noteType的屬性值與數值進行比較
}

　　此外節點還有nodeNames和nodeValue這兩個屬性。而這二個屬性的值徹底取決於節點的類型。

 

1）對於nodeName來講  

　　元素節點的 nodeName 是標籤名稱。
　　屬性節點的 nodeName 是屬性名稱。
　　文本節點的 nodeName 是 #text。
　　文檔節點的 nodeName 是 #document。

 

2）對於nodeValue來講

　　文本節點的nodeValue 屬性包含文本。
　　對於屬性節點的nodeValue 屬性包含屬性值。
　　文檔節點的nodeVlaue爲null。
　　元素節點是nodeVlaue爲null。

 

1.1節點關係：

　　每一個節點都有一個childNodes屬性，其中保存着一個NodeList對象,它是基於DOM結構動態執行查詢的結果而不是一張初次訪問時的快照。

　　每一個節點也都有個parentNode節點，該屬性指向文檔節點的父節點。childNodes列表中全部的節點都具備相同的父節點。並且它們之間都是同胞節點，能夠經過previousSibling和nextSibling互相之間訪問，父節點的firstChild和lastChild分別指向childcNodes列表的第一個和最後一個j節點。

 

1.2操做節點

appendChild()方法：

　　用於向父節點的chidNodes末尾添加一個節點。若是傳入到appendChild()的節點已是文檔中的一部分了，那麼該節點會從原來的位置轉移到新的位置上。

例如：

<div id="ss">hi 
<p>1</p>
<p>2</p>
<p>3</p>
</div>

<script>
var ss=document.getElementById("ss");
ss.appendChild(ss.firstChild);
alert(ss.lastChild.nodeValue);//hi 第一個文本節點 變成了最後一個節點
</script>

 insetBefore()方法：

　　這個方法接受二個參數：要插入的節點和做爲參照的節點。插入後被插入的節點會變成參照節點的前一個同胞節點。

　　若是參照節點是null那麼執行和appendChild相同的操做。

 replaceChild()方法：

　　這個方法接受二個參數：要插入的節點和要替換的節點。返回替換的節點。

 removeChild()方法：

　　這個方法接受一個參數，即要移除的節點。返回被移除的節點。

上面的四個方法在調用時，都是在某個節點的子節點上操做，因此都必須先取得它們的父節點！

 cloneNode()方法：

該方法接受一個布爾型參數表示是否進行深淺負責，爲true時執行深複製（複製節點及其整個子節點樹），爲false時執行淺複製（只複製節點自己）。

var ss=document.getElementById("ss");var tt=ss.cloneNode(true);
　　ss.appendChild(tt);//複製完後，爲他指定父節點，將它添加到文檔中

 

2、Document類型

　　document對象是HTMLDocument的一個實例，表示整個HTMl頁面。

　　能夠經過document.documentElement和document.body來取得對<html>和<body>的引用

文檔信息：

document.title包含着<title>元素中文本的引用。

document.URl包含着頁面完整的URl。

document.domain包含着頁面的域名。它是可讀取也可設置的，進而能夠對二個頁面進行通訊設置。

document.referrer保存着連接到當前頁面的那個頁面的URl。

 查找元素：

document.getElementById();

document.getElementsByTagName();

 

特殊集合：

document.anchors　　包含文檔中全部帶name特性的<a>標籤　

document.forms　　　包含文檔中全部的<form>元素

document.images　 　包含文檔中全部的<img>元素

document.links　　　　包含文檔中全部帶href特性<a>元素

 文檔寫入：

document.write()或writeln()

　　能夠在頁面加載過程當中動態的向頁面加入內容。

3、Element類型

　　Element類型用來表現XML或HTML元素，提供了對元素標籤名，子節點及特性的訪問。

 取得元素的標籤名可使用nodeName或者tagName。

 

取得特性：

　　每一個元素都有特性，而操做特性的DOM主要有三個方法：

getAttribute()     通常用它來取得自定義的特性

setAttribute() 　　若是設置的特性已經存在則以指定的值替換它，若是沒有則建立它。

removeAttribute()

 

建立元素：

document.createElement();

 

3、Text類型

建立文本節點：

document.createTextNode()

分割文本節點：

splitText()

 

　　小結：DOM將文檔形象地看做一個層次化的節點樹，能夠用js來操做這個節點樹，進而改變底層文檔的外觀和結構。DOM操做每每是js中開銷最大的部分，儘可能減小DOM操做。

 

 

 

DOM擴展

選擇符API

querySelector()　　接受一個css選擇符，返回與該模式匹配到的第一個元素。

querySelectorAll()　　返回的是全部匹配的元素。

 

與類相關的擴展：

getElementsByClassName()

 

classList屬性

它有以下的方法：

add()　　　　將給定的字符串值添加到列表中，有就不添加。

contains()　   表示列表中是否有給定的值，返回布爾值

remove()　　從列表中刪除給定的字符串。

toggle()　　若是列表中存在給定的值則刪除它，沒有的話則添加它。

 

焦點管理

document.activeElement屬性  這個屬性始終會引用DOM中當前得到焦點的元素。

document.hasFocus()方法

 

自定義數據屬性

　　h5規定能夠爲元素添加非標準的屬性，只需添加前綴data-。而後能夠經過元素的dataset屬性來訪問自定義屬性的值。

 

innerHTML屬性

　　讀模式下會返回調用元素的全部子節點。寫模式下，替換調用元素原來的全部子節點。

 

contains方法

　　該方法用來檢測某個節點是否是另一個節點的子節點。返回布爾值。

 

插入文本

innerText、outerText屬性  

　　它們都沒有被歸入h5的規範。

 

 

 

DOM2和DOM3

 　　前面講的DOM1主要定了HTML和XML的文檔底層結構而DOM2和DOM3級則在這個結構的基礎上引入了更多的交互能力。
 
DOM2級分爲以下模塊：
 
　　DOM Level 2 Core:在1級核心的基礎上，爲節點添加了更多的方法和屬性。
　　DOM Level 2 Views:爲文檔定義了基於樣式信息的不一樣視圖。
　　DOM Level 2 Events:說明了如何使用事件與DOM進行交互。
　　DOM Level 2 Style:定義瞭如何以編程的方式來訪問和改變CSS樣式的信息。
　　DOM Level 2 Traversal and Range:引入了遍歷DOM和選擇其特定部分的新接口。
　　DOM Level 2 HTML:在一級的HTML上構建添加了更多的屬性、方法和新接口。
 

DOM2級樣式模塊

 
一、訪問元素的樣式
　　任何支持style屬性的html元素在javascipt中都有一個對應的style屬性，對於使用短劃線的css屬性名，必須將其轉換爲駝峯大小的形式：font-size---->fontSzie這樣的形式。其中有一個float屬性不能直接轉換，IE下支持轉換爲styleFLoat，其餘瀏覽器轉換爲cssFloat。
 
DOM2級樣式模塊爲style對象定義了一些屬性和方法：
 
　　cssText：訪問style特性中的css代碼。
　　length：應用給css屬性的數量。
　　getPropertyValue()：返回給定屬性的字符串值。
　　removeProperty()：從樣式中刪除給定屬性。
 
　　經過cssText屬性，在寫模式下會重寫整個style屬性 
 <div id="demo" style="width:200px;height:200px;border:1px solid #599;"></div>
  
  <script>
  var  aa=document.getElementById("demo");
  document.write(aa.style.cssText);//width: 200px; height: 200px; border: 1px solid rgb(85, 153, 153);
  </script>

　　設計length的目的就是將其與item()方法配套使用。用for循環得到屬性名後就能夠進一步用getPropertyValue()來得到屬性名的值：

  <div id="demo" style="width:200px;height:200px;border:1px solid #599;"></div>
  
  <script>
  
   var  aa=document.getElementById("demo");
   var len=aa.style.length,i,prop,value;
　 for(i=0;i<len;i++){
    prop=aa.style[i];//或者aa.style.item(i);
    value=aa.style.getPropertyValue(prop);
    document.write(prop+":"+value+"</br>");//居然有19種屬性名，名稱是以短劃線形式出現，不是駝峯形式。

//width:200px
//height:200px
//border-top-width:1px
//border-right-width:1px
//border-bottom-width:1px
//border-left-width:1px
//border-top-style:solid
//border-right-style:solid
//border-bottom-style:solid
//border-left-style:solid
//border-top-color:rgb(85, 153, 153)
//border-right-color:rgb(85, 153, 153)
//border-bottom-color:rgb(85, 153, 153)
//border-left-color:rgb(85, 153, 153)
//border-image-source:initial
//border-image-slice:initial
//border-image-width:initial
//border-image-outset:initial
//border-image-repeat:initial
  }
  </script>

　　要想刪除某個css屬性，調用removeProperty()便可：

aa.style.removeProperty("width");//刪除後，將應用默認的值

 

二、計算的樣式：

　　經過style對象能夠訪問任何支持style特性的元素的樣式信息，但不包括從其餘樣式表層疊而來而影響到當前元素的樣式信息。

　　so,DOM2級樣式模塊加強了document.defaultView，提供了getComputedStyle()方法。這個方法接受二個參數；要取得計算樣式的 元素和一個僞元素字符串，若是不須要僞元素則將它設置爲null。

看個例子：

  
  <div id="demo" style="width:200px;height:200px;"></div>
  <style>#demo{border:1px solid  #789;background:#ccc}</style>

<script>
   var  aa=document.getElementById("demo");
   var computedStyle=document.defaultView.getComputedStyle(aa,null);
   alert(computedStyle.width);//"200px"
   alert(computedStyle.border);//"1px solid  #789"
 
   //IE不支持getComputedSytle()方法，可是是在IE中支持style屬性的元素還有個currentStyle屬性
   //這個屬性包含當前元素計算後的樣式
   //var computedStyle=aa.currentSytle;
   //alert(computedStyle.border);
  </script>

 

元素大小

　　偏移量包括元素在屏幕上佔用的全部可見空間。元素的可見大小由寬高度來決定，包括內邊距，滾動條和邊框大小。經過下列四個屬性能夠得到元素的偏移量。

　　offsetHeight：元素在垂直方向上佔用的空間大小，包括元素的高度，水平滾動條的高度，上下邊框的高度。

　　offsetWidth：元素在水平方向上佔用的空間的大小，包括元素的寬度，垂直滾動條的寬度，左右邊框的寬度。

　　offsetLeft：元素的左外邊框至包含元素的左內邊框之間的像素距離。

　　offsetTop：元素的上外邊框至包含元素的上內邊框之間的像素距離。

 

 

 客戶區大小

　　元素的客戶區表示的是元素內容及其內邊距所佔據的空間的大小。

 clientWidth和clientHeight分別表示元素內容區寬度加上左右內邊距寬度和元素內容區加高度加上上下內邊距高度。
 
　　它和偏移量類似，客戶區大小也是隻讀的，每次訪問都有從新的計算。
 
 
 
滾動大小
　　滾動大小指的是包含滾動內容的元素的大小。
scrollHight：在沒有滾動條的狀況下，元素內容的總高度。
scrollwidth：在沒有滾動的狀況下，元素內容的總寬度。
scrollLef：被隱藏在內容區域左側的像素數。
scrollTop：被隱藏在內容區域上方的像素數。
 
 
 
 

 DOM2級遍歷和範圍模塊　　

　　「DOM2級遍歷和範圍」模塊定義了兩個用於輔助完成順序遍歷DOM結構的類型：NodeIterator和treeWalker。這兩個類型可以基於給定的起點對DOM進行深度優先的遍歷操做。

nodeIterator類型

　　可使用document.createNodeIterator()方法建立它的一個實例。這個方法接受四個參數：

root：表示想要做爲搜索起點的樹中的節點。

whatToShwo:表示要訪問哪些節點的數字代碼。

filter：是一個NodeFilter對象，或是一個表示應該接受仍是拒絕某種特性的函數。

entiyReferenceExpansion：布爾值，表示是否要擴展實體引用。

 

　　whatToShwo參數是一個位掩碼，經過應用一個或多個過熱器來肯定要訪問那些節點。這個參數以常量形式在NodeIterator類型中定義。列表以下：

一、NodeFilter.SHOW_ALL：搜索全部節點；
二、NodeFilter.SHOW_ELEMENT：搜索元素節點；
三、NodeFilter.SHOW_ATRRIBUTE：搜索特性節點；
四、NodeFilter.SHOW_TEXT：搜索文本節點；
五、NodeFilter.SHOW_ENTITY_REFERENCE：搜索實體引用節點；
六、NodeFilter.SHOW_ENTITY：搜索實體節點；
七、NodeFilter.SHOW_PROCESSING_INSTRUCTION：搜索PI節；
八、NodeFilter.SHOW_COMMENT：搜索註釋節點；
九、NodeFilter.SHOW_DOCUMENT：搜索文檔節點；
十、NodeFilter.SHOW_DOCUMENT_TYPE：搜索文檔類型節點；
十一、NodeFilter.SHOW_DOCUMENT_FRAGMENT：搜索文檔碎片節節；
十二、NodeFilter.SHOW_NOTATION：搜索記號節點；

 

　　nodeIterator類型的兩個主要的方法是nextNode()和previousNode()。前者方法用於向前進一步，然後者方法用於向後後退一步。

下面的代碼將遍歷div元素的全部元素：

<div id="demo">
<p>hello</p>
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>

<script>
var div=document.getElementById("demo");
var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node=iterator.nextNode();
while(node!==null){
document.write(node.tagName);// 輸出標籤名：DIV P UL LI LI LI
var node=iterator.nextNode();
}
</script>

 

若是不指定過濾器，則第三個參數應該指定爲null，若是指定的話咱們能夠自定義一個過濾器，輸出想要的結果：

<script> 
var div=document.getElementById("demo");

var filter=function(node){
return node.nodeName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:
　　　　　　　　　　　　　　　　　　　　　　NodeFilter.FILLTER_SKIP; }; var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false);
 var node=iterator.nextNode();
while(node!==null){
document.write(node.tagName);// 輸出標籤名：LI LI LI
var node=iterator.nextNode();
}

 

TreeWalker類型

它除了有nextNode()和previousNode()還有下面的這些方法：

parentNode():遍歷當前節點的父節點；
firstChild():遍歷到當前節點的第一子節點；
lastChild():遍歷到當前節點的最後一個子節點；
nextSibling():遍歷到當前節點的下一個同輩節點；
previousSibling():遍歷到當前節點的前一個兄弟節點。

 

　　建立TreeWalker對象要使用document.createTreeWalker()方法，這個方法也接受一樣的四個參數：做爲搜索起點的根節點，要顯示的節點類型，過濾器和表示是否可擴展實體引用的布爾值。

TreeWalker即便不使用過濾器也可以取得遍歷到想要的元素。

var div=document.getElementById("demo");
var walker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);
　　walker.firstChild();//轉到p元素
　　walker.nextSibling();//轉到ul元素

var node=walker.firstChild();
while(node!==null){
　　document.write(node.tagName);// 輸出標籤名：LI LI LI
　　node=walker.nextSibling();
}

 

 

DOM2級事件模塊

詳細見另外一篇筆記。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程