DOM特性节点ATTRIBUTE

定义

　　每个元素都有一个或多个特性，这些特性的用途是给出相应元素或内容的附加信息。实质上，特性节点就是存在于元素的attributes属性中的节点。

特征　　

　　nodeType:2
　　nodeName:特性的名称
　　nodeValue:特性的值
　　parentNode:null
　　childNode:chrome、firefox下为undefined，safari下为Text，IE9+下为子元素的特性名，IE8-下报错
　　　　[注意]尽管Attribute也是节点，但却不被认为是DOM文档树的一部分，开发人员常用getAttribute()、setAttribute()、removeAttribute()，很少直接引用特性节点

<div id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
var oAttr = oBox.attributes;
//(chrome\safari\IE9+\firefox) 2 id box null
//(IE7-) 2 onmsanimationiteration null null
console.log(oAttr[0].nodeType,oAttr[0].nodeName,oAttr[0].value,oAttr[0].parentNode)
//(chrome\firefox) undefined
//(safari) Text
//(IE9+) box
//(IE8-) 报错
console.log(oAttr[0].childNodes[0])
</script>

特性节点属性

　　Attr对象有3个属性:name、value和specified
　　　　【1】name是特性名称(与nodeName的值相同)
　　　　【2】value是特性的值(与nodeValue的值相同)
　　　　【3】specified是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着要么是在HTML中指定了相应特性，要么是通过setAttribute()方法设置了该属性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中根本不会为这类特性生成对应的特性节点

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
var oAttr = oBox.attributes;
//(chrome\safari\IE8+)class class true
//(firefox)id id true
//(IE7-)onmsanimationiteration onmsanimationiteration true
console.log(oAttr[0].name,oAttr[0].nodeName,oAttr[0].name == oAttr[0].nodeName)
//IE7- "null" null false
//其他浏览器 box box true
console.log(oAttr[0].value,oAttr[0].nodeValue,oAttr[0].value == oAttr[0].nodeValue)
//IE7- false
//其他浏览器 true
console.log(oAttr[0].specified)//true
</script>
<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.attributes.id.specified)//true
console.log(oBox.attributes.onclick.specified)//在IE7-浏览器下会返回false，在其他浏览器下会报错
</script>

特性属性attributes

　　Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。

　　【attributes属性的四个方法】

　　　　[a]getNamedItem(name):返回nodeName属性等于name的节点
　　　　[b]removeNamedItem(name):从列表中移除nodeName属性等于name的节点
　　　　[c]setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引
　　　　[d]item(pos):返回位于数字pos位置处的节点，也可以用方括号法[]简写

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
var getTest = oBox.attributes.getNamedItem("index");
console.log(getTest);//index = "123"
var removeTest = oBox.attributes.removeNamedItem("class");
console.log(removeTest);//class = "box"
console.log(oBox.attributes.getNamedItem("class"));//null
console.log(oBox.attributes.setNamedItem(removeTest));//null
console.log(oBox.attributes.setNamedItem(getTest));//index = "123"
console.log(oBox.attributes.item(0));//id="box"(每个浏览器获取的不一样)
</script>

　　attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，节点的nodeValue就是特性的值

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.id.nodeName);//"id"
console.log(oBox.attributes.id.nodeValue);//"box"
</script>

　　【特性遍历】

　　　　attributes属性主要用于特性遍历。在需要将DOM结构序列化为XML或HTML字符串时，多数都会涉及遍历元素特性

function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}

　　　　

　　　　[注意1]针对attributes对象中的特性，不同浏览器返回的顺序不同

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}
//(chrome\safari)class="box" id="box" name="abc" index="123" title="test"
//(firefox)title="test" index="123" name="abc" id="box" class="box"
//(IE8+)title="test" class="box" id="box" index="123" name="abc"
//(IE7-)输出所有的特性
console.log(outputAttributes(document.getElementById("box")))
</script>

　　　　[注意2]IE7-浏览器会返回HTML元素中所有可能的特性，包括没有指定的特性

　　　　【解决】利用特性节点的specified属性

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName +"=\"" + attrValue + "\"");
        }
    }
    return pairs.join(" ");
}
//所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)
console.log(outputAttributes(document.getElementById("box")))
</script>

特性节点方法

