Web API 获取元素详解：从 getElementById 到七种选择器

Web API 中根据 ID 获取元素

1. 目标

掌握使用 document.getElementById() 方法通过 ID 获取页面元素。

在页面中绘制一个宽 200px、高 200px 的粉色盒子，并在控制台打印该元素对象。

2. 实现思路

• 绘制尺寸为 200px * 200px 的粉色盒子。
• 定义变量，保存通过 ID 获取到的 div 元素。
• 打印该变量以查看结果。

3. 代码实现

        // 定义变量 保存 根据id 获取到的div盒子
        var divEle = document.getElementById('timer');
        // 代码从上到下执行的  js 放最后 
        // divEle 是一个对象
        // console.log(typeof divEle);
        console.dir(divEle, 'divEle');
        // console.log(divEle);

4. 总结

• document：文档对象；getElementById('id值')：根据 ID 值获取页面元素。
• 获取到的元素是对象类型。
• JS 代码建议放置在 body 标签的最后。

补充：

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 里面所有元素。

到此这篇关于 webapi 根据 id 获取元素的实现思路的文章就介绍到这了，更多相关 webapi 获取元素内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！