原生js選擇器、節(jié)點(diǎn)屬性

發(fā)布時(shí)間：2020-10-06 14:51:14 來(lái)源：網(wǎng)絡(luò) 閱讀：14515 作者：李生虎lsh 欄目：web開(kāi)發(fā)

getElementById（）：Document對(duì)象的該方法通過(guò)id獲取元素，在低于IE8版本的瀏覽器中，getElementById（）對(duì)匹配元素的ID不區(qū)分大小寫(xiě)，而且也返回匹配name屬性的元素。
getElementsByName（）：Document對(duì)象的該方法通過(guò)name屬性獲取html元素，該函數(shù)定義在HTMLDocument類中，而不在Document類中，所以它只針對(duì)HTML文檔可用，在XML文檔中不可用。，在IE中，getElementsByName（）也返回id屬性匹配指定值的元素。為了兼容，應(yīng)該小心謹(jǐn)慎，不要將同樣的字符串同時(shí)用做名字和id。為某些html元素設(shè)置name屬性將自動(dòng)在Window對(duì)象中創(chuàng)建匹配指定值的元素。如果給定的名字只有一個(gè)元素，自動(dòng)創(chuàng)建的文檔屬性對(duì)應(yīng)的該值是元素本身。如果有多個(gè)元素，該文檔屬性的值是一個(gè)NodeList對(duì)象，它表現(xiàn)為一個(gè)包含這些元素的數(shù)組。
getElementsByTagName（）：Document對(duì)象的這個(gè)方法用來(lái)選擇指定類型（標(biāo)簽名）的所有HTML或XML元素。Element類也定義了這個(gè)方法，它只選取調(diào)用該方法的元素的后代元素。
document.body和document.head分別用來(lái)獲取HTML文檔中<body>和<head>元素。Document類的documentElement屬性指代文檔的根元素。
結(jié)點(diǎn)列表和HTML集合：getElementsByName()和getElementsByTagName()都返回NodeList對(duì)象，而類似的document.p_w_picpath和document.forms的屬性為HTMLCollection對(duì)象。這兩個(gè)對(duì)象不是歷史文檔的一個(gè)靜態(tài)快照，而通常是實(shí)時(shí)的，并且當(dāng)文檔變化時(shí)他們所包含的元素列表能隨之改變，這是其中一個(gè)最重要和令人驚訝的特性。假設(shè)在一個(gè)沒(méi)有<div>元素的文檔中調(diào)用getElementsByTagName(‘div’)，此時(shí)返回值是一個(gè)length為0的NodeList對(duì)象。如果再在文檔中插入一個(gè)新的<div>元素，此元素將自動(dòng)成為NodeList的一員，并且它的length屬性變成1。通常，NodeList和HTMLCollection的實(shí)時(shí)性非常有用。但是，如果在迭代一個(gè)NodeList對(duì)象時(shí)在文檔中添加或刪除元素，首先會(huì)需要對(duì)NodeList對(duì)象生成一個(gè)靜態(tài)的副本。

var tmp=Array.prototype.slice.call(nodelist,0);

6.getElementsByClassName():通過(guò)類名來(lái)選取元素。在HTML文檔和HTML元素上都可以調(diào)用getElementByClassName(),它的返回值是一個(gè)實(shí)時(shí)的NodeList對(duì)象，包含文檔或元素所有匹配的后代節(jié)點(diǎn)。該方法只需要一個(gè)字符串參數(shù)，但是該字符串可以由多個(gè)空格隔開(kāi)的標(biāo)識(shí)符組成。只有當(dāng)元素的class屬性值包含所有指定的標(biāo)識(shí)符時(shí)才匹配，但是標(biāo)識(shí)符的順序是無(wú)關(guān)緊要的。注意，class屬性和geElementsByClassName（）方法的類似標(biāo)識(shí)符之間都是用空格隔開(kāi)的，而不是逗號(hào)。

如今的Web瀏覽器依賴于文檔開(kāi)頭處對(duì)<!DOCTYPE>聲明的嚴(yán)格程度來(lái)選擇“怪異模式”或“標(biāo)準(zhǔn)模式”方式顯式HTML文檔。怪異模式是為了向后兼容而存在的，其中一個(gè)怪異行為就是class屬性中和css樣式表中的類標(biāo)識(shí)符不區(qū)分大小寫(xiě)。geElementByClassName（）方法使用同樣的樣式匹配算法。如果文檔以怪異模式渲染，該方法將執(zhí)行不區(qū)分大小寫(xiě)的字符串比較；否則，該比較區(qū)分大小寫(xiě)。該方法在IE8及以下未實(shí)現(xiàn)。

7.querySelectorAll（）:它接受包含一個(gè)CSS選擇器的字符串參數(shù)，返回一個(gè)表示文檔中匹配選擇器的所有元素的NodeList對(duì)象。該對(duì)象并不是實(shí)時(shí)的:它包含在調(diào)用時(shí)刻所匹配的元素，但它并不更新后續(xù)文檔的變化。如果沒(méi)有匹配的元素，querySelectorAll（）將返回一個(gè)空的NodeList對(duì)象。如果選擇器字符串非法，querySelectorAll（）將拋出一個(gè)異常。此外，文檔對(duì)象還定義了querySelector（）方法：返回第一個(gè)匹配的元素（以文檔順序）或者如果沒(méi)有匹配的元素就返回null。

