javascript中对Attr(dom中属性)的操作示例讲解

复制代码代码如下:

<!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的参数方法的区别