1. 程式人生 > >javascript的選擇器、節點屬性

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:元素的標籤名,以大寫的形式表示。