HTML DOM Attribute 对象属性方法 小结
虽然写这个博客主要目的是为了给我自己做一个思路记忆录,但是如果你恰好点了进来,那么先对你说一声欢迎。我并不是什么大触,只是一个菜菜的学生,如果您发现了什么错误或者您对于某些地方有更好的意见,非常欢迎您的斧正!
学习来源:http://www.w3school.com.cn/jsref/dom_obj_attributes.asp
HTML DOM 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
Attr 对象
在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
NamedNodeMap 对象
在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引(数字)来访问。
属性和方法
属性 / 方法 | 描述 |
---|---|
attr.isId | 如果属性是 id 类型,则返回 true,否则返回 false。 |
attr.name | 返回属性的名称。 |
attr.value | 设置或返回属性的值。 |
attr.specified | 如果已指定属性,则返回 true,否则返回 false。 |
nodemap.getNamedItem() | 从 NamedNodeMap 返回指定的属性节点。 |
nodemap.item() | 返回 NamedNodeMap 中位于指定下标的节点。 |
nodemap.length | 返回 NamedNodeMap 中的节点数。 |
nodemap.removeNamedItem() | 移除指定的属性节点。 |
nodemap.setNamedItem() | 设置指定的属性节点(通过名称)。 |
测试
我的测试结果:每一个按钮点击后就可以出现相应的函数效果。
以下是源代码(有哪里需要我加注释的,欢迎在评论区与我交流):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML DOM Attribute 对象</title>
<style media="screen" type="text/css">
body {
margin: 0;
padding: 0;
}
input {
margin-left: 50px;
margin-top: 10px;
display: block;
font-size: 20px;
}
p {
margin-left: 50px;
font-size: 20px;
}
.set {
color: #FF6699;
}
</style>
<script type="text/javascript">
function IsID() {
var p = document.getElementById('isid');
p.innerHTML = p.attributes[0].isId + "<br />注释:Internet Explorer 或 Opera 不支持 isId 属性。";
}
function NAme() {
var p = document.getElementById('name');
p.innerHTML = "p标签的第一个属性的名称: " + p.attributes[0].name;
}
function VAlue() {
var p = document.getElementById('value');
p.innerHTML = "p标签的id值: " + p.attributes[0].value;
}
function Specified() {
var p = document.getElementById('specified');
p.innerHTML = "查看p标签是否指定id属性: " + p.attributes[0].specified;
}
function GetNamedItem() {
var p = document.getElementById('getnameditem');
p.innerHTML = "返回这个p标签的style属性: " + p.attributes.getNamedItem("style").textContent;
}
function Length() {
var p = document.getElementById('length');
var inputs = document.getElementsByTagName('input')[5];
p.innerHTML = "查看这个按钮有多少个属性 : " + inputs.attributes.length;
}
function RemoveNamedItem() {
var p = document.getElementById('remove');
p.attributes.removeNamedItem("style");
}
function SET() {
var p = document.getElementById('set');
var set = document.createAttribute('class');
set.nodeValue = 'set';
p.attributes.setNamedItem(set);
}
</script>
</head>
<body>
<input type="button" value="attr.isId如果属性是 id 类型,则返回 true,否则返回 false。" onclick="IsID()">
<p id="isid"></p>
<input type="button" value="attr.name返回属性的名称。" onclick="NAme()">
<p id="name"></p>
<input type="button" value="attr.value设置或返回属性的值。" onclick="VAlue()">
<p id="value"></p>
<input type="button" value="attr.specified如果已指定属性,则返回 true,否则返回 false。" onclick="Specified()">
<p id="specified"></p>
<input type="button" value="nodemap.getNamedItem()从 NamedNodeMap 返回指定的属性节点。" onclick="GetNamedItem()">
<p id="getnameditem" style="color: #FF6699"></p>
<input type="button" value="nodemap.length返回 NamedNodeMap 中的节点数。" onclick="Length()">
<p id="length"></p>
<input type="button" value="nodemap.removeNamedItem()移除指定的属性节点。" onclick="RemoveNamedItem()">
<p id="remove" style="color: #FF6699">移除这个p标签的style属性:可以看到颜色变化。</p>
<input type="button" value="nodemap.setNamedItem()设置指定的属性节点(通过名称)。" onclick="SET()">
<p id="set">点击可以看到这个p标签的颜色变化。</p>
</body>
</html>