JavaScript获取元素方法

方法一:根据ID获取

使用getElementById() 返回匹配id的一个元素

<div id="time">2019-9-9</div>
<script>

var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);
</script>

在代码中，我们通过id=“time”获取了div这个元素

注意：

1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写在标签下面

2.get 获得 element 元素 by 通过 驼峰命名法

3.参数id 是大小写敏感的字符串

4.返回的是一个元素对象

方法二：根据标签名获取

使用getElementsByTagName（）返回匹配标签名的元素

<ul>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
       
        
    </ol>
    <script>
        // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储的
    var lis=document.getElementsByTagName('li');
     console.log(lis);
     console.log(lis[0]);
    //  2.我们想要打印里面的数据，我们可以用遍历数组
    for(i=0;i<lis.length;i++){
        console.log(lis[i]);
    }
    // 得到的元素对象是动态的
    // 3.如果页面·中只有一个li返回的还是伪数组形式
    // 4.如果页面中没有这个元素返回的是空伪数组形式
    // 5.element.getElementsTagName('标签名')；父元素必须是指定的单个元素
    //    父元素.getElementsTagName('标签名')；
    // var ol = document.getElementsByTagName('ol');
    // console.log(ol[0].getElementsByTagName('li'));

var ol=document.getElementById('ol');//获取的是ol这个元素
console.log(ol.getElementsByTagName('li'));//通过ol获取ol下面的li元素
    </script>

方法三：getElementsByClassName()根据类名获得某些元素集合

 var boxs = document.getElementsByClassName('box');
        console.log(boxs);

方法四：通过HTML5新增属性获取元素

     <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul class="u1">
            <li>首页</li>
            <li>产品</li>
        </ul>
        <ul>
            <li></li>
        </ul>
    </div>

1.querySelector 返回指定选择器第一个元素对象  切记了里面的选择器需要加符号

  var fristbox = document.querySelector('.box');
        console.log(fristbox);
       

document.querySelector('选择器');  根据指定选择器返回第一个元素

 var nav = document.querySelector("#nav");
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);

 2.document.quarySelectorAll('选择器')；指定选择器的所有元素对象集合

   var allBox = document.querySelectorAll('.box');//获取所有的class名是box的元素
        console.log(allBox);
        var lis = document.querySelectorAll('li');//获取所有的li元素
        console.log(lis);
        var allBox = document.querySelectorAll('.u1 li');//获取class名是u1元素下面的所有li元素
        console.log(allBox);

注意：获取特殊元素

 // 1.获取body元素
var bodyEle=document.body;//返回body元素对象
console.log(bodyEle);
        // 2.获取html元素
        var htmlEle=document.documentElement;//返回html元素对象
        console.log(htmlEle);