一蹋艺、JS直接獲取HTML對(duì)象的方法
document.getElementById("id名稱");
document.getElementsByTagName("標(biāo)簽名");
document.getElementsByClassName("類名");
document.getElementsByName("表單子元素的name名字");
document.querySelector("各種合法CSS3選擇器");
document.querySelectorAll("各種合法CSS3選擇器");
二轻庆、根據(jù)DOM結(jié)構(gòu)獲取相關(guān)HTML節(jié)點(diǎn)的方法
一、查找元素的子節(jié)點(diǎn)
box.childNodes[i] 或 box.childNodes.item(i)
功能:獲取第i個(gè)子節(jié)點(diǎn),注意:文本節(jié)點(diǎn)也算數(shù)故河。
box.firstChild 獲取第一個(gè)子節(jié)點(diǎn)
box.firstElementChild 獲取第一個(gè)子元素節(jié)點(diǎn)
box.lastChild 獲取最后一個(gè)節(jié)點(diǎn)
box.lastElementChild 獲取最后一個(gè)子元素節(jié)點(diǎn)附迷。
ulObj.getElementsByTagName("li") 獲取ul下面所有l(wèi)i
二、查找祖先節(jié)點(diǎn)
obj.parentNode? ?? ???獲取obj的父節(jié)點(diǎn)
obj.parentNode.parentNode 獲取obj的父節(jié)的父節(jié)點(diǎn)
上面寫法后面可以繼續(xù).parentNode個(gè)數(shù)不限直到追溯到document節(jié)點(diǎn)為止麸折。
三锡凝、查找兄弟節(jié)點(diǎn)
box.nextSibling? ?? ?? ?返回下一個(gè)兄弟節(jié)點(diǎn)
box.nextElementSibling? ?? ???返回下一個(gè)兄弟元素節(jié)點(diǎn)
box.previousSibling? ?? ???返回上一個(gè)節(jié)點(diǎn)
box.previousElementSibling? ?? ???返回上一個(gè)元素節(jié)點(diǎn)