webapi根据id获取元素的实现思路

webapi根据id获取元素

1.目标

掌握document.getElementById() 根据id获取元素

在页面画出一个宽200 高200 粉色的盒子, 在控制台打印这个盒子

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获取元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论