<!--[toc]-->

目前本人在学习JavaScript中WebAPI教学，本篇为学习笔记，本人所有笔记都同步在个人资源站点 - 笔记中，欢迎学习，任何意见问题请联系我，谢谢。

根据id获取

  • 使用 getElementById() 方法可以获取带有ID的元素对象
  • id大小写敏感，代表了所查找的元素的唯一ID
let ele = document.getElementById('main1');
console.log(ele);

返回的是一个对象

根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

let lis = document.getElementsByTagName('li');
console.log(lis)
// console.dir(lis)
for (let i = 0; i < lis.length; i++) {
    console.log(lis[i].textContent)
}

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

返回的方式需要通过遍历使用

如果页面中没有这个标签，则返回的是空的伪数组[]

  • 取ol中的li写法
  • let lis = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
console.log(lis)
// console.dir(lis)
for (let i = 0; i < lis.length; i++) {
    console.log(lis[i].textContent)
}

通过HTML5新增的方法获取

普通

使用 getElementsByClassName('类名') 的写法获取类名的标签

不通用 不兼容ie5678 写小程序 或 手机网页可以使用

let main = document.getElementsByClassName('main')
console.log(main)

返回伪数组的形式 存储的是对象

query选择器

返回指定选择器的第一个元素对象
let main = document.querySelector('.main')
console.log(main)

let nav = document.querySelector('#nav')
console.log(nav)

let li = document.querySelector('li')
console.log(li)

非常方便 ， 但是只返回查找到的第一个元素

queryall选择器

和querySelector不同 它返回的是所有对象伪数组
    let lis = document.querySelectorAll('li')
    console.log(lis)

特殊元素获取

获取body元素

    let bd = document.body
    console.log(bd)

获取html元素

    let hm = document.documentElement
    console.log(hm)