区分元素特性属性和对象属性属性

定义

元素特性属性是指HTML元素标签的特性

下面的id、类、标题、一个都是特性,其中一个叫做自定义特性

 & lt; div  id=癷d1”,类=癱lass1, title=皌itle1”, a=癮1”祝辞& lt;/div>

对象属性财产是指元素节点的属性

下面的id、标题、b都是属性,其中b叫做自定义属性

 & lt; div  id=安馐浴弊４? lt;/div> & lt; script> test.id =, id2”;
　　时间=test.title “title2”;
　　test.b =, b2, & lt;/script>

id、标题等既是属性,也是特性。修改属性,其对应的特性会发生改变;修改特性,属性也会改变

【1】修改元素特性(以标题为例)

 & lt; div  id=安馐浴?title=' 123 '在测试内容& lt;/div> & lt; script> console.log (test.title);//123 document.onclick =,函数(){
　　,,,test.setAttribute('标题',' 456 ');
　　,,,console.log (test.title);//456,,,,} & lt;/script>

【2】修改对象属性

 & lt; div  id=安馐浴?title=' 123 '在测试内容& lt;/div> & lt; script> console.log (test.getAttribute('标题'));//123 document.onclick =,函数(){
　　,,,test.title =,“456”;
　　,,,console.log (test.getAttribute('标题'));//456,,,,}& lt;/script>

例外

类和这两个元素特性是例外,因为类和是保留字,无法直接在对象属性中使用,所以在对象属性中,类变成了类名,而对于变成了htmlFor

【1】班

 & lt; div  id=安馐浴?类=癱lass1”在测试内容& lt;/div> & lt; script> console.log (test.getAttribute(类));//癱lass1'console.log (test.className);//' class1'console.log (test.class);//undefined

【2】

 & lt; label  id=安馐浴?为=笆淙搿弊４? lt;/label> & lt; script> console.log (test.getAttribute(', '));//笔淙?console.log (test.htmlFor);//输入'console.log (test.for);//undefined

特殊

样式和onclick是两个特殊的特性,它们虽然有对应的属性名,但属性值与通过getAttribute()返回的值并不相同【1】

风格通过getAttribute()访问时,返回的风格特性值中包含的是CSS文本,而通过属性来访问它则会返回一个CSSStyleDeclaration对象

 & lt; div  id=安馐浴?在& lt;/div> & lt; script> console.log (test.getAttribute(“风格”));//的高度:100 px;宽度:,100 px;“//{0:,“高度”,1:,“宽度”,alignContent:,“”, alignItems:,“”, alignSelf:,“…} console.log (test.style);
　　console.log (typeof  test.style);//对象'console.log (test.style.height);//?00 px的& lt;/script>

【2】onclick

如果通过getAttribute()访问,会返回相应代码的字符串。而访问onclick属性时,会返回一个javascript函数

[注意]其他事件处理程序也类似

 & lt; div  id=安馐浴?onclick =,“警报(1)”的在测试内容& lt;/div> & lt; script>,,,, console.log (test.getAttribute (onclick));//警报(1)“console.log (test.onclick);//' function  onclick(事件),{警报(1)}的console.log (typeof  test.onclick);//昂? lt;/script>

[注意]如果通过对象属性设置onclick属性,则不会有对应的元素特性

 & lt; div  id=安馐浴钡脑诓馐阅谌? lt;/div> & lt; script> test.onclick =,函数(){
　　,,,提醒(1);
　　},,,,
　　console.log (test.getAttribute (onclick));//nullconsole.log (test.onclick);//癴unction  onclick(事件),{警报(1)}’console.log (typeof  test.onclick);//δ堋? lt;/script>

自定义

【1】自定义特性

自定义特性用来在HTML元素上绑定一些额外的信息。但是自定义特性无法在对象属性中有所体现

 & lt; div  id=安馐浴?指数=' 1 '祝辞& lt;/div> & lt; script> console.log (test.getAttribute(指数));//' 1 'console.log (test.index);//undefined ,,, & lt;/script>

HTML5新增了数据集属性数据集(规范的自定义特性),用于存储页面或应用程序的私有定制数据。数据集属性以“数据”为前缀,可以使用javascript中对象属性数据集访问数据- *的值

由于元素特性的值以“——”做间隔,在对象属性中将转换为首字母大写的形式

 data-index-one →,数据集。indexOne

所以,元素特性的值一定不要出现大写,否则对象属性会解释出错

[注意]IE10——浏览器不支持数据集

 & lt; div  id=安馐浴?data-index-one=?”祝辞& lt;/div> & lt; script> console.log (test.getAttribute (' data-index-one '));//' 1 'console.log(测试[' data-index-one ']);//undefinedconsole.log (test.dataset.indexOne);//' 1 ' & lt;/script> 区分元素特性属性和对象属性属性

定义

共有

例外

特殊

自定义