JavaScript 几种元素选择器1、window.1、window.使用 window.let node = win

5、querySelector() 和 querySelectorAll() 方法

1、window.id 方法

使用 window.id 或 id ，可以直接获取页面中为指定 id 的元素：

<div id = "box">盒子</div>
<script>
    let node = window.box;
    let node2 = box;
</script>

注意：这种方式不规范，在工作中最好使用下几种方式，自己写 demo 的使用可以使用这种方式，因为它很方便。

2、getElementById() 方法

使用 getElementById() 方法可以准确获取文档中指定 id 元素：

<div id = "box">盒子</div>
<script>
    var box = document.getElementById("box");    //获取指定盒子的引用
    var info = "nodeName:" + box.nodeName;       //获取该节点的名称
    info += "、nodeType:" + box.nodeType;        //获取该节点的类型
    info += "、parentNode:" + box.parentNode.nodeName;//获取该节点的父节点名称
    info += "、childNodes:" + box.childNodes[0].nodeName;//获取该节点的子节点名称
    alert(info);    //显示提示信息：nodeName:DIV、nodeType:1、parentNode:BODY、childNodes:#text
</script>

3、getElementsByTagName() 方法

使用 getElementsByTagName() 方法可以获取指定标签名的所有元素（集合）。使用 length 属性可以获取集合中包含元素的个数，利用下标可以访问其中某个元素对象。

var p = document.getElementsByTagName ("p");    //获取p元素的所有引用
for(var i=0;i<p.length;i++){             //遍历p数据集合
    p[i].setAttribute("class","red");    //为每个p元素定义red类样式
}

4、getElementsByClassName() 方法

使用 getElementsByClassName() 可以获取指定类名的元素（集合），该方法接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，方法返回带有指定类的所有元素的 NodeList。

（1） 使用 document.getElementsByClassName（"red"）方法选择文档中所有包含 red 类的元素。

<div class="red">红盒子</div>
<div class="blue red">蓝盒子</div>
<diy class="green red">绿盒子</div>
<script>
    var divs = document.getElementsByClassName("red");
    for(var i=0;i<divs.length;i++){
        console.log(divs[i].innerHTML);
    }
</script>

（2） 使用document.getElementByld（"box"）方法先获取 <div id="box">，然后在它下面使用 getElementsByClassName（"blue red"）选择同时包含 red 和 blue 类的元素。

<div id="box">
    <div class="blue red green">blue red green</div>
</div>
<div class="blue red black">blue red black</div>
<script>
    var divs = document.getElementById("box").getElementsByClassName("blue red");
    for(var i=0;i<divs.length;i++){
        console.log(divs[i].innerHTML);
    }
</Seript>

在 document 对象上调用 getElementsByClassName() 会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。

5、querySelector() 和 querySelectorAll() 方法

Selectors API 是由 W3C 发起指制定的一个标准，致力于让浏览器原生支持 CSS 查询。DOM API 模块核心是两个方法：querySelector() 和 querySelectorAll() 方法，这两个方法能够根据 CSS 选择器范围，便捷定位文档中的指定元素。

querySelector() 和 querySelectorAll() 方法的参数必须是符合CSS选择器规范的字符串，不同的是 querySelector() 方法返回的是一个元素对象，querySelectorAll() 方法返回的一个元素集合。

<div class="content">
    <ul>
        <li>首页</li>
        <li class="red">财经</li>
        <li class="blue">娱乐</li>
        <li class="red">时尚</li>
        <li class="blue">互联网</li>
    </ul>
</div>
<script>
    document.querySelector(".content ul li");   //获得第一个li元素
    document.querySelectorAll(".content ul li");//获得所有li元素
    document.querySelectorAll("li.red");        //获得所有class为red的li元素
</script>

在文档中一些 li 元素的 class 名称是 red，另一些 class 名称是 blue，可用 querySelectorAll() 方法一次性获得这两类节点

var lis = document.querySelectorAll("li.red,li.blue");

在 Selectors API2 版本规范中，为 Element 类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。目前浏览器对其支持不是很好。

6、其它几种元素选择器

/*获取html元素*/               /*获取head元素*/          /*获取body元素*/        //获取窗口（窗口不是元素）
document.documentElement      document.head             document.body           window

document.all   //获取所有元素 — 它是一个falsy值

//可以用改属性来判断当前浏览器是否为 ie
if(document.all){
    console.log('ie')
}else{
    console.log('other')
}