javascript的選擇器、節點屬性


一、獲取html元素,選擇器

1、document.getElementById("id")

Document對象的該方法通過id獲取元素,在低於IE8版本的瀏覽器中,getElementById()對匹配元素的ID不區分大小寫,而且也返回匹配name屬性的元素。

2、document.getElementsByName("name")

Document對象的該方法通過name屬性獲取html元素,該函數定義在HTMLDocument類中,而不在Document類中,所以它只針對HTML文檔可用,在XML文檔中不可用。,在IE中,getElementsByName()也返回id屬性匹配指定值的元素。為了兼容,應該小心謹慎,不要將同樣的字符串同時用做名字和id。為某些html元素設置name屬性將自動在Window對象中創建匹配指定值的元素。如果給定的名字只有一個元素,自動創建的文檔屬性對應的該值是元素本身。如果有多個元素,該文檔屬性的值是一個NodeList對象,它表現為一個包含這些元素的數組。

3、document.getELementsByTagName("div")

Document對象的這個方法用來選擇指定類型(標簽名)的所有HTMLXML元素。Element類也定義了這個方法,它只選取調用該方法的元素的后代元素。

4、document.getElementsClassName("class")

通過類名來選取元素。在HTML文檔和HTML元素上都可以調用getElementsByClassName(),它的返回值是一個實時的NodeList對象,包含文檔或元素所有匹配的后代節點。該方法只需要一個字符串參數,但是該字符串可以由多個空格隔開的標識符組成。只有當元素的class屬性值包含所有指定的標識符時才匹配,但是標識符的順序是無關緊要的。注意,class屬性和geElementsByClassName()方法的類似標識符之間都是用空格隔開的,而不是逗號。

如今的Web瀏覽器依賴於文檔開頭處對<!DOCTYPE>聲明的嚴格程度來選擇“怪異模式”或“標准模式”方式顯式HTML文檔。怪異模式是為了向后兼容而存在的,其中一個怪異行為就是class屬性中和css樣式表中的類標識符不區分大小寫。geElementsByClassName()方法使用同樣的樣式匹配算法。如果文檔以怪異模式渲染,該方法將執行不區分大小寫的字符串比較;否則,該比較區分大小寫。該方法在IE8及以下未實現。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script type="text/javascript">
window.onload=function(){
var myid=document.getElementById("myid");
var myclass = document.getElementsByClassName("myclass");
var div = document.getElementsByTagName("div");
console.log(myid);
console.log(myclass);
console.log(div);
}
</script>
</head>
<body>
<div id="myid"></div>
<div class="myclass"></div>
<div class="myclass"></div>
</body>
</html>


5、document.body和document.head

分別用來獲取HTML文檔中<body><head>元素。Document類的documentElement屬性指代文檔的根元素。



二、節點列表

getElementsByName()getElementsByTagName()、getElementsClassName()都返回NodeList對象,而類似的


三、HTML集合

document.imagedocument.forms的屬性為HTMLCollection對象。這兩個對象不是歷史文檔的一個靜態快照,而通常是實時的,並且當文檔變化時他們所包含的元素列表能隨之改變,這是其中一個最重要和令人驚訝的特性。假設在一個沒有<div>元素的文檔中調用getElementsByTagName(‘div’),此時返回值是一個length0NodeList對象。如果再在文檔中插入一個新的<div>元素,此元素將自動成為NodeList的一員,並且它的length屬性變成1。通常,NodeListHTMLCollection的實時性非常有用。但是,如果在迭代一個NodeList對象時在文檔中添加或刪除元素,首先會需要對NodeList對象生成一個靜態的副本。

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清空表單里所有的輸入框</title>
</head>
<body>
<form name="myform" id="myform">
我是第一排:<input type="text" name="myname" value="lili"/>
<input type="text" name="name1" class="n1"/>
<input type="text" name="name2" class="n2 n1"/>
<button type="button" value="" onclick="tijiao()">按鈕</button>
</form>
<form name="myform2">
我是第二排:<input type="text" name="name3" class="n1"/>
</form>
</body>
</html>



四、節點屬性

1、parentNode:該節點的父節點,或者針對類似Document對象應該是null,因為他沒有父節點。

2、childNodes:只讀的類數組對象(NodeList對象),它是該節點的子節點的實時表示。

3、firstChild、lastChild:該節點的子節點中的第一個和最后一個,如果該節點沒有子節點則為null

4、nextSibling和previousSibling:該結點的兄弟結點中的前一個和下一個。具有相同父節點的兩個節點為兄弟節點。節點的順序反映了它們在文檔中出現的順序。這兩個屬性將節點之間以雙向鏈表的形式連接起來。

5、nodeType:該節點的類型,9代表Document節點,1代表Element節點,3代表Text節點,8代表Comment節點,11代表DocumentFragment節點。

6、nodeValue:Text節點或Comment節點的內容。

7、nodeName:元素的標簽名,以大寫的形式表示。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: