1. 程式人生 > 實用技巧 >js中標籤的獲取

js中標籤的獲取

js中標籤元素的獲取有6中方式:document.getElementById() ,document.getElementsByTagName()
document.getElementsByName() , document.getElementsByClassName() ,document.querySelector()
document.querySelectorAll()

body中的標籤

    <div id="new" class="1 2 3">
        <div id="2"></div>
        <div id="2" class="3 2 1"></div>
    </div>
    <div id="1">
        <div id="2" class="3 2 1"></div>
        <div id="2"></div>
    </div>
    <div id="1" class="1 2 3"></div>
<div id="div0">
        <div class="div0 div1"></div>
        <div class="div1 div2"></div>
    </div>
         <div class="div0 div1"></div>
        <div class="div1 div2"></div>
<form action="#" method="GET" id="form0">
            <input type="text">
            <input type="password" name="password">
            <input type="radio" name="sex" value="man"><label>男</label>
            <input type="radio" name="sex" value="women"><label>女</label>
            <button type="submit">提交</button>
        </form>
        <form action="#" method="GET" id="form0">
            <input type="text">
            <input type="password" name="password">
            <input type="radio" name="sex" value="man"><label>男</label>
            <input type="radio" name="sex" value="women"><label>女</label>
            <button type="submit">提交</button>
</form>

獲取方法:

1.document.getElementById() 根據id名字獲取

var s=document.getElementById("1");//即使多個元素id重名,但是隻能獲取第一個 返回該元素
 console.log(s);
//只能針對document

2.document.getElementsByTagName() 根據標籤名字獲取

 var s=document.getElementsByTagName("div"); // 返回所有div組成的列表(形似陣列,但不能使用陣列方法)
 console.log(s); //但是可以使用  length  和[] 這兩個只讀來獲取列表長度和具體元素
// 針對任何標籤

3.document.getElementsByClassName() 根據calssname來獲取

var s=document.getElementsByClassName("2")//返回所有div組成的列表(形似陣列,但不能使用陣列方法)
console.log(s);     //但是可以使用  length  和[] 這兩個只讀來獲取列表長度和具體元素
//只能針對document

4.document.getElementsByName() 通過name屬性獲取,也就是表單控制元件 ,其他標籤頁可以設定name屬性,但是不是標籤的原生
屬性,所以不考慮

var list=document.getElementsByName("sex"); //返回所有div組成的列表(形似陣列,但不能使用陣列方法)
console.log(list)      //除了length和[index]索引,還支援forEach遍歷
//針對document         只能獲取form表單的控制元件和XML的節點

5.document.querySelector() 根據所有的選擇器獲取 ,但是隻能獲取第一個 返回一個標籤

var div=document.querySelector("#div0");   //id查詢
var div=document.querySelector(".div1");   //classname查詢
var div=document.querySelector("[type=text]")   //type屬性查詢
//針對任何標籤

6.document.querySelectorAll() 返回標籤列表

var nodeList=var div=document.querySelector("#div0"); //id查詢 獲取所有id是div0的標籤
console.log(nodeList); //但是可以使用  length  和[] 這兩個只讀來獲取列表長度和具體元素