DOM元素属性(Property)和特性(Attribute)的区别

386 1 年前
我们知道DOM的实现就是把一个HTML文档映射为一棵DOM树,而DOM树上的每个节点其实就是一个javascript对象。所以DOM元素属性和普通对象的属性一样,就是DOM对象这个javascript对象上的属性而已,我们可以直接在DOM对象上通过.或[]来获取和设置它们

我们知道DOM的实现就是把一个HTML文档映射为一棵DOM树,而DOM树上的每个节点其实就是一个javascript对象。所以DOM元素属性和普通对象的属性一样,就是DOM对象这个javascript对象上的属性而已,我们可以直接在DOM对象上通过.[]来获取和设置它们

DOM元素的属性(property)是该对象所拥有的属性,而特性(attribute)则是该元素在HTML中的所拥有的特性节点。property是对象属性,本身不操作特性节点,但可以覆盖HTML中的同名特性的效果,是js操作;attribute是DOM节点对象,只用于获取和设置HTML特性,是文本操作。

Property 属性

如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name=”value”)的形式存放在这个Object对象中的属性。通过.[]来进行设置、读取的属性,就跟Javascript里普通对象属性的读取差不多。

DOM有其默认的基本属性,而这些属性就是所谓的property,它们都会在初始化的时候再DOM对象上创建,如果在TAG对这些属性进行赋值,那么这些值就会作为初始值赋给DOM的同名property

DOM里的基本属性如果没有明确写出来,也都是有的,只是值为空

attribute 特性

attribute特性节点都是在HTML代码中可见的,它的值只能够是字符串;直接写在标签上的属性,可以通过setAttribute、getAttribute进行设置、读取。

<input id="in_1" value="1" sth="whatever">
var myElement = document.getElementById('in_1');
console.log(myElement.id);//"in_1"
console.log(myElement.value);//"1"
console.log(myElement.sth);//undefind,因为DOM基本属性里没有这个"sth"属性
console.log(myElement.className);//"",空字符串。DOM基本属性有className(也就是class)属性,但没有值
//每一个DOM都有attributes属性,它的类型是NamedNodeMap
console.log(myElement.attributes);//NamedNodeMap {0: id, 1: value, 2: sth, id: id, value: value, sth: sth, length: 3}

因为class是javascript的关键字,所以class这个属性名改用className

<input id="in_1" value="1" sth="whatever">
var myElement = document.getElementById('in_1');
console.log(myElement.getAttribute('id'));//in_1
console.log(myElement.getAttribute('class'))//null
console.log(myElement.getAttributeNode('sth').name);//sth
console.log(myElement.getAttributeNode('sth').value);//whatever
console.log(myElement.getAttributeNode('sth').nodeName);//sth
console.log(myElement.getAttributeNode('sth').nodeValue);//whatever
console.log(myElement.attributes.sth);//'sth="whatever"',它是一个Attr类型的对象,拥有NodeType、NodeName等属性

一些注意的问题:

  • attribute(特性),是我们赋予某个事物的特质或对象。
  • property(属性),是早已存在的不需要外界赋予的特质。
  • 对于一个inputvalue属性,myElement.value = new value,设置了一个新的值 ,但DOM节构没有变化,所以myElement.getAttribute("value")的值没有变成新值。如果用myElement.setAttribute('value','new value')设置了新值,DOM节构里也变成了新值,myElement.value的值也变成了新值
  • 对于一个href,myElement.href返回的都是绝对路径,那怕是用myElement.href = xxx设置的是相对路径,myElement.getAttribute('href')返回的是元素href属性的字符串直接值,
  • 对于一个元素的idclass等,propertyattribute是双向绑定
  • 对于一个inputdisabled,使用myElement.setAttribute('disabled', xxx);设置为任何值都会是禁用,因为这样设置了disabled的值都是一个字符串,变成boolean都为true。只能用myElement.disabled = false取消禁用,取消禁用后:myElement.getAttribute('disabled')nullmyElement.disabledfalse

操作 attribute 特性

操作特性的 DOM 方法主要有三个,分别是 getAttribute()setAttribute()removeAttribute()。这三 个方法可以针对任何特性使用,包括那些以 HTMLElement 类型属性的形式定义的特性。Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个 NamedNodeMapNamedNodeMap 对象拥有下列方法:

  • getNamedItem(name):返回 nodeName 属性等于 name 的节点;
  • removeNamedItem(name):从列表中移除 nodeName 属性等于 name 的节点;
  • setNamedItem(node):向列表中添加节点,以节点的 nodeName 属性为索引;
  • item(pos):返回位于数字 pos 位置处的节点。

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

var id = element.attributes.getNamedItem("id").nodeValue;
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someOtherId";
var oldAttr = element.attributes.removeNamedItem("id");
element.attributes.setNamedItem(newAttr);
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes["align"].value); //"left"
alert(element.getAttributeNode("align").value); //"left"
alert(element.getAttribute("align")); //"left"
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6