DOM之获取元素总结

756 阅读1分钟

获取元素简单分为以下几种

  • 根据ID获取元素
  • 根据标签名获取元素
  • 根据类名获取元素
  • 根据指定选择器获取元素
  • 获取特殊的元素

根据ID获取元素:document.getElementById('');

02.jpg

04.jpg

通过Id成功拿到该元素,返回的是一个元素对象。


根据标签获取元素:document.getElementsByTagName('');

06.jpg

05.jpg

它返回的是带有指定标签名的对象集合,是个伪数组,所以想要操作里面的元素,需要遍历。

注意点:

  • 因为是复数,所以方法中元素单词是复数有s;
  • 如果页面中没有这个元素,返回的是空的伪数组的形式;
  • 如果页面中只有一个li,返回的还是伪数组形式;

根据类名获取元素:document.getElementsByClassName('');

07.jpg

H5新增方法,返回元素对象的集合,也是伪数组。


根据指定选择器获取:document.querySelector(''); document.querySelectorAll('');

10.jpg

11.jpg

通过CSS选择器(类名、Id)获取元素,H5新增。如果通过类名或Id方式获取,前面要加选择器符号‘.’‘#’

querySeleor: 返回指定选择器的第一个元素对象,如有多个只取第一个。 querySelorAll: 返回指定选择器的所有元素对象集合,伪数组形式。


获取特殊元素:body元素、html元素

document.body; 返回body元素对象。

document.html; 返回html元素对象

image.png

说到这里,顺便提一个除了log之外的另一个打印方法:console.dir()它可以打印我们返回的元素对象,更完全的查看里面含有的属性和方法,超赞!

在学习的过程中我觉得梳理和总结知识尤为重要,能让我们的知识更扎实,走得更远。

end...