web前端:JS---DOM---自定义属性引入和移除
编程小助手
2024-04-23 23:17
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现。
总结:在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
html标签中有没有什么自带的属性可以存储成绩的----没有
本身html标签没有这个属性,自己(程序员)添加的----自定义属性---为了存储一些数据
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>
ul{
list-style-type:none;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<liscore="60">张三的数学成绩</li>
<liscore="90">赵四的数学成绩</li>
<liscore="90">王五的数学成绩</li>
<liscore="80">唐七的数学成绩</li>
<liscore="50">宋八的数学成绩</li>
</ul>
<scriptclass="lazy" data-src="common.js"></script>
<script>
varlist=document.getElementsByTagName("li");
for(vari=0;i<list.length;i++){
list[i].onclick=function(){
//alert(this.score);//弹出undefined
alert(this.getAttribute("score"));
};
}
</script>
</body>
移除自定义属性:removeAttribute("属性的名字")
<inputtype="button"value="移除自定义属性"id="btn"/>
<divid="dv"score="80分"class="cls"></div>
<scriptclass="lazy" data-src="common.js"></script>
<script>
my$("btn").onclick=function(){
//my$("dv").removeAttribute("score");
//my$("dv").className="";
//也可以移除元素的自带的属性
my$("dv").removeAttribute("class");
};
</script>
要改变页面的某个东西,Javascript就需要获得对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341