web API 中获取元素的七种方式:

1、id 获取:document.getElementById('id') 通过id名获取想要的元素,id不需要加 # 号,可以打印这个ID的所有属性和方法

星期六

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

你可能感兴趣的:(前端,javascript,html)