DOM
DOM
五个常用DOM方法:getElementById、getElementsByTagName、getElemensByClassName、getAttribute、
setAttribute.
获取元素
有3种DOM方法可以获取元素节点,分别是通过元素ID、通过标签名字和通过类名字来获取。
1.getElementById
1 | alert( typeof document.getElementById( "purchases" )); |
2.getElementsByTagName
1 2 3 4 | alert( document.getElementsByTagName( "li" ).length); for ( var i=0;i<document.getElementsByTagName( "li" ).length;i++){ alert( typeof document.getElementsByTagName( "li" )[i]); } |
3.getElementsByClassName
1 2 3 4 | alert(document.getElementsByClassName( "sale" ).length); var sales=document.getElementsByClassName( "sale" ); var shopping=document.getElementById( "purchases" ); |
获取和设置属性
4.getAttribute
getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象调用。例如:可以与getElementsByTagName方法合用,获取每个<p>元素的title属性.
1 2 3 4 | var paras=document.getElementsByTagName( "p" ); for ( var i=0;i<paras.length;i++){ alert(paras[i].getAttribute( "title" )); } |
5.setAttribute
setAttribute()有点不同:它允许我们对属性节点的值做出修改。与getAttribute一样,setAttribute
也只能用于元素节点:
1 2 3 4 | var shopping =document.getElementById( "purchases" ); shopping.setAttribute( "title" , "a list of goods" ) alert(shopping.getAttribute( "title" )); |
PS:这五个方式是将要编写的许多DOM脚步的基石。
<style>
selector{
properor:value;
}
p{
color:yellow;
font-family:"arial",sans-serif;
font-size:1.2em;
}
body{
color:white;
background-color:black;
}
#purchases{
border:1px solid white;
background-color:#333;
color:#CCC;
padding:1em;
}
#purchases li{
font-weight:bold;
}
</style>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>sdfsf</li>
<li class="sale">sqwe dfsf</li>
<li class="sale important">wqqw sf</li>
</ul>
</body>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· Apifox不支持离线,Apipost可以!
· 历时 8 年,我冲上开源榜前 8 了!
· 零经验选手,Compose 一天开发一款小游戏!
· Trae 开发工具与使用技巧
· 通过 API 将Deepseek响应流式内容输出到前端