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對象的這個方法用來選擇指定類型（標簽名）的所有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:元素的標簽名，以大寫的形式表示。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。