　　【1】createAttribute()方法传入特性名称并创建新的特性节点
　　【2】setAttributeNode()方法传入特性节点并将特性添加到元素上
　　【3】getAttributeNode()方法传入特性名并返回特性节点
　　【4】removeAttributeNode()方法传入特性名删除并返回删除的特性节点，但IE7-浏览器下无法删除

<div id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
var attr = document.createAttribute(‘title‘);
attr.value = "test";
oBox.setAttributeNode(attr);
console.log(oBox.getAttributeNode("title").name,attr.name);//title title
console.log(oBox.getAttributeNode("title").value,attr.value);//test test
//返回删除的节点
console.log(oBox.removeAttributeNode(attr));
//IE7-浏览器下无法删除，其他浏览器返回null
console.log(oBox.getAttributeNode("title"));
</script>

特性方法

　　操作特性的DOM方法主要有getAttribute()、setAttribute()、removeAttribute()三个，可以针对任何特性使用，包括那些以HTMLElement类型属性的形式定义的特性

　　【1】getAttribute()方法

　　　　getAttribute()方法用于取得特性的值

<div class="boxClass" id="boxId" title="boxTitle" lang="en" dir="rtl">123</div>
<script>
var oBox = document.getElementById(‘boxId‘);
console.log(oBox.getAttribute("class"))//boxClass
console.log(oBox.getAttribute("id"))//boxId
console.log(oBox.getAttribute("title"))//boxTitle
console.log(oBox.getAttribute("lang"))//en
console.log(oBox.getAttribute("dir"))//rtl
</script>

　　　　[注意1]如果给定名称的特性不存在或无参数则返回null

console.log(oBox.getAttribute("abc"))//null
console.log(oBox.getAttribute(""))//null

　　　　[注意2]传递给getAttribute()的特性名与实际的特性名相同，因此要得到class特性值，应该传入"class"而不是"className"。但IE7-浏览器却正好相反

console.log(oBox.getAttribute("class"))//boxClass,在IE7-浏览器下显示null
console.log(oBox.getAttribute("className"))//在IE7-浏览器下显示boxClass,在其他浏览器下null

　　　　[注意3]通过getAttribute()可以取得自定义特性，但根据HTML5规范自定义特性应加上data-前缀以便验证

<div id="box" index="1" data-name="a">123</div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.getAttribute("index"))//1
console.log(oBox.getAttribute("data-name"))//a
console.log(oBox.index);//IE7-显示1，其他浏览器显示undefined
console.log(oBox.dataset.name);//IE10-不支持dataset,出错，其他浏览器显示a
</script>

　　　　[注意4]IE8-浏览器不区分对象属性和元素特性。用对象属性的点方法可以获得自定义元素的特性。但对于元素特性中间存在中划线的情况，只能用中括号法来取得

<div id="box" data-name ="a" index = "1">123</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.index = 2;
//在IE8-浏览器下
console.log(oBox.dataName);//undefined
console.log(oBox["data-name"]);//a
console.log(oBox.index);//2
</script>

　　　　[注意5]有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。由于以下这些差别，只有在取得自定义特性值的情况下，才会使用getAttribute()

　　　　　　[a]第一类特性是style，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。

<div id="box" style="height: 100px; width: 100px;">123</div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.style);//CSS2Properties { height: "100px", width: "100px"}
//在IE7-浏览器下返回的是oBox.style所取得的对象值。
//[注意]属性的顺序与所写的顺序可以不一致，每个浏览器显示的顺序不一样
console.log(oBox.getAttribute("style"))//"height: 100px; width: 100px;"
</script>

　　　　　　[b]第二类特性是onclick这样的事件处理程序。当在元素上使用时，onclick特性中包含的是Javascript代码，如果通过getAttribute()访问，则会返回相应代码的字符串。而在访问onclick属性时，则会返回一个JavaScript函数(如果未在元素中指定相应特性，则返回null)

<div id="box" onclick = "alert(1)">123</div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.onclick);//function onclick(event){alert(1)}
console.log(oBox.getAttribute("onclick"));//"alert(1)"
</script>

　　【2】setAttribute()

　　　　这个方法接受两个参数:要设置的特性名和值，如果已经存在，则替换现有的值。如果特性不存在，setAttribute()则创建该属性并设置相应的值

<div id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.setAttribute("id","test");
/*注意获取oBox.id时并不会报错，因为oBox保存的是当时id为box的对象，也就是现在id为test的对象*/
console.log(oBox.id);//test
</script>

