版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/60965681
節點類型：元素節點/屬性節點/文本節點
元素節點
getElementById(id);
PS:DOM操作必須等待HTML文檔加載完畢才可以擷取
<1> 把腳本移文檔最後
<2> 用onload事件加載
// 當網頁所有内容都加載完再執行
window.onload = function(){
var data = document.getElementById("lalala");
alert(data);
}; 屬性節點
tagName 标簽名
innerHTML 元素節點裡的内容（文本）
id ID值(屬性值，不是屬性節點)
title title值
style 擷取style屬性對象
className 擷取class屬性值
屬性中的值可以更改
<script>
window.onload = function(){
var data = document.getElementById("lalala");
alert("id:"+data.id); // id:lalala
alert("class:"+data.className); // class:head
alert("title:"+data.title); // title:标題
alert("style:"+data.style); // style:[object CSSStyleDeclaration]
alert("innerHTML:"+data.innerHTML); // innerHTML:啦啦啦
};
</script>
<div id="lalala" class="head" title="标題">啦啦啦</div> getElementsByTagName(“标簽名”)
根據标簽名傳回符合條件的數組
data[0].HTML與data.item(0).innerHTML等效
<script>
window.onload = function(){
var data = document.getElementsByTagName("li");
alert(data[0].innerHTML); // 1
alert(data.item(0).innerHTML); // 1
};
</script>
<div id="lalala" class="head" title="标題">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> getElementsByName(“name”);
根據name屬性傳回符合條件的數組
<script>
window.onload = function(){
var data = document.getElementsByName("input");
alert(data[1].size); // 20
};
</script>
<body>
<form>
<input type="text" name="input" size="10"/>
<input type="text" name="input" size="20"/>
</form>
</body> PS:div标簽中沒有name屬性，ie無法擷取
屬性值的操作
1，getAttribute(“屬性名”); 傳回屬性的值(對象/值)
2，setAttribute(“屬性名”,”屬性值”);
3，removeAttribute(“屬性名”) 移除屬性
window.onload = function(){
var data = document.getElementById("lalala");
data.setAttribute("style","background-color:skyblue;");
}
</script>
<div id="lalala" class="head" title="标題">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)