摘要:1,id選擇器,根據(jù)頁面元素id進(jìn)行選取document.getElementById();2,name選擇器,并不是所有的元素標(biāo)簽都存在name屬性,一般有表單form,表單內(nèi)部的元素,a標(biāo)簽,img標(biāo)簽等等,name選擇器獲取返回的對象為類數(shù)組,Nodelist,為對象集合。document.getElementsByName();因?yàn)榉祷氐氖且粋€(gè)元素的集合,所有會存在length屬性,有一個(gè)
1,id選擇器,根據(jù)頁面元素id進(jìn)行選取
document.getElementById();
2,name選擇器,并不是所有的元素標(biāo)簽都存在name屬性,一般有表單form,表單內(nèi)部的元素,a標(biāo)簽,img標(biāo)簽等等,name選擇器獲取返回的對象為類數(shù)組,Nodelist,為對象集合。
document.getElementsByName();
因?yàn)榉祷氐氖且粋€(gè)元素的集合,所有會存在length屬性,有一個(gè)item()的方法
3,根據(jù)標(biāo)簽名稱獲取對象,返回對象集合
document.getElementsByTagName();
因?yàn)榉祷氐氖且粋€(gè)元素的集合,所有會存在length屬性,有一個(gè)item()的方法
3,根據(jù)標(biāo)簽名稱獲取對象
4,根據(jù)Class屬性獲取元素,也是返回一個(gè)元
document.getElementsByClassName();
class支持多值
document.getElementsByClassName(class1 class2 class3);
5,根據(jù)css選擇器獲取元素,同時(shí)選擇頁面元素最簡單的方式就是用css選擇器
返回符合條件的第一個(gè)元素
document.querySelector();
返回符合條件的所有元素
document.querySelectorAll();
有item()方法
以上方法不僅可以在document對象上調(diào)用,也可以在元素上調(diào)用,一般是在父元素上調(diào)用。
6,標(biāo)簽名和name屬性選擇器的快捷方式
(1),images:獲取所有的<img>元素,返回對象集合
document.images
(2),forms:獲取到頁面所有的表單<form>,返回對象集合
document.forms
(3),links:獲取頁面所有的鏈接,返回對象集合
document.links
(4),body: 獲取<body>主體
document.body
(5),head,獲取<head>頭部,插入style屬性
let style = document.createElement('style') //創(chuàng)建style document.head.appendChild(style) //在<head>標(biāo)簽底部插入style屬性
(6),documentElement獲取<html>標(biāo)簽
document.documentElement
(7),doctype 獲取文檔類型
document.doctype
批改老師:天蓬老師批改時(shí)間:2019-01-13 09:45:42
老師總結(jié):總結(jié)的非常到位呀,知道嗎? 原生的js其實(shí)只支持二個(gè): document.getElementById();document.getElementsByTagName();
其它的都是擴(kuò)展的, 還有document.querySelector();和document.querySelectorAll(); 返回的是一個(gè)靜態(tài)的html集合, 不能實(shí)時(shí)反映頁面變化,如果在需要實(shí)時(shí)更新的場合千萬不要用,