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屬性匹配指定值的元素。為了相容,應該小心謹慎,不要將同樣的字元串同時用做名字和
3、document.getELementsByTagName("div")
Document物件的這個方法用來選擇指定型別(標籤名)的所有HTML或XML元素。Element類也定義了這個方法,它只選取呼叫該方法的元素的後代元素。
4、document.getElementsClassName("class")
<!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.image和document.forms的屬性為HTMLCollection物件。這兩個物件不是歷史文件的一個靜態快照,而通常是實時的,並且當文件變化時他們所包含的元素列表能隨之改變,這是其中一個最重要和令人驚訝的特性。假設在一個沒有<div>元素的文件中呼叫getElementsByTagName(‘div’),此時返回值是一個length為0的NodeList物件。如果再在文件中插入一個新的<div>元素,此元素將自動成為NodeList的一員,並且它的length屬性變成1。通常,NodeList和HTMLCollection的實時性非常有用。但是,如果在迭代一個NodeList物件時在文件中新增或刪除元素,首先會需要對NodeList物件生成一個靜態的副本。
<!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:元素的標籤名,以大寫的形式表示。