原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處
從這一節開始，我會花1-2天的時間來帶大家學習一下DOM
那么什么是DOM呢。DOM就是文檔對象模型，說的通俗一點就是你當前所在寫的頁面，至少這是我的理解，在看dom的內容之前，請確認一下你是否會使用HTML CSS來編寫頁面，如果不會的話，請去隔壁W3C或者菜鳥教程去學習一下HTML CSS或者HTML5 CSS3
然后你需要了解如下幾點:
**
文檔(Document)：就是指HTML或者XML文件
節點(Node)：HTML文檔中的所有內容都可以稱之為節點，常見的節點有
元素節點 屬性節點 文本節點 注釋節點
元素(Element)：HTML文檔中的標簽可以稱為元素**
我們如果需要獲取一個節點的時候，我們會
document.getElementById("id"); // 通過元素的ID獲取節點
document.getElementByName("name屬性"); 通過元素的name屬性獲取節點
document.getElementByTagName("元素標簽"); //通過元素標簽獲取節點
// 高級瀏覽器還支持的方法
document.getEmelentByClassName("類名"); 通過元素的類名獲取節點
如果我們需要給某個節點添加屬性或者綁定事件
var ele =document.getElementById("id"); //獲取到ID為id的節點
ele.href=“” //添加鏈接(圖片什么的原理相同，圖片是src=”“)
ele.onclick=function (){} //點擊觸發匿名事件
獲取與設置節點的屬性
getAttribute:(獲取)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="#" onclick="a()">a</a>
<script type="text/javascript">
function a(){
var a=document.getElementsByTagName("a")[0]; //獲取到在第一個的a標簽
//只能通過getElementByIagName()的方式來獲取到當前的節點
console.log(a.getAttribute("href"));
//通過a的getAtrribute()函數來獲取節點的href屬性
}
</script>
</body>
</html>
setAtrribute：（設置）
a.setAttribute('title','node') //給a節點添加title的屬性，值為node
也許有人會問，我獲取的時候為什么后面有[0]，直接那多好，那是因為通過TagName獲取到的是整個頁面的這個tagname的節點，是一個數組，我們需要通過索引來拿到所需要的節點.
共4條評論
Ctrl+Enter
