資訊專欄INFORMATION COLUMN
摘要：節(jié)點的類型有很多，常用的主要是三種元素節(jié)點屬性節(jié)點和文本節(jié)點。結(jié)果如下和，前者是獲取某個屬性值，后者才是獲取屬性節(jié)點。
js在處理DOM的時候，文檔中的內(nèi)容都會被當(dāng)成一個個節(jié)點，也就是常說的node。節(jié)點的類型有很多，常用的主要是三種：元素節(jié)點、屬性節(jié)點和文本節(jié)點。
元素相當(dāng)于我們說的標(biāo)簽，屬性就是標(biāo)簽中定義的屬性，文本就是標(biāo)簽里面的文字。比如下面我們可以通過getElementById來獲取元素節(jié)點，然后再通過childNodes遍歷它的子節(jié)點。
helloI am Jason.
2019-11-11
打印的結(jié)果如下，所有的子節(jié)點中，節(jié)點類型里1是元素節(jié)點，3是文本節(jié)點，這里沒有屬性節(jié)點。
3,#text,
hello
1,P,null
3,#text,
1,P,null
3,#text,
那怎么獲取屬性節(jié)點？上網(wǎng)一搜，有的文章說是通過getAttribute，還舉例說了不同姿勢的獲取方式，還能賦值等等。那就試試吧。
var attr = document.getElementsByClassName("name")[0].getAttribute("title");
console.log(typeof attr);
console.log(attr);
console.log(attr.nodeType + "," + attr.nodeName + "," + attr.nodeValue);
打印結(jié)果如下，獲取到的getAttribute是一個string，不是一個object，當(dāng)然也沒法獲取它的節(jié)點類型、名稱或者值，它只是一個字符串格式的屬性值而已。
string I am Jason undefined,undefined,undefined
屬性節(jié)點的正確獲取姿勢是getAttributeNode。
var nodeAttr = document.getElementsByClassName("name")[0].getAttributeNode("title");
console.log(typeof nodeAttr);
console.log(nodeAttr.nodeType + "," + nodeAttr.nodeName + "," + nodeAttr.nodeValue);
結(jié)果如下：
object 2,title,I am Jason
getAttribute和getAttributeNode，前者是獲取某個屬性值，后者才是獲取屬性節(jié)點。
除此之外，我們還知道，元素節(jié)點的類型是1，屬性節(jié)點的類型是2，文本節(jié)點的類型是3，看這123的排序，就知道為什么它們仨是最常用的。
這里面順便提一下，文本節(jié)點經(jīng)常在我們計算childNodes的時候來搗亂，比如文章一開始的那段遍歷childNodes的代碼，結(jié)果里面有hello可以理解，但還有一些什么值都沒有的文本節(jié)點，這是導(dǎo)致我們在計算子節(jié)點數(shù)量時經(jīng)常有偏差的原因。
這個什么值都沒有的文本節(jié)點，其實是有內(nèi)容的，內(nèi)容就是換行和空格。我們用下面這段代碼來對比。
helloI am Jason.
2019-11-11
輸出的結(jié)果就是我們正常理解的子節(jié)點內(nèi)容。
3,#text,hello 1,P,null 1,P,null
上面我們說過123代表的是節(jié)點類型，那么節(jié)點名稱呢？如果是元素節(jié)點，那么就是標(biāo)簽名稱；如果是屬性節(jié)點，那么就是屬性名稱；如果是文本節(jié)點呢？文本沒有什么名稱只有值，所以它統(tǒng)一叫#text。
關(guān)于節(jié)點值呢？元素節(jié)點是沒有值的，輸出null。其他的兩類節(jié)點都能輸出相應(yīng)的值。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103057.html
摘要：基于某些考慮，有時我們項目中會盡量使用原生，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。越是新的特性，瀏覽器的兼容相對就越差。但原生的是支持多個類名選擇的，既然要寫一個兼容的自定義類選擇器代替原生的，那么這個功能說什么也要上啊。 基于某些考慮，有時我們項目中會盡量使用原生js，這種情況下連最簡單的類選擇器可能都要進行兼容性處理。getElementsByClassName是后來...
摘要：假如對應(yīng)的為一組對象，則返回該組對象中的第一個。方法返回帶有指定標(biāo)簽名的節(jié)點對象的集合。語法說明是標(biāo)簽的名稱，如等標(biāo)簽名。是一個人的身份證號碼，是唯一的。注意把指定的屬性設(shè)置為指定的值。表示文檔所在窗口的當(dāng)前寬度。 簡述 本系列將持續(xù)更新Javascript基礎(chǔ)部分的知識，誰都想掌握高端大氣的技術(shù)，但是我覺得沒有一個扎實的基礎(chǔ)，我認(rèn)為一切高階技術(shù)對我來講都是過眼云煙，要成為一名及格的前...
摘要：前段時間在項目中遇到過自定義鼠標(biāo)圖標(biāo)這一需求。圖標(biāo)的大小鼠標(biāo)圖標(biāo)的尺寸推薦，否則可能出現(xiàn)大小不一致問題。附上屬性值值描述需使用的自定義光標(biāo)的。 前段時間在項目中遇到過 自定義鼠標(biāo)圖標(biāo) 這一需求。由于一般我們用的鼠標(biāo)樣式大都是固定的幾種，而 自定義鼠標(biāo)圖標(biāo) 不是很常用到，所以對這一小知識點進行總結(jié)，以防忘記。 自定義鼠標(biāo)圖標(biāo) 自定義鼠標(biāo)圖標(biāo) 即 css cursor url的使用。 cs...
閱讀 2532·2021-09-24 10:29
閱讀 3817·2021-09-22 15:46
閱讀 2584·2021-09-04 16:41
閱讀 2990·2019-08-30 15:53
閱讀 1271·2019-08-30 14:24
閱讀 3064·2019-08-30 13:19
閱讀 2181·2019-08-29 14:17
閱讀 3532·2019-08-29 12:55
