webapi根據(jù)id獲取元素

1.目標

掌握document.getElementById() 根據(jù)id獲取元素

在頁面畫出一個寬200 高200 粉色的盒子, 在控制臺打印這個盒子

2.實現(xiàn)思路

• 畫框 200px* 200px 粉色
• 定義變量 保存根據(jù)id獲取到這個div盒子
• 打印變量

3.代碼實現(xiàn)

        // 定義變量 保存 根據(jù)id 獲取到的div盒子
        var divEle = document.getElementById('timer');
        // 代碼從上到下執(zhí)行的  js 放最后 
        // divEle 是一個對象
        // console.log(typeof divEle);
        console.dir(divEle, 'divEle');
        // console.log(divEle);

4.總結(jié)

• document: 文檔對象 getElementById(‘id值’): 根據(jù)id的值獲取頁面的元素
• 獲取的元素是對象類型
• js代碼放在body最后

補充：

web API 中獲取元素的七種方式

1、id 獲?。篸ocument.getElementById（'id'） 通過id名獲取想要的元素，id不需要加 # 號，可以打印這個ID的所有屬性和方法

<div  id="time">星期六</div>
 var div = document.getElementById('time')
console.log(div)

console.dir(div) 也可以完成打印這個元素所有的屬性和方法。

2、標簽名獲?。篸ocument.getElementsByTagName('標簽名'）， 通過標簽名獲取想要的元素；返回的結(jié)果是偽數(shù)組，擁有偽數(shù)組的length等屬性； 不需要添加（#，.）符號

1）、可以通過索引號查找到你需要的元素；

2）、如果要打印出每一個li元素， 采用for循環(huán)遍歷 ，如果頁面上只有一個元素， 通過TagName獲取到的還是一個偽數(shù)組 、如果頁面上沒有這個元素，返回一個[ ]空的偽數(shù)組

3、類名獲?。篸ocument.getElementsByClassName('類名'） 通過類名獲取元素集合，返回的也是一個偽數(shù)組，不需要加（#，.）符號 返回的是獲取到的第一個元素 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('選擇器')

返回指定選擇器的所有元素對象集合，一堆，偽數(shù)組；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里面所有元素

到此這篇關(guān)于webapi根據(jù)id獲取元素的實現(xiàn)思路的文章就介紹到這了,更多相關(guān)webapi獲取元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論