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  和[] 这两个只读来获取列表长度和具体元素
//返回nodelist 可以用forEach遍历

总结:

1.document.getElementsByClassName() 支持任何标签获取 ，别的都是document
2.document.querySelectorAll() document.getElementsByName() 返回nodelist,支持forEach遍历
3.第一点和第二点所示的三种方法，返回列表