查一下英语单词解释, 两个都可以表示属性. 但 attribute 倾向于解释为特质, 而 property 倾向于解释私有的. 这个 property 的私有解释可以更方便我们下面的理解.
第一部分: 区别点
第一点:
特性 attribute 主要是面向 html 元素来理解的, 所以说主要是表现在 HTML 文件中, 写在元素开始标签内. 特性在 CSS 中的表现常被用来作选择器
属性 property 主要是面向 DOM 节点对象来理解的, 作为对象的私有属性, 不对外显示的. 属性在 CSS 中表现就是 { } 内的内容.
- <!DOCTYPE <!DOCTYPE html>
- <html>
- <head>
- <title>Document Example</title>
- <style>
- #myId{
- font-size: 16px;
- /* 这里的名值对是属性 */
- }
- </style>
- </head>
- <body>
- <div>
- <p id= "myId" class="myClass" data-zdy="name" style="color:red;">Text</p>
- <!-- 这里标签内的名值对都是特性 -->
- </div>
- </body>
- </html>
第二点:
在引擎渲染 HTML 结构成 DOM 树状模型的时候, HTML 元素中公认的标准特性 (非自定义的特性) 会被添加 DOM 节点对象的属性中, 并且是一对一映射, 任何一方的改变都会影响到另一方. 所以对 HTML 元素标准特性的读写都可以通过元素对象的属性方式进行操作, 即点. 和[].
<script>
var node = document.getElementsByTagName("p")[0];
node.id = myNewId // 标签内的元素特性 ID, 一对一映射到 DOM 里的 P 对象里, 通过对象属性的获取方式读写元素的特性名
console.log(node.id); // 对象里的属性改变, 浏览器视图中 DOM 树中 p 节点特性值也改变
</script>
在引擎渲染 HTML 结构成 DOM 树状模型的时候, HTML 元素中的特性会作为元素的 Attr 属性节点被保存在对应 DOM 元素节点对象的 attribute 属性的 NamedNodeMap 属性对象中, 包括自定义特性. 但自定义特性不被显示在 DOM 渲染的树中. 可以通过元素的 attribute 属性对象访问属性节点, 就是访问元素特性.(JS 高程 p266 p276 页)
<script>
var node = document.getElementsByTagName("div")[0];
console.log(node.childNodes);
//p 标签里的 id/class / 标签特性作为 DOM 树中的 Atrr 节点 , 但 style 作为特殊性质和自定义特性不能渲染成特性节点
var p = document.getElementsByTagName("p")[0];
console.log(p.attributes["id"]); // 通过 p 对象的 attributes 属性对象读取标准特性节点
console.log(p.attributes["data-zdy"]); // 通过 p 对象的 attributes 属性对象读取自定义节点, 写全拼, 包括 data- 返回节点字符串
console.log(p.attributes["data-zdy"].value); // 通过 p 对象的 attributes 属性对象读取自定义节点
console.log(p.attributes["data-zdy"].nodeValue); // 通过 p 对象的 attributes 属性对象读取自定义节点
console.log(p.dataset); // 通过自定义属性专有的方法读取自定义特性, 返回 DOMStringMap 对象
console.log(p.dataset.zdy); // 通过自定义属性专有的方法读取自定义特性, 不包括 data-
</script>
第三点:
特性在 DOM 中可以通过 Attr 节点方式访问: ele.getAttributeNode( ).value/nodeValue
在 DOM 元素对象也定义了专属的方法对特性进行读写: getAttribute()/setAttribute()/removeAttribute() P264
<script>
var node = document.getElementsByTagName("p")[0];
console.log(node.getAttributeNode("id"));// 使用 Attr 节点的方法获取 id
console.log(node.getAttributeNode("id").nodeValue); // 使用 Attr 节点的方法读取节点值
console.log(node.getAttribute("class")); // 读取 calss 的值
node.removeAttribute("class"); // 删除 class
console.log(node.getAttribute("class")); // 再读取 class 返回 null
</script>
第四点:
特性和属性都可以自定义, 自定义的特性和自定义的属性不能在 DOM 结构中体现, 只能通过对象自身调用.
HTML5 规定可以为元素添加非标准的特性, 即自定义特性, 但是要求添加 data - 前缀.
可以手动在 HTML 元素开始标签内添加, 也可以在 JS 代码中通过元素 dataset 属性来读写自定义属性.
通过 dataset 属性读写时属性名时不需要加 data - 前缀. 但是这样自定义的属性通过对象方法 get/set/removeAttribute 读写时需要加上 data-, 用全称表示 (JS 高程 p293 页)
(例子见上面第二点第二条)
第二部分: 标准特性
公认的标准元素特性没几个, 主要有:
所有元素都有的特性: id / class / title / lang / dir / style / onclick
表单元素专有的部分特性: type / name / value 等
有两类特殊的特性, 它们虽然在 DOM 对象中也有映射对应的属性名, 但是通过特性专属的方式 getAttribute()和对象属性点. 或 [] 操作返回的值是不一样的.
style 用于 CSS 方式为元素指定样式, 通过 getAttribute()返回的是整个 CSS 文本字符串, 而通过对象 ele.style 返回的包含对象 css 样式的 CSSStyleDeclaration 对象. 但映射关系成立, 仍然可以通过 setAttribute("style","值")来设置修改元素样式
<script>
var node = document.getElementsByTagName("p")[0];
console.log(node.style); // 读取 style 特性, 返回的是 CSSStyleDeclaration 对象
console.log(node.getAttribute("style")); // 返回 style 样式的字符串文本
node.setAttribute("style","color:#000"); // 通过对象特性修改字体颜色可以有映射关系
console.log(node.attributes["style"].value); // 对象方法修改字体行内样式, 体现在元素节点特性也映射改变
node.style.color = "#ccc"; // 对象属性方式修改行内样式
console.log(node.attributes["style"].value); // 对象属性修改字体行内样式, 体现在元素节点特性也映射改变
</script>
onclick 属性也是一样, 当用 getAttribute("onclick")读取时, 返回的整段 js 代码字符串, 而通过对象属性 ele.onclick 返回是 js 函数
第二部分: 操作特性
所以当我们平常操作时, 读写元素属性时, 先区分下到底是读写元素特性还是对象属性, 以便选择对应的操作代码方式
读写一个元素的特性:
W3C 规范的已有特性节点访问方式:
ele.attritubes["特性名"].value 或. nodeVlue 写入: = "特性值"
如果新增特性:
- var newAttr = document.createAttribute("myAttr") // 创建新的特性节点:
- newAttr.value = "newValue" // 新节点赋值
- ele.setAttributeNode(newAttr) // 对元素设置新特性节点
但一般不用上面的繁琐的方法, 常用下面的简单操作:
1, 对象的特性操作方法:
读: ele.getAttribute("attrName")
写: ele.setAttribute("attrName","value")
删: ele.removeAttribute("attrName")
2, 作为对象属性的操作方法: ele.attrName ele["attrName"]
3, 如果是自定义属性, 也可以是:
读: ele.dataset.attrName 写: ele.dataset.attrName = "value"
很多教材上并没有严格区分特性和属性, 只是在javascript 高级程序设计里有区分这两个概念, 但里面也提到一句 "所有特性都是属性", 所以在平时并不需要严格去区分它们.
我也只是在 JS 学习中, 对如何读写元素样式的很多方法上容易搞蒙圈, 所以就理解这两个概念, 可以很好的区分读写样式的一些方法, 思路会清晰很多.
元素 CSS 操作的样式基本都是 DOM 对象的属性, 在 JS 中只通过一种方式来读写操作, 就是全通过 style 对象. 在渲染过程中 style 特性会转变成元素的 style 属性, 这是一个对象属性, 拥有自己操作样式的属性和方法. 比如
行内样式的属性直接通过 style 对象的点. 和[ ] 操作即可, 也可以用 style 对象的方法: ele.style.cssText/item(index)/getPropertyValue()/setProperty(name,value)/removeProperty().
在内嵌和外部样式中, 获取到样式表目标样式表>样式规则>具体样式: stylesheet[ i ].cssRule[ i ].style 的各种操作.
总结:
JS 中行内元素的特性读写操作: 1, 通过元素对象的自身的属性方法读写; 2, 通过 DOM 中特性节点读写 3, 自定义特性专属的方法 dataset
JS 中对象属性的新式读写操作: style 对象的属性和方法.
来源: https://www.cnblogs.com/webxu20180730/p/9532442.html