　　　　[注意1]通过setAttrbute()方法设置的特性名会统一转换成小写形式

<div id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.setAttribute("ABC","test");
console.log(oBox.getAttribute("ABC"));//test
console.log(oBox.getAttribute("abc"));//test
</script>

　　　　[注意2]为DOM元素添加一个自定义属性，该属性不会自动成为元素的特性

<div id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.color = "red";
console.log(oBox.getAttribute("color"));//IE8-浏览器返回red，其他浏览器返回null
</script>

　　　　[注意3]IE7-浏览器设置class、style、for、cellspacing、cellpadding、tabindex、readonly、maxlength、rowspan、colspan、usemap、frameborder、contnenteditable这13个特性没有任何效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.testClass{
    font-size: 30px;
}
</style>
</head>
<body>
<div id="box">123</div>
<script>
//IE7-浏览器下没有任何效果，其他浏览器出现红色背景及30px的文字大小
var oBox = document.getElementById(‘box‘);
oBox.setAttribute("class","testClass");
oBox.setAttribute("style","height: 100px; background: red;")
</script>
</body>
</html>

　　　　　　【解决】可以利用IE8-浏览器下对象属性和元素特性混淆的bug来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.testClass{
    font-size: 30px;
}
</style>
</head>
<body>
<div id="box">123</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.setAttribute("class","testClass");
oBox.setAttribute("style","height: 100px; background: red;");
//IE7下oBox.className的值为undefined
if(!oBox.className){
    oBox.setAttribute("className","testClass");
    oBox.style.setAttribute("cssText","height: 100px; background: red;");
}
</script>
</body>
</html>

　　【3】removeAttribute()

　　　　该方法用于彻底删除元素的特性，这个方法不仅会彻底删除元素的特性值，还会删除元素特性

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById(‘box‘);
console.log(oBox.getAttribute("id"));//box
oBox.removeAttribute("id");
console.log(oBox.getAttribute("id"));//null
</script>
时间： 2024-10-21 15:25:20

DOM特性节点ATTRIBUTE的相关文章

深入理解DOM节点类型第六篇——特性节点Attribute

× 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的一部分.本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType.nodeName.nodeValue分别是2.特性名称和特性值,其父节点parentNode是null [注意]关于特性节点是否存在子节点,各个浏览器表现不一致 <div id="box"&g

DOM元素的特性（Attribute）和属性（Property）

1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单介绍一下我的理解. 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计>书中翻译为“特性”和“属性”,以示区别. 简单理解,Attribute就是dom节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这

DOM Element节点类型详解

1.概况 Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名.子节点及特性的访问. Element 节点具有以下特征: nodeType 的值为 1 nodeName 的值为元素的标签名 nodeValue 的值为null parentNode 可能是 Document 或者 Element 其子节点可能是 Element.Text.Comment.ProcessingInstruction.CDATASection 或者 EntityReference 要访问元素的标

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

DOM 处理 节点

js 父节点: parentNode; 子节点: childNode firstChild; lastChild; function func(o) { //alert(o.parentNode.nextSibling.nextSibling.lengh); my=o.parentNode.parentNode.getElementsByTagName("p"); alert(my[2].firstChild.nodeValue); //注意firstChild } </scri

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

.Net的特性（attribute）

特性本质上是一个类,其为目标元素提供关联附加信息,并在运行期以反射的方式来获取附加信息:(attribute和.net framework 文件的元数据保存在一起,可以用来在运行时描述你的代码,或者在程序运行的时候影响应用程序的行为)所谓的定制特性就是为目标元素,可以是数据集,类,方法,属性,类似于注释,但是可以在运行期以反射的方式获得,定制特性主要应用在序列化,编译器指令,设计模式等方面: 目标元素包括:assembly   module   type  property   event  

DOM树节点和事件

一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点     文本节点,属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:     可以使用getElement系列方法,取到元素节点 .      1.查看元素节点      getElementById: 通过ID取到唯一节点.如果id重名,则id只能取到第一个      ge

dom操作节点之常用方法

DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名className): 通过class类名找到节点,返回的是一个集合3. document.getElementsByTagName (标签名):通过标签名找到节点,返回一个集合 标签名:如<a>\ <p>\ <div> ....4. document.getElementsByNam