dom有關知識詳細整理

時間 2019-11-08

標籤 dom 有關知識詳細整理欄目 HTML 简体版

原文原文鏈接

節點層次

Node類型

JavaScript 中的全部節點類型都繼承自 Node 類型，所以全部節點類型都共享着相同的基本屬性和方法。每一個節點都有一個nodeType屬性，用以代表節點的類型，一般以數字常量來表示。共有12個數值，javascript

Node.ELEMENT_NODE  1	一個 元素 節點，例如 <p> 和 <div>。

Node.TEXT_NODE     3    文本節點，Element 或者 Attr 中實際的  文字

Node.PROCESSING_INSTRUCTION_NODE	7	一個用於XML文檔的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?>
聲明。

Node.COMMENT_NODE	8	一個 Comment(註釋)節點。

Node.DOCUMENT_NODE	9	一個 Document（文檔） 節點。

Node.DOCUMENT_TYPE_NODE	10	描述文檔類型的 DocumentType 節點。例如 <!DOCTYPE html>  就是用於 HTML5 的。

Node.DOCUMENT_FRAGMENT_NODE	11	一個 DocumentFragment 節點

複製代碼

//其他的已經棄用，請不要使用css

節點關係

父子兄弟關係，和家譜相似看下圖：html

每一個節點都有一個 childNodes 屬性，其中保存着一個 NodeList 對象。 NodeList 是一種類數組對象，有length屬性，但並非數組的實例，java

全部節點都有的最後一個屬性是 ownerDocument，該屬性指向表示整個文檔的文檔節點。這種關系表示的是任何節點都屬於它所在的文檔，任何節點都不能同時存在於兩個或更多個文檔中。經過這個屬性，咱們能夠沒必要在節點層次中經過層層回溯到達頂端，而是能夠直接訪問文檔節點。node

操做節點

1.appendChild()用於向 childNodes列表的末尾添加一個節點。用於向 childNodes 列表的末尾添加一個節點。編程

2.insertBefore() 方法。這個方法接受兩個參數：要插入的節點和做爲參照的節點。插入節點後，被插入的節點會變成參照節點的前一個同胞節點（ previousSibling ）跨域

3.replaceChild() 方法接受的兩個參數是：要插入的節點和要替換的節點。要替換的節點將由這個方法返回並從文檔樹中被移除，同時由要插入的節點佔據其位置。數組

4.removeChild() 方法。移除節點瀏覽器

5.createElement()建立元素節點bash

6.createTextNode()建立文本節點

7.clone(boolean)複製節點

8.normalize(); Node.normalize() 方法將當前節點和它的後代節點」規範化「（normalized）。在一個"規範化"後的DOM樹中，不存在一個空的文本節點，或者兩個相鄰的文本節點。

9.要使用這幾個方法必須先取得父節點（使用 parentNode 屬性）。

Document類型

document 對象是 HTMLDocument （繼承自 Document 類型）的一個實例，表示整個 HTML 頁面。並且， document 對象是 window 對象的一個屬性，所以能夠將其做爲全局對象來訪問。

全部瀏覽器都支持 document.documentElement 和 document.body 屬性。

1.1

做爲 HTMLDocument 的一個實例， document 對象還有一些標準的 Document 對象所沒有的屬性。這些屬性提供了 document 對象所表現的網頁的一些信息。

document.title;

document.URL;

document.domain; 能夠進行跨域通訊，例：

兩個頁面來自不一樣的子域名，須要互相訪問他們的javascript對象，假如頁面A:video.baidu.com,頁面B:image.baidu.com ，能夠將這個兩個頁面的document.domain都設置爲：baidu.com,它們之間就能夠通訊了。
複製代碼

document.referrer;

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

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

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

document.write()

document.writeln()有換行符（\n）

元素的引用

doucument.getElementById() //id應用

document.getElementsByTagName() //標籤引用————同屬於HTMLcollection對象，類數組，和nodelist對象相似，有length，可經過下標和item()訪問

document.getElementsByName()//name引用————同屬於HTMLcollection對象，類數組，和nodelist對象相似，有length，可經過下標和item()訪問

document.getElementByClassName()//同屬於HTMLcollection對象，類數組，和nodelist對象相似，有length，可經過下標和item()訪問

因爲使用上面的方法只能經過運行 JavaScript 代碼來完成查詢操做會帶來性能問題，在以後的DOM擴展中，增長了兩個方法來代替它們，

querySelector() 和 querySelectorAll()這兩個方法是原生API，解析和樹查詢操做能夠在瀏覽器內部經過編譯後的代碼來完成，極大地改善了性能。 querySelector()接受一個css或多個選擇符，返回與該模式匹配的第一個元素，若是沒有找到匹配的元素，返回null。

//取得div元素中的第一個p元素
document.querySelector("div p")
//取得第一個class爲contain的div元素
document.querySelector("div.contain")
//取得第一個div元素中的p元素
document.querySelector("div>p")
//取得第一個name值爲logn的input元素
document.querySelector("input[name='logn']")
複製代碼

querySelectorAll()接受一個或多個css選擇符，返回一個nodeList對象的實例

//取得全部的div中的全部p元素
document.querySelectorAll("div p")
//取得全部的class爲contain的div元素
document.querySelectorAll("div.contain")
//取得全部的div中其子元素爲p的元素
document.querySelectorAll("div>p")
//取得全部的name值爲logn的input元素
document.querySelectorAll("input[name='logn']")
複製代碼

Element類型

除了 Document 類型以外， Element 類型就要算是 Web 編程中最經常使用的類型了。 Element 類型自身經常使用屬性：

id  //惟一標識符
className // 與元素的class相對應，
title  //元素附加信息說明，
lang  //元素內容的語言代碼，不多使用
複製代碼

取得特性

getAttribute()//獲取特性  getAttribute("id")

setAttribute()//設置特性  setAttribute("id")

removeAttribute()//移除特性 removeAttribute("id") 
複製代碼

//建議不要使用自定義特性設置，

Text類型

normalize(),規範化文本節點，因而就催生了一個可以將相鄰文本節點合併的方法。這個方法是由 Node 類型定義的（於是在全部節點類型中都存在），名叫 normalize() ，在文本節點的父元素上使用。

splitText()，分割文本節點

這個方法會將一個文本節點分紅兩個文本節點，即按照指定的位置分割nodeValue值。原來的文本節點將包含從開始到指定位置以前的內容，新文本節點將包含剩下的文本。這個方法會返回一個新文本節點，該節點與原節點的parentNode 相同。

Comment類型

Comment 類型與 Text 類型繼承自相同的基類，所以它擁有除 splitText() 以外的全部字符串操做方法。與 Text 類型類似，也能夠經過 nodeValue 或 data 屬性來取得註釋的內容。

<div id="myDiv"><!--A comment --></div>
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
alert(comment.nodeValue);//'A comment'
複製代碼

HTML5擴展

getElementsByClassName() //getElementsByClassName() 方法接收一個參數，即一個包含一或多個類名的字符串，返回帶有指定類的全部元素的NodeList。傳入多個類名時，類名的前後順序不重要。

classList屬性

在操做類名時，須要經過 className 屬性添加、刪除和替換類名。ClassList屬性使用起來很是的簡便，這個 classList 屬性是新集合類型 DOMTokenList 的實例。與nodeList相似，有length屬性，可使用item()方法，也可使用方括號語法

add(value) ：將給定的字符串值添加到列表中。若是值已經存在，就不添加了。

//添加"current"類
複製代碼

div.classList.add("current");

contains(value) ：表示列表中是否存在給定的值，若是存在則返回 true ，不然返回 false 。
//肯定元素中是否包含既定的類名
複製代碼

if (div.classList.contains("bd") && !div.classList.contains("disabled")){ //執行操做 )

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

//刪除"disabled"類
`div.classList.remove("disabled");`

toggle(value) ：若是列表中已經存在給定的值，刪除它；若是列表中沒有給定的值，添加它。

`div.classList.toggle("user");`
//迭代類名
`for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}`
複製代碼

焦點管理

HTML5 也添加了輔助管理 DOM 焦點的功能。首先就是document.activeElement屬性，這個屬性始終會引用DOM中當前得到了焦點的元素。

document.hasFocus()方法，這個方法用於肯定文檔是否得到了焦點。

自定義數據屬性

HTML5規定能夠爲元素添加非標準的屬性，但要添加前綴data-，目的是爲元素提供與渲染無關的信息，或者提供語義信息。這些屬性能夠任意添加、隨便命名，只要以 data- 開頭便可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

//本例中使用的方法僅用於演示
var div = document.getElementById("myDiv");
//取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//設置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有沒有"myname"值呢？
if (div.dataset.myname){alert("Hello, " + div.dataset.myname);}
複製代碼

若是須要給元素添加一些不可見的數據以便進行其餘處理，那就要用到自定義數據屬性。在跟蹤連接或混搭應用中，經過自定義數據屬性能方便地知道點擊來自頁面中的哪一個部分。

scrollIntoView() 方法

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。具體用法能夠查看MDN

children屬性

children用來處理ie瀏覽器和其它瀏覽器在處理文本節點空白符存在差別化的問題。除此以外和childNode沒有什麼區別。

Node.contains()返回的是一個布爾值，來表示傳入的節點是否爲該節點的後代節點。

下面的函數用來檢查一個元素是不是body元素的後代元素且非body元素自己.

return (node === document.body) ? false : document.body.contains(node);
}
複製代碼

相關標籤/搜索

每日一句

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