9.Javascript之獲取屬性

一、獲取屬性

對於如下標籤的屬性：

<div id = "div1" title = "hello" class = "box" xxx = "yyy">
	div文本
</div>

javascript要想獲取可以先獲取id，在通過.屬性的方式獲取屬性，如下所示：

window.onload = function(){
    var oDiv = document.getElementById("div1");
    
    var id1 = oDiv.id;	//獲取oDiv的id屬性
    var title1 = oDiv.title;	//獲取oDiv的title屬性
    
    //由於class是關鍵字，需要用className來代替
    var class1 = oDiv.className;
}

對於這種訪問方式存在幾個不足之處：

• 對於class需要通過className來訪問
• 對於自定義屬性比如說xxx = “yyy”,無法進行訪問
• 無法有效刪除屬性

基於以上幾點，所以出現了針對屬性的一系列方法

二、針對屬性的方法

setAttribute(attributeName,newAttributeValue)	//設置屬性值

getAttribute(attributeName)	//獲取屬性信息

removeAttribute(attributeName)	//刪除屬性

這些方法克服了上述的幾個不足之處

window.onload = function(){
    var oDiv = document.getElementById("div1");
    
    //class訪問
    alert(oDiv.getAttribute("class"));
    
    //對自定義屬性訪問
    alert(oDiv.getAttribute("xxx"));
    
    //設置屬性值
    oDiv.setAttribute("xxx","yyy");
    oDiv.setAttribute("class","box5");
    
    //刪除屬性值
    oDiv.removeAttribute("xxx");
}

三、獲取標籤間的內容

通過使用兩個方法來獲取標籤間的內容

• innerHTML(會解析標籤)
• innerText(純文本)
• outerHTML(這個方法不止標籤間的內容會被獲取，而且標籤本身也會被獲取)

window.onload = function(){
    var oDiv = document.getElementById("div1");
 	
    //獲取標籤間的內容
    var text = oDiv.innerHTML;
    alert(text);	//div文本
    
    //設置標籤間的內容
    oDiv.innerHTML = "<h1>div文本</h1>";
    
    //innerText用法與innerHTML一樣，但是innerHTML寫入標籤，獲取標籤，這些標籤會被解析
    
    //outerHTML
    /*
    獲取整個標籤端
    <div id = "div1" title = "hello" class = "box" xxx = "yyy">
		div文本
	</div>
    */
    alert(oDiv.outerHTML);
    
    //outerHTML更改標籤，也是把整個標籤段更改
    oDiv.outerHTML = "<h1>div文本</h1>";
    alert(oDiv.outerHTML); //<h1>div文本</h1>
}