js中標籤的獲取
阿新 • • 發佈:2020-07-15
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 和[] 這兩個只讀來獲取列表長度和具體元素