[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取

[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取

1.根据 ID 获取[.getElementById( )]

[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图
注意:

  • 原理上script是要写在标签下面,但是有方法可以解决,将script提到上方
  • 参数 id是大小写敏感的字符串,所以需要加引号,如('time')
  • 返回的是一个元素对象,如timer是一个对象

2.根据标签名获取[.getElementsByTagName( )]

注意element是复数,需要加s

(1)
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图1
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图2
注意:

  • 如果页面中只有一个 li ,返回的还是伪数组的形式
  • 如果页面中没有这个元素返回的空的伪数组形式

(2)

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

element.getElementsByTagName('标签名')

注意:父元素必须是 单个对象(必须指明是哪个对象),获取的时候不包括自己
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图3
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图4
注意:

  • 变量ol是一个伪数组,里面可能包含多个ol,所以在使用.getElementsByTagName( )时,需要指明是数组中的哪一个,如 ol[0].getElementsByTagName('li')表示的是伪数组ol中的第一个ol,即代码中的第一个ol中的所有 li

(3)

如果觉得第(2)种方法较为繁琐,可以直接给父元素取个id名
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图5
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图6

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

(1)document.getElementsByClassName('类名'); // 根据类名返回元素对象集合

(2)document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

(3)document.querySelectorAll('选择器') // 根据指定选择器返回
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图7
[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取插图8

不考虑兼容性的话推荐使用后面两种

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

1.获取body元素、
document.body //返回body元素对象
2.获取html元素
document.documentElement // 返回html元素对象

文章来源于互联网:[DOM]获取元素:根据ID、标签名、HTML5新增的方法、特殊元素获取

THE END
分享
二维码