JS 修改元素属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习修改元素属性。

1. 元素属性：

核心DOM：凡是来自于不带HTML开头的父类型中定义的属性和方法

HTML DOM：凡是继承自HTML开头的父类型中定义的属性和方法

body-->HTMLBodyElement//HTML DOM

-->HTMLElement//HTML DOM

-->Element//核心DOM

-->Node//核心DOM

比如：元素：-->HTMLXXXElement的原型

-->HTMLElement的原型--->所有HTML元素的父类型

******以上是HTML DOM，以下是核心DOM*****

-->Element的原型--->所有元素的父类型

-->Node的原型--->所有节点的父类型

注意:一切从属性获取的值和设置到属性上的值必须都是字符串

所以，计算时，都要先类型转换，再计算！

获取元素的属性值：3种：

1. var strValue=elem.getAttribute("属性名");

使用场合：只找一个属性值时

2. elem.attributes集合：包含了当前元素所有属性的节点对象

var strValue=elem.attributes[i/"属性名"]-->返回一个属性节点对象

//属性集合属性节点

elem.attributes[i/"属性名"].value-->属性值

何时使用：遍历一个元素所有属性时使用

3. elem.getAttributeNode("属性名")-->返回一个属性节点

var strValue=elem.getAttributeNode("属性名").value-->返回属性值

修改元素的属性值：2种：--------》所有属性值都是字符串

1. elem.setAttribute("属性名","属性值"); //没有返回值

何时使用：只设置一个属性值时

2. elem.setAttributeNode(属性节点对象)

例如:

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
</head>
<body><a href="http://weixin.com">go to weixin</a>
<script>
document.body.firstChild.setAttribute("target","_blank");
</script>
</body>
</html>在页面上点击 go to weixin ，实现页面跳转。移除元素的属性：2种： 1. elem.removeAttribute("属性名") 2. elem.removeAttributeNode(属性节点对象) 判断是否包含指定属性：1种： 1. elem.hasAttribute("属性名")-->有，则返回true；没有，则返回false 总结：4个词： attributes集合 elem.getAttribute elem.setAttribute removeAttribute hasAttribute HTML DOM: 获取/修改属性:elem.属性名删除属性:elem.属性名=""; 判断:if(elem.属性名) Property vs Attribute 属性 html特性 Property: 内存中对象的属性，通常用.访问 Attribute: 指出现在页面html代码中的属性,只能通过get/setAttribute访问标准属性：Property等效于Attribute 比如：a.setAttribute("href","url")——>核心DOM a.href="url"; ——>HTML DOM HTML标准属性:既是html元素的特性,同时又是内存中元素对象的属性自定义属性:html也可以自定义属性例如: li.setAttribute("age","25");==><li age="25"></li> 只能用getAttribute("age");-->25 li.age=25;===>仅存储在内存中,无法出现在页面元素上,只能用.获取自定义属性,核心DOM和HTML DOM不通用! 今后操作标准属性，用HTML DOM 因为所有标准属性都被HTMLXXXElement及其父类型预定义好了特例：txt.setAttribute("class","类名"); txt.className="类名";例如：
<!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
<script src="js/3_1.js"></script>
</head>
<body>
<ul id="queue">
<li>Tony</li>
<li>Mary</li>
<li>Jerry</li>
<li>Tom</li>
<li>Mark</li>
<li>Jony</li>
<li>Aomar</li>
<li>North</li>
</ul>
</body>
</html>