達文西，我要的是屬性節點，不是屬性！

BlackHole1 發布于2019-08-23 16:28 / 1954人閱讀

摘要：節點的類型有很多，常用的主要是三種元素節點屬性節點和文本節點。結果如下和，前者是獲取某個屬性值，后者才是獲取屬性節點。

js在處理DOM的時候，文檔中的內容都會被當成一個個節點，也就是常說的node。節點的類型有很多，常用的主要是三種：元素節點、屬性節點和文本節點。

元素相當于我們說的標簽，屬性就是標簽中定義的屬性，文本就是標簽里面的文字。比如下面我們可以通過getElementById來獲取元素節點，然后再通過childNodes遍歷它的子節點。


    hello
    I am Jason.
    2019-11-11

打印的結果如下，所有的子節點中，節點類型里1是元素節點，3是文本節點，這里沒有屬性節點。

3,#text,
        hello
        
1,P,null
3,#text,
        
1,P,null
3,#text,

那怎么獲取屬性節點？上網一搜，有的文章說是通過getAttribute，還舉例說了不同姿勢的獲取方式，還能賦值等等。那就試試吧。

var attr = document.getElementsByClassName("name")[0].getAttribute("title");
console.log(typeof attr);
console.log(attr);
console.log(attr.nodeType + "," + attr.nodeName + "," + attr.nodeValue);

打印結果如下，獲取到的getAttribute是一個string，不是一個object，當然也沒法獲取它的節點類型、名稱或者值，它只是一個字符串格式的屬性值而已。

string
I am Jason
undefined,undefined,undefined

屬性節點的正確獲取姿勢是getAttributeNode。

var nodeAttr = document.getElementsByClassName("name")[0].getAttributeNode("title");
console.log(typeof nodeAttr);
console.log(nodeAttr.nodeType + "," + nodeAttr.nodeName + "," + nodeAttr.nodeValue);

結果如下：

object
2,title,I am Jason

getAttribute和getAttributeNode，前者是獲取某個屬性值，后者才是獲取屬性節點。

除此之外，我們還知道，元素節點的類型是1，屬性節點的類型是2，文本節點的類型是3，看這123的排序，就知道為什么它們仨是最常用的。

這里面順便提一下，文本節點經常在我們計算childNodes的時候來搗亂，比如文章一開始的那段遍歷childNodes的代碼，結果里面有hello可以理解，但還有一些什么值都沒有的文本節點，這是導致我們在計算子節點數量時經常有偏差的原因。

這個什么值都沒有的文本節點，其實是有內容的，內容就是換行和空格。我們用下面這段代碼來對比。

helloI am Jason.
2019-11-11

輸出的結果就是我們正常理解的子節點內容。

3,#text,hello
1,P,null
1,P,null

上面我們說過123代表的是節點類型，那么節點名稱呢？如果是元素節點，那么就是標簽名稱；如果是屬性節點，那么就是屬性名稱；如果是文本節點呢？文本沒有什么名稱只有值，所以它統一叫#text。

關于節點值呢？元素節點是沒有值的，輸出null。其他的兩類節點都能輸出相應的值。

GPU云服務器云服務器達文西 html節點屬性 html屬性節點 asp設置節點屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103057.html

達文西，用JS寫個兼容IE8瀏覽器的類選擇器

摘要：基于某些考慮，有時我們項目中會盡量使用原生，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。越是新的特性，瀏覽器的兼容相對就越差。但原生的是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。基于某些考慮，有時我們項目中會盡量使用原生js，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。getElementsByClassName是后來...

Jaden 2019-08-26 13:40 評論0 收藏0
Javascript學習總結 - JS基礎系列二

摘要：假如對應的為一組對象，則返回該組對象中的第一個。方法返回帶有指定標簽名的節點對象的集合。語法說明是標簽的名稱，如等標簽名。是一個人的身份證號碼，是唯一的。注意把指定的屬性設置為指定的值。表示文檔所在窗口的當前寬度。簡述本系列將持續更新Javascript基礎部分的知識，誰都想掌握高端大氣的技術，但是我覺得沒有一個扎實的基礎，我認為一切高階技術對我來講都是過眼云煙，要成為一名及格的前...

pcChao 2019-08-19 17:08 評論0 收藏0
使用自定義的鼠標圖標 --- cursor url

摘要：前段時間在項目中遇到過自定義鼠標圖標這一需求。圖標的大小鼠標圖標的尺寸推薦，否則可能出現大小不一致問題。附上屬性值值描述需使用的自定義光標的。前段時間在項目中遇到過自定義鼠標圖標這一需求。由于一般我們用的鼠標樣式大都是固定的幾種，而自定義鼠標圖標不是很常用到，所以對這一小知識點進行總結，以防忘記。自定義鼠標圖標自定義鼠標圖標即 css cursor url的使用。 cs...

Yu_Huang 2019-08-30 13:59 評論0 收藏0