JS獲取HTML DOM元素的方法

1.根據id獲取標籤元素

element.getelementbyid("元素id");

var box1=document.getelementbyid("box1");  //

獲取id為 box1 的元素
console.log(box1); 

2.根據標籤名獲取標籤列表

獲取到的為乙個htmlcollection物件,裡面包含了所獲取的元素

3.根據classname獲取標籤列表

element.getelementsbyclassname("class屬性值");

var box1=document.getelementsbyclassname("box1"); //

獲取所有class屬性值為 box1 的元素
返回的也是乙個htmlcollection物件

4.根據選擇器獲取到第乙個找到的元素

<

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 通過選擇...