web API 中获取元素的七种方式:

1、id 获取:document.getElementById('id') 通过id名获取想要的元素,id不需要加 # 号,可以打印这个ID的所有属性和方法

<div  id="time">星期六</div>

 var div = document.getElementById('time')

console.log(div)

console.dir(div) 也可以完成打印这个元素所有的属性和方法。

2、标签名获取:document.getElementsByTagName('标签名'), 通过标签名获取想要的元素;返回的结果是伪数组,拥有伪数组的length等属性; 不需要添加(#,.)符号

1)、可以通过索引号查找到你需要的元素;

2)、如果要打印出每一个li元素, 采用for循环遍历 ,如果页面上只有一个元素, 通过TagName获取到的还是一个伪数组 、如果页面上没有这个元素,返回一个[ ]空的伪数组

3、类名获取:document.getElementsByClassName('类名') 通过类名获取元素集合,返回的也是一个伪数组,不需要加(#,.)符号 返回的是获取到的第一个元素 var boxs = document.getElementsByClassName('box') console.log(boxs);

4、通过选择器获取某一个元素:document.querySelector('选择器') id类名要加(# .),返回的是指定元素的第一个元素; var p = document.querySelector('.box') // 类名 var p = document.querySelector('#nav') //id var p = document.querySelector('li') //标签

5、通过选择器获取所有元素:document.querySelectorAll('选择器')

返回指定选择器的所有元素对象集合,一堆,伪数组;id类名要加(# .)

var p = document.querySelector('.box')   // 类名

var p = document.querySelector('#nav')  // id

 var p = document.querySelector('li')    // 标签

如果要找到某一父级元素中的子标签,可以采用后代选择器或者获取元素方式拼接的方法:

1、简洁写法:(后代选择器) var lis4 = document.querySelectorAll('#nav li')

2、元素拼接: var nav = document.getElementById('nav')

var lis= document.querySelectorAll('li') console.log(lis)

6、获取body元素:body=document.body

直接获取body里面的元素,作用于body里的所有元素

7.获取html元素:html=document.documentElement

直接获取HTML里面的元素,作用于html里面所有元素

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值