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

20120430dom操作属性节点.htm

//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("没有成功");

}

第二章关于dom

dom简介

如何使用dom

注意区分后面有Node和没有Node的参数方法的区别