這兩個(gè)方法在Element節(jié)點(diǎn)中也有定義（并且也在DocumentFragment節(jié)點(diǎn)中）。在元素上調(diào)用時(shí)，指定的選擇器仍然在整個(gè)文檔中進(jìn)行匹配，然后過(guò)濾出結(jié)果集以便它只包含指定元素的后代元素。這看起來(lái)是違反常規(guī)的，因?yàn)樗馕吨x擇器字符串能包含元素的祖先而不僅僅是上述所匹配的元素。

CSS定義了“:first-line”和“：first-letter”:等偽元素。在CSS中，他們匹配文檔節(jié)點(diǎn)的一部分而不是實(shí)際元素。如果和querySelectorAll（）或querySelector（）一起使用它們是不匹配的。而且，很多瀏覽器拒絕返回“：link”和“：visited”等偽類的匹配結(jié)果，因?yàn)檫@會(huì)泄露用戶的瀏覽歷史記錄。

所有當(dāng)前的瀏覽器都支持querySelector（）和querySelectorAll（）方法。但是注意，這些方法的規(guī)范并不要求支持CSS3選擇器：鼓勵(lì)瀏覽器支持和在樣式表中一樣的選擇器集合。當(dāng)前的瀏覽器除了IE都支持CSS3選擇器。IE7和IE8支持CSS2選擇器。

8.Document對(duì)象，它的Element對(duì)象和文檔中表示文本的Text對(duì)象都是Node對(duì)象。Node定義了以下重要的屬性：

1） parentNode：該節(jié)點(diǎn)的父節(jié)點(diǎn)，或者針對(duì)類似Document對(duì)象應(yīng)該是null，因?yàn)樗麤](méi)有父節(jié)點(diǎn)。

2） childNodes：只讀的類數(shù)組對(duì)象（NodeList對(duì)象），它是該節(jié)點(diǎn)的子節(jié)點(diǎn)的實(shí)時(shí)表示。

3） firstChild、lastChild：該節(jié)點(diǎn)的子節(jié)點(diǎn)中的第一個(gè)和最后一個(gè)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則為null。

4） nextSibling，previousSibling：該結(jié)點(diǎn)的兄弟結(jié)點(diǎn)中的前一個(gè)和下一個(gè)。具有相同父節(jié)點(diǎn)的兩個(gè)節(jié)點(diǎn)為兄弟節(jié)點(diǎn)。節(jié)點(diǎn)的順序反映了它們?cè)谖臋n中出現(xiàn)的順序。這兩個(gè)屬性將節(jié)點(diǎn)之間以雙向鏈表的形式連接起來(lái)。

5） nodeType：該節(jié)點(diǎn)的類型，9代表Document節(jié)點(diǎn)，1代表Element節(jié)點(diǎn)，3代表Text節(jié)點(diǎn)，8代表Comment節(jié)點(diǎn)，11代表DocumentFragment節(jié)點(diǎn)。

6） nodeValue：Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的內(nèi)容。

7） nodeName元素的標(biāo)簽名，以大寫(xiě)的形式表示。

9.注意，Text和Comment節(jié)點(diǎn)沒(méi)有children屬性，它意味著Node.parentNode屬性不可能返回Text或Comment節(jié)點(diǎn)。任何Element的parentNode總是另一個(gè)Element，或者，追溯到樹(shù)根的Document或DocumentFragment節(jié)點(diǎn)。

10.Element屬性：firstElementChild、lastElementChild、nextElementSibling、previousElementSibling、childElementCount（子元素的數(shù)量。返回值和children.length值相等）以上和Node對(duì)象的屬性類似，只是這些屬性只代表Element。

11.HTML屬性作為Element屬性：HTML屬性名不區(qū)分大小寫(xiě)，但JavaScript屬性名則大小寫(xiě)敏感。從HTML屬性名轉(zhuǎn)換到JavaScript屬性名應(yīng)該采用小寫(xiě)。但是，如果屬性名包含不止一個(gè)單詞，則將除了第一個(gè)單詞以外的單詞的首字母大寫(xiě)，例如：defaultChecked和tabIndex。有些HTML屬性名在JavaScript中是保留字。對(duì)于這些屬性，一般的規(guī)則是為屬性名加前綴“html”。例如，HTML的for屬性（<lable>元素）在JavaScript中變?yōu)?/span>htmlFor屬性?！?/span>class”在JavaScript中是保留字（但還未使用），它是HTML非常重要的class屬性，是上面規(guī)則的一個(gè)例外：在JavaScript代碼中它變?yōu)?/span>className。表示HTML屬性的值通常是字符串。當(dāng)屬性為布爾值或數(shù)值，屬性也為對(duì)應(yīng)的類型，而不是字符串。

向AI問(wèn)一下細(xì)節(jié)

原生js選擇器、節(jié)點(diǎn)屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