｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天 一、如何获取元素 DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

1.根据 ID 获取

2.根据标签名获取

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

4.特殊元素获取

1.根据ID获取 使用 getElementByld() 方法可以获取带ID的元素对象

doucument.getElementById('id名')

2.标签名获取法 （1）根据标签名获取(通过子元素) 根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

doucument.getElementsByTagName('标签名');

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

得到元素对象是动态的

返回的是获取过来元素对象的集合，以伪数组的形式存储

如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

• 知否知否，应是等你好久
• 知否知否，应是等你好久
• 知否知否，应是等你好久
• 知否知否，应是等你好久
• 知否知否，应是等你好久

（1）根据标签名获取（通过父元素） 还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

element.getElementsByTagName('标签名')

ol.getElementsByTagName('li');

注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己

3.通过H5新增方法获取 ①getElementsByClassName

根据类名返回元素对象合集

document.getElementsByClassName('类名');

②document.querySelector

根据指定选择器返回第一个元素对象

document.querySelector('选择器');

// 切记里面的选择器需要加符号

// 类选择器.box

// id选择器 #nav

var firstBox = document.querySelector('.box');

③document.querySelectorAll

根据指定选择器返回所有元素对象

document.querySelectorAll('选择器');

注意：

querySelector 和 querySelectorAll 里面的选择器需要加符号,比如: document.querySelector('#nav');

例子：

4.获取特殊元素 ①获取body元素

返回body元素对象

document.body;

②获取html元素

返回html元素对象

document.documentElement;