DOM對象的一些常用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z-one</title>
</head>
<body>
<p id="p1" class="p">測試</p>
<p id="p2" class="p">測試</p>
<p id="p3" class="p">測試</p>
</body>
</html>
以上面code為例子
document 對象
document.doctype;//可以知道文檔聲明，如果沒有return null;這里是<!DOCTYPE html>
document.doctype.name//知道文檔聲明的名字.
document.head//很明顯選取head節點.就是<head></head>這段
document.body//選取body節點.
示例圖
- location
我記得location一般主要是用來獲取地址。
常用方法：
document.location.href//獲取當前地址
document.location.assign(http://www.baidu.com)//分配一個地址
另外如果href 是獲取當前地址，如果給他賦值，把一個地址給他，也能達到assign的效果；
document.location="http://www.baidu.com"
或者
document.location.
- innerText，innerHTML;
這三個放一起說，主要是都挺像的,這兩個個的作用都是往文檔中寫出內容,但是區別主要是： - document.body.innerText("Z-ONE") 主要是寫入一個純文本內容，此時<span>并不是標簽。而是一個文本"<span>".(其實這樣也顯得innerText的安全性高一點)
示例圖
- document.body.innerHTML("z-one")也是寫入一個純文本內容，但是不會將HTML標簽進行轉義。
示例圖
- 另外innerHTML是符合W3C協議的，而innerText只適用于IE瀏覽器。
Element元素
Element的幾個必要重要的屬性 感覺常用的就是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z-one</title>
</head>
<body>
<p id="p1" class="p">測試</p>
<p id="p2" class="p">測試</p>
<p id="p3" class="p">測試</p>
<script>
var a=document.getElementById("p1")//獲取上面那個例子的p1元素.
a.id// 獲取該元素的id... "p1" (貌似就是通過p1找到的他- -)
a.nodeName//獲取到節點的名字(就是標簽名字) 這里是"p"
a.className//獲取節點的class名字，這里因為關鍵字的原因，只能用className;
另外還有一些
child//獲取子元素 這里沒有
lastchild//最后一個子元素.
firstchild//第一個子元素.
nextSibling//下一個兄弟元素.
previousSibing//上一個兄弟元素.
</script>
</body>
</html>
獲取元素的方法
獲取元素的方法主要有三種：
- 通過ID
- 通過類名
- 通過元素種類
*(針對于input元素 通過分組名字) - 通過DOM2的方法
下面這個例子很好表示了獲取元素的幾種方法:
<p id="p1" class="p">測試</p>
<p id="p2" class="p">測試</p>
<p id="p3" class="p">測試</p>
</body>
<script>
window.onload=function(){
//用id獲取第二個p標簽的元素
var a=document.getElementById("p2");
a.style.color="red";
//用標簽名字來獲取第一個p標簽;
var b=document.getElementsByTagName("p")[0]//獲取的是一個集合,
b.style.fontSize="30px";//這里font-size,會報錯,就用fontSize;
//用類名來獲取第三個標簽.
var c=document.getElementsByClassName("p")[2]//和上面一個道理
c.style.fontWeight="bold";
//通過DOM2的方法獲取第1個標簽;
var d=document.querySelector("#p1");
//如果是queryselectorAll() 就是獲取一個集合,操作方式和上面類似。
//這里是通過類名，如果是ID就用#p1 標簽就用p,一般是獲取第一個元素.這點和Tag和Class都不一樣
d.style.color="green";
}
示例圖
然后就是Element的創建和添加元素。用一個例子表示吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>創建元素</title>
</head>
<script>
window.onload=function(){
var a=document.createElement("div");
a.className="p1"
a.innerHTML=("<span>測試下</span>");
//添加到文檔中
document.body.appendChild(a);//這下子元素就寫進去了
//如果還要添加 可以照著上面來，我們現在就添加一個元素進去
var b=document.createElement("div");
b.innerHTML="<p>測試第二彈</p>";
//這次我們添加在上一個元素前面
document.body.insertBefore(b,a);//把b插在a前面- -
//這時候不想要b了，想替換掉，可以這么做!
var c=document.createElement("div");
c.innerHTML="我就是來替換的";
document.body.replaceChild(c,b);//（new,old）
}
</script>
<body>
</body>
</html>
屬性操作
Element的屬性操作一般就下面四種：
- getAttribute 獲取一個屬性。
- setAttribute 設置一個屬性。
- removeAttribute 刪除一個屬性。
- createAttribute 新建一個屬性。
舉個例子吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取屬性</title>
</head>
<body>
<div id="x1" class="p1"></div>
</body>
<script>
var a=document.getElementById("x1");
a.getAttribute("id");//獲取該階段的屬性：id
a.setAttribute("id","Z-one");//設置一個屬性。
a.removeAttribute("id")//刪除ID節點
</script>
</html>
事件處理###
DOM0級事件處理
還是用一個例子說明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="a" value="按鈕">
</body>
<script>
var a=document.getElementById("a");
a.onclick=function(){
console.log("測試一下");
}
//這樣點擊按鈕就會在控制臺輸出測試一下
</script>
</html>
這一種應該算是比較常見的一種操作方式。沒什么好說的。我們看下面
DOM2級事件處理程序
這里前面區別開來，就是我是你的升級版！。出了這兩個方法
addEventListener();//添加
removeEventListener();//去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM2級</title>
</head>
<body>
<input type="button" value="按鈕">
</body>
<script>
var fun=function(){
console.log("測試一下");
}
var btn=document.querySelector("input");
btn.addEventListener("click",fun,false)
btn.removeEventListener("click",fun,false)
//如果是true 就是在事件捕獲階段調用，如果是false則是在事件冒泡階段調用。
//另外如果這里要用removeEventListener("click",function(){})//這樣是沒有效果的。雖然是一個函數，但是JS會認為傳入了一個另外一個函數，雖然和之前一個一模一樣。
</script>
</html>
IE事件調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IE事件調用</title>
</head>
<body>
<input type="button" id="p1" value="按鈕">
</body>
<script>
var a=document.getElementById("p1");
a.attachEvent("onclick",function(){
console.log("測試一下");
})
a.attachEvent("onclick",function(){
console.log("猜猜我在第一還是在第二");
})
//這里有一點。如果是如果是調用了兩次attachEvent（）,后面的會在前面出現。和DOM2是相反的.
另外IE下 事件處理會在全局作用下運行。
</script>
</html>
示意圖
