1.根據id獲取標籤元素
element.getelementbyid("元素id");
var box1=document.getelementbyid("box1"); //
獲取id為 box1 的元素
console.log(box1);
2.根據標籤名獲取標籤列表element.getelementsbytagname("標籤名");
獲取到的為乙個htmlcollection物件,裡面包含了所獲取的元素
3.根據classname獲取標籤列表
element.getelementsbyclassname("class屬性值");
var box1=document.getelementsbyclassname("box1"); //
獲取所有class屬性值為 box1 的元素
返回的也是乙個htmlcollection物件
4.根據選擇器獲取到第乙個找到的元素element.queryselector("選擇器");
<div>第乙個div
div>
<
div
class
="div0"
>第乙個classname為div0的元素
div>
<
div
id="diva"
>
<
div
class
="div0"
>id為diva下的classname為div0的元素
div>
div>
<
div
id="div1"
>id為div1的元素
div>
<
input
type
="password"
>
var div=document.queryselector("div"); //
獲取第乙個div元素
console.log(div);
var div1=document.queryselector("#div1"); //
獲取id為div1的元素
console.log(div1);
var div0=document.queryselector(".div0"); //
獲取 第乙個classname為div0的元素
console.log(div0);
var divadiv0=document.queryselector("#diva>.div0");//
獲取id為diva的元素下的 classname為div0的元素
console.log(divadiv0);
var ps=document.queryselector("[type=password]"); //
獲取第乙個 type屬性為password的元素
5.根據選擇器獲取到所有的元素element.queryselectorall("選擇");
<
div>第乙個div
div>
<
div
class
="div0"
>第乙個classname為div0的元素
div>
<
div
id="diva"
>
<
div
class
="div0"
>id為diva下的classname為div0的元素
div>
div>
<
div
id="div1"
>id為div1的元素
div>
<
input
type
="password"
>
var div=document.queryselectorall("div"); //
獲取所有div
返回的是乙個nodelist
原生JS獲取HTML DOM元素
通過id獲取 getelementbyid document.getelementbyid id 通過name屬性 getelementsbyname document.getelementsbyname name 通過標籤名 getelementsbytagname document.getele...
JS獲取HTML DOM元素的方法
一 js獲取dom元素的方法 8種 1 通過id獲取 getelementbyid 2 通過name屬性 getelementsbyname 3 通過標籤名 getelementsbytagname 4 通過類名 getelementsbyclassname 5 獲取html的方法 document...
原生JS獲取HTML DOM元素的8種方法
js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...