原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

1、原生JS元素属性操作方式

原生JS进行元素属性操作时,一般有两种方式:

1、获取和设置标签中的属性

语法是:

1.获取标签属性的属性值:节点对象.getAttribute("属性名")

2.给标签设置新的属性名称和属性值:节点对象. setAttribute("属性名",属性值);

3.节点对象.removeAttribute(“属性名”):根据属性名删除属性值

2、获取和设置对象中的属性值

语法是:

 对象.属性名:获取属性值

 对象.属性名=属性值;根据对象的属性名设置属性值

    在实际操作时我们可以发现,只要在HTML标签中出现的属性(哪怕是自定义创建的,而不是默认的基本属性),通过节点对象.getAttribute("属性名")都可以获得的到,而通过节点对象.属性名能获取到标签默认的基本属性值,但对于自定义创建的属性获取不到对应的属性值,获取到的只是undefined。

    这是因为这两个“属性”是不一样的,一般意义上,我们将方法一中获取和设置标签中的属性称为attribute,便于区分我们就称之为特性;方法二中获取和设置对象中的属性称为property,它是DOM中的属性,便于区分我们称之为属性

2、property和attribute的区别和特点

我们便于区分:

property:属性

attribute:特性

​ 区分:

property是DOM中的属性,是JavaScript里的对象属性;

attribute是HTML标签上的特性,它的值只能够是字符串;

对属性Property可以赋任何类型的值,而对特性Attribute只能赋值字符串

    常用的Attribute(标签默认的那些基本属性),例如id、class、title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待,不能通过DOM对象正常取值和赋值。

举例说明

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script type="text/javascript">
	window.onload = function(){
		var btn04=document.getElementById("btn04");
		btn04.onclick=function(){
            //获取id=username的节点对象
			var username = document.getElementById("username");
			
			//获取id=username元素节点对象中的name属性值
			var uname1=username.name;
            console.log("对象中的默认属性的属性值:"+uname1)
			
            //获取id=username标签中name的属性值
			var uname2=username.getAttribute("name");
            console.log("标签中的默认属性的属性值:"+uname2)
			
            //获取id=username元素节点对象中的name2属性值
            var uname3=username.name2;
            console.log("对象中的自定义属性的属性值:"+uname3)
			
            //获取id=username标签中name2的属性值
			var uname4=username.getAttribute("name2");
            console.log("标签中的自定义属性的属性值:"+uname4)
            
		};
	}
</script>
</head>
<body>
	<h1>dom_元素属性操作</h1>
    <input type="text" name="name" name2="name2" id="username" value="abcde"/>
    <br/>
    <button id="btn04">属性值比较</button>
</body>
</html>

页面演示:
原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

点击属性比较按钮,控制台输出结果:

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

    可以看到非DOM标签默认的属性,通过DOM对象.属性名获取到的是undefined,不能正常获取到结果。

    代码调试,我们可以发现,对于id为username的节点对象(input标签对象),它的部分property内容如下:
原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

    从中我们可以找到type、id、name、value等属性和对应的属性值,但找不到自定义的属性name2和自定义的属性值。

    那自定义的”name2“去哪里了呢?在节点对象的attributes属性里可以看到如下:

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

    "name2"被放在了attributes这个对象里,这个对象按顺序记录了我们在标签中定义的属性和属性的数量。

    可以发现,标签中的属性,“id”、“name”、”value“会在username这个节点对象上创建,而“name2”不会被创建。

    这是由于,每一个DOM对象都会有它默认的基本属性,而在创建的时候,它只会创建这些基本属性,我们在标签中自定义的属性是不会直接放到DOM中的。

    从存储位置上我们可以看出,attributes 属性是属于property属性的一个子集,它保存了HTML标签上定义属性。打印attribute属性不会直接得到对象的值,而是获取一个包含属性名和值的字符串。

attribute和property特点:

1、property能够从attribute中得到同步;
2、attribute不会同步property上的值;
3、attribute和property之间的数据绑定是单向的,attribute->property;
4、更改property和attribute上的任意值,都会将更新反映到HTML页面中;

3、总结

1、理论理解

    只要是DOM标签中出现的属性(html代码有的),都是Attribute;那些默认特性(id、class、title等),会被转化为Property,但是自定义的Attribute,不会被转化为Property.

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

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

2、存储理解

    DOM的属性都存放在节点对象中,DOM默认的基本属性直接存放在节点对象的Property中,自定义的属性存放在节点对象Property的子集attributes中。

    子集attributes(DOM对象的attributes属性)存放了HTML标签中定义的所有属性和值。

注意:

attributes和attribute要分清:
(1)attributes是property的一个子集,是一个集合;
(2)attribute指的是标签的属性

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

原生JS在进行元素属性操作时,标签中的属性和对象中的属性不是同一个属性是什么意思?

上一篇:vue-property-decorator


下一篇:如何避免Manager应用被人利用