DOM內容梳理2

這兩天新的知識有點多有點雜一時半會沒有整理過來，以後不出意外會一直更行。檢視節點型別 nodetype屬性，返回的結果會根據物件節點的不同返回不同的值。

node.element_node

node.attribute_node

node.document_fragment_node

node.document_type_node

dom裡存在著許多選區或者查詢乙個或多個元素的方法

之前我們用的document.getelementbyid（）這個方法，可以可以準確的通過id找到元素，但實際上來說它其實是屬於dom。

demo：

var btn = document.getelementbyid("btn");

當然也可以通過id選擇一組元素。

/函式裡面的是正則/
function getelements(/*ids*/) ;
for(var i=0;igetelementsbytagname()方法可以用來選取指定型別的(標籤名)所有的html元素或者xml元素。
//此時之所以要加是應為標籤選擇器選擇的不是乙個可以直接使用的量
var test = document.getelementsbytagname(『p』)[0];

tip:html標籤不區分大小寫，在html文件中使用getelementsbytagname()時，將進行不區分大小寫的標籤名比較。

tip：給getelementsbytagname()傳遞萬用字元*,將獲得頁面中的所有的元素。

如果要獲取乙個元素內的子元素可以看一下demo：

hello

使用方式和id類似，但是應為類選擇器選擇的屬性不唯一，所以getelement後面加個s表示附屬，因為是複數，所以選取的元素也不是乙個可以直接使用的量。

demo：

var one = document.getelementsbyclassname(『class值』);

使用案例

demo：

這個方法只能夠使用乙個字串引數，但是這個字串引數可以由多個空格隔開的識別符號組成。只有當元素的class屬性值包含所有指定的識別符號時才能匹配，但是順序無關緊要。

html中也可以通過name來選區元素，但是html中並不是每個元素都擁有name屬性的，這其中包括表單，表單元素，iframe 和 img元素。，在表單資料提交到伺服器的時候使用改屬性的值，類似與id。但是和id的區別是，name屬性的值不是必須唯一的，多個元素可以存在相同的name值，類似於input標籤裡的checkbox多選標籤radios單選標籤

使用方法：

var input = document.getelementsbyname('username');

學習了c3選擇器以後，在js中我們也可以根據選擇器來選取元素，隨著c3選擇器的標準化，w3c制定了另乙個被稱為「選擇器api」的方法，來獲取匹配乙個給定選擇器的元素方法quertselectorall.

該方法接受乙個字串引數，這個引數包含乙個css選擇器，返回乙個表示文件中匹配選擇器的所有元素的nodelist物件（說白了就是把所有符合你要求的物件以列表的形式給你展現出來）；

需要注意的是，這個方法返回的物件的內容並不是實時的：包含在呼叫的時刻選擇器所匹配的元素，但是並不包含在呼叫之後匹配的元素。如果沒有匹配的元素，將返回乙個空的物件。如果選擇器異常，將丟擲乙個異常。

queryselector()

這個方法與上面類似，只是這個選擇器只返回第乙個匹配的元素，按照文件順序返回，如果沒有匹配就返回null。

var div = document.queryselector('div');
console.log(div);

tip:在css3中，新增了兩個選擇器：:first-line 和 :first-letter 等偽元素。這種偽元素實際上匹配的文字節點的一部分，而不是實際的元素。那麼當我們使用以上的兩種方法的時候，就不會匹配成功。

而且，在很多的瀏覽器中拒絕返回：link 和:visited等偽類的匹配結果，認為這樣會洩露使用者的瀏覽資訊。

一旦選取了文件中的乙個元素，有時我們需要查詢文件中與之在結構上相關的部分(父親，兄弟，子女)。針對此種問題，js給了我們兩個api使用，節點物件樹api 和元素物件樹api。

node定義的重要屬性:

這個api所提供的方法會將文件看做element文件樹，會忽略掉text和comment節點。（簡單點講就是忽略文字和注釋的節點）。

DOM內容梳理2

Dom內容彙總

jQuery基礎內容梳理

C 梳理所學內容

DOM內容梳理2

Dom內容彙總

jQuery基礎內容梳理

C 梳理所學內容

相關推薦