js中的DOM-1-获取元素(初学)

一、DOM获取元素

DOM在实际开发中主要用来操作元素
获取页面中的元素方法:

  1. 根据 ID 获取
  2. 根据标签名获取
  3. 通过 HTML5 新增的方法获取
  4. 特殊元素获取

1.根据 ID 获取 :使用getElementById()方法获取元素对象

var element = ducument.getElementById('id名');
参数:

  • element 是一个 Element对象。如果当前文档中拥有特定ID的元素不存在,则返回null
  • id是大小写敏感的字符串,代表了所要查找的元素的唯一ID

返回值:

  1. 返回一个匹配到ID 的 DOM Element 对象。
  2. 若在当前的 Document 下没有找到,则返回null

 2.根据标签名获取:使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
                                                  (以伪数组的形式存储)

var element = ducument.getElementByTagName(‘标签名’);

注意:

  1. 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
  2. 得到元素对象时动态的
  3. 如果页面中只有一个li,则返回的还是一伪数组的形式
  4. 如果页面中没有这个元素,则返回的是空的伪数组的形式

2.2根据标签名还可以获取某个元素(父元素)内部所有指定标签名的子元素

                     ()                                          (
console.log(element.getElementByTagName(‘标签名’));
父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己

 3.通过 HTML5 新增的方法获取

document.getElementByClassName('类名'); 根据类名返回元素对象集合
document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');返回指定选择器的所有元素对象集合

4.获取特殊元素(body、html)

1.获取body元素
document.body  返回body元素对象

2.获取html元素
document.documentElement   返回html元素对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值