JS--自定义属性的获取

在html的标签中自定义属性，使用**setAttribute(“自定义属性的名字”, “自定义属性的值”)设置
用getAttribute(“自定义属性的名字”)**获取自定义属性
.属性，点出来的是DOM树中的属性，在标签中不显示

removeAttribute(“属性的名字”)删除属性，可以是自定义属性也可以是系统自带属性

<ul id="uu">
	<!--在html标签中添加的自定义属性，如果想获取这个属性的值，需要使用getAttribute("自定义属性的名字")，才能获取这个属性的值-->
	<li scroe = "10">成绩1</li>
	<li scroe = "20">成绩2</li>
	<li scroe = "30">成绩3</li>
	<li scroe = "40">成绩4</li>
	<li scroe = "50">成绩5</li>
</ul>
<script>
var uuObj = document.getElementById("uu");
var list = uuObj.getElementsByTagName("li");
for(var i = 0; i < list.length; i++){
	list[i].onclick = function(){
		//alert(this.scroe);//undefined，获取不到<li>标签中的scroe，因为this.scroe获取的是DOM树中的scroe属性，但li标签中的scroe属性不在DOM树中
		alert(this.getAttribute("scroe"));
	}
}
</script>

<ul id="uu2">
	<li>年龄1</li>
	<li>年龄2</li>
	<li>年龄3</li>
	<li>年龄4</li>
	<li>年龄5</li>
	<li>年龄6</li>
</ul>
<script>
var list2 = document.getElementById("uu2").getElementsByTagName("li");
for(var i = 0; i < list2.length; i++){
	//先为每个li添加自定义属性
	//list2[i].age = (i + 1) * 10;//没有效果，因为此方式把自定义属性添加到了DOM树对象上，不在标签中
	list2[i].setAttribute("age", (i + 1) * 10);//此方法是把自定义属性添加到了标签中，不在DOM对象上
	
	list2[i].onclick = function(){
		//alert(this.age);//undefined，获取不到<li>标签中的age，因为this.age获取的是DOM树中的age属性，但上面设置的属性不在DOM树中
		alert(this.getAttribute("age"));//获取到了
	}
}
/*.出来的属性都是在DOM树中的*/
</script>

来源：CSDN

作者：Binglili0809

链接：https://blog.csdn.net/Binglili0809/article/details/104504499