獲取dom元素的8種方法，及其案例

jsdom

1.什麼是dom？

dom 全稱是document object model 文字物件模型 簡稱dom元素

dom 就是html元素

2.注意事項

獲取dom元素的時候需要注意，dom元素是否初始化（是否已經存在

3.獲取dom的8種方法

1）4種動態方法

document.

getelementsbyclassname()
//通過class類名稱獲取元素，返回的是乙個集合
document.
getelementsbyname()
//通過元素的name屬性獲取元素，返回的是乙個集合
document.
getelementbytd()
//通過元素的id獲取，返回的是乙個物件
document.
getelementsbytagname()
//通過元素名稱獲取，返回的是乙個集合

document.

queryselector()
;//返回的是乙個單個物件
document.
queryselectorall()
;//返回的是乙個列表

document.body//獲取body

document.documentelement//獲取整個html

"buttoninfo"

class
="list" id=
"btn"
>按鈕<
/button>
"buttoninfo"
class
="list"
>按鈕<
/button>
"buttoninfo"
class
="list"
>按鈕<
/button>
"buttoninfo"
class
="list"
>按鈕<
/button>
var btn = document.
getelementsbyclassname
("list"
)//htmlcollection
console.
log(btn[0]
);console.
log(btn[1]
);console.
log(btn[2]
);var btnname = document.
getelementsbyname
("buttoninfo"
)//nodelist 集合
console.
log(btnname[0]
);console.
log(btnname[1]
);console.
log(btnname[2]
);var ele = document.
getelementsbytagname
("button");
//htmlcollection 集合
console.
log(ele[0]
);console.
log(ele[1]
);console.
log(ele[2]
);//用**新增乙個元素到網頁
var btnlist = document.
createelement
("button");
btnlist.name =
"buttoninfo"
;        btnlist.classname =
"list"
;        document.body.
(btnlist)
;        console.
log(btn.length)
;        console.
log(btnname.length)
;        console.
log(ele.length)
;// 方法裡面的引數呵css選擇器一樣
var btnq = document.
queryselector
("#btn");
console.
log(btnq)
;var btnc = document.
queryselector
(".list");
console.
log(btnc)
;var btnn = document.
queryselectorall
("buttoninfo");
console.
log(btnn)
;//還有兩個固定物件獲取 body
console.
log(document.body)
;//獲取整個html
console.
log(document.documentelement)
;

DOM獲取元素的幾種方法

dom根據id獲取元素 var div document.getelementbyid main console.log div 獲取到的資料型別 htmldivelement，物件都是有型別的 htmldivelement htmlelement element node eventtarget ...

原生JS獲取HTML DOM元素的8種方法

js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...

元素定位8種方法

doctype html html lang en head meta charset utf 8 title title title head body p id abc 海客談瀛洲，煙濤微茫信難求 p a name abd 天南地北雙飛客，老翅兒幾回寒暑 a br a href a br spa...