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>

 


 

posted @   IT温故而知新  阅读(228)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
阅读排行:
· Apifox不支持离线,Apipost可以!
· 历时 8 年,我冲上开源榜前 8 了!
· 零经验选手,Compose 一天开发一款小游戏!
· Trae 开发工具与使用技巧
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示