DOM复习——获取元素

写在前面

 

        回头瞅了瞅，已经三个月没更新了，这三个月学习进度不算快，主要都是在摸鱼，错过了寒假的黄金学习时间，好了，不在这里逼逼赖赖后悔了，还是和我赶紧一起投入学习吧。

        本次学习的主要内容是dom，其实我已经看了一遍黑马前端中dom的视频了，但是还是由于缺少练笔，即使做了笔记，还是有很多不熟，尤其是最近在写轮播图，发现脑子根本跟不上代码，所以打算回来系统性的复习一下。

        声明：以下笔记内容来自于黑马前端的讲解以及自身的理解，如果有误，欢迎大家指正，也欢迎大家踊跃评论。好了，现在就让我们开始吧。

获取元素

1.1如何获取页面元素

获取方式：

1. 根据ID获取
2. 根据标签名获取
3. 通过HTML5新增的方法获取
4. 特殊元素获取

以下将对其逐一进行分析

1.2根据ID获取

使用getElementById（）方法可以获取带有ID的元素对象，访问HTML元素最常用的方法是使用元素的id，如果在当前document下没有找到，则会返回null，如果找到了，则返回一个匹配的Element对象

参数Id是大小写敏感的字符串

    <p id="demo"></p>

    <script>
        //因为文档页面从上往下加载，所以我们script写道标签的下面
        var element=document.getElementById('demo');
        console.log(element);//返回<p id="demo"><p>
    </script>

附加：console.dir（element）可以更好的打印元素的属性

1.3根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

返回的是对象的集合，以伪数组形式存储，不论是只有一个元素还是没有元素

    <li>wo</li>
    <li>ai</li>
    <li>qian</li>
    <li>duan</li>
    <script>
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        //我们可以通过伪数组的形式打印其中的一个小li
        console.log(lis[0]);
        //我们也可以通过for循环来全部输出
        for(var i=0; i<lis.length;i++){
            console.log(lis[i]);
        }
    </script>

控制台返回的如左图

 我们还可以获取某个元素（父元素）内部所有指定标签名的子元素

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

    <ol id="demo">
        <li>wo</li>
        <li>ai</li>
        <li>qian</li>
        <li>duan</li>
    </ol>   
    <script>
        var ol=document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));
        //但常用的是 给父元素添加一个id
        var ol=document.getElementById('demo');
        console.log(ol.getElementsByTagName('li'));
    </script>

1.4通过H5新增的方法获取

1.document.getElementsByClassName('类名');//根据类名返回元素对象集合

2.querySelector('选择器’) 返回指定选择器的第一个元素对象

3.querySelectorAll()返回指定选择器的所有元素对象的集合

    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        var firstbox=document.querySelector('.box');
        console.log(firstbox);
        var nav=document.querySelector('#nav');
        console.log(nav);
        var li=document.querySelector('li');
        console.log(li);
        var allBox=document.querySelectorAll('.box');
        console.log(allBox);
        var lis=document.querySelectorAll('li');
        console.log(lis);
    </script>

 1.5 获取特殊元素（body，html）

获取body元素

    <script>
        var bodyEle=document.body;
        console.log(bodyEle);
    </script>

获取html元素

    <script>
        var htmlEle=document.documentElement;
        console.log(htmlEle);
    </script>

好了，以上就是获取元素的四种方法。今晚继续更新事件基础。

补：事件基础内容太少了，和下下节一起明天更。