javascript中對Attr(dom中屬性)的操作範例講解

作者：Eve Cole 更新時間：2025-02-14 23:24:02

複製代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>20120430dom操作屬性節點.htm</title>

//Attr(屬性)雖然是節點但不能用firstChild和childNodes等來訪問

function testBtn() {

// var myNode = document.getElementById("btn");//得到element標籤

// var myNodeName = myNode.nodeName;//得到上述標籤的名字為按鈕

// var x = myNode.attributes["onclick"].nodeType;//atrributes為一個屬性數組本句話的意思是找到標籤為'btn'的nodeType=2為屬性

// if (x == 2) {

// alert("您造訪到的是屬性節點！");

// }

//下面是某節點屬性的修改程式碼========================================= ===========================

//================================================ ============================================

var myNode = document.getElementById("btn");//得到element標籤

var x = myNode.getAttribute("id");//取得該標籤的id屬性

myNode.setAttribute("value", "test");//修改標籤的id屬性

var y = myNode.getAttribute("value");

alert("id的屬性由「" + x + "」變成了「" + y + "」");

//下面是為某元素新增屬性=========================================== ==============================

//================================================ ============================================

var myAtrr = document.createAttribute("class");

myAtrr.nodeValue = "classStyle";

myNode.setAttribute(myAtrr);

//getAttributeNode 和getAttribute的差別是取得屬性值- getAttribute()

//getAttribute("") 方法傳回屬性的值。

//取得屬性值- getAttributeNode()

//getAttributeNode("") 方法傳回屬性節點，getAttributeNode('').value取得節點值。

//對不同的瀏覽器結果不一樣在這裡不做深入研究================================== ==============

if (myNode.getAttributeNode("class") != null)

alert("添加成功！！");

else

alert("沒有添加成功");

//下面為移除屬性的值=========================================== ===================================

//================================================ ===========================================

// myNode.removeAttribute("class");

// if (myNode.getAttribute("class") == null)

// alert("刪除成功！！");

// else

// alert("沒有成功");

var delNode=myNode.getAttributeNode("class");

if (myNode.getAttribute("class") == null)

alert("刪除成功！！");

else

alert("沒有成功");

}

</script>

</head>

<body>

<h1>第二章關於dom</h1>

<p id="p1">dom簡介</p>

</body>

</html>

注意區分後面有Node和沒有Node的參數方法的差別