03-获取页面元素

如何获取页面元素

DOM在实际开发中主要用来操作元素

获取页面元素的方式：

（1）根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

<div id="time">2019-11-9</div>
    <script>
        //1.因为我们文档页面从上往下加载，所以先得有标签，所以我们script要写在标签下面
        //参数id是大小写敏感的字符串
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);//<div id="time">2019-11-9</div>
        console.log(typeof timer);//object

        //console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
        console.dir(timer); //div#time
    </script>

（2）根据标签名获取

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

<ul>
        <li>改革春风吹满地1</li>
        <li>改革春风吹满地2</li>
        <li>改革春风吹满地3</li>
        <li>改革春风吹满地4</li>
        <li>改革春风吹满地5</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>

    <script>
        //document.getElementsByTagName('标签名');

        //1、返回的是 获取过来元素对象的集合 以伪数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis); //HTMLCollection(5)
        console.log(lis[0]);//<li>改革春风吹满地</li>

        //若要依次打印里面的元素对象可以采用遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }

        //如果页面只有一个li返回的还是伪数组形式
        //如果页面中没有这个元素返回空的伪数组形式
    </script>

注意：

1、因为得到的是一个对象的集合（伪数组），所以我们想要操作里面的元素就需要遍历

2、得到的元素对象是动态的（标签里的内容改变，js的内容不改变）

 

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

element.getElementsByTagName('标签名');

//element.getElementsByTagName('标签名');
//父元素必须是单个对象
var ol = document.getElementById('ol');  //返回的结果ol 是一个元素对象
console.log(ol.getElementsByTagName('li'));

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

 

（3）通过HTML5新增的方法获取（IE9+）

document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
document.querySelector('选择器'); 返回指定选择器的第一个元素对象
document.querySelectorAll('选择器');//根据指定选择器返回

 

<div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
        <ul>
            <li>营销</li>
            <li>售后</li>
        </ul>
    </div>
    <script>
        //1、getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        //2、querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);

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

        var li = document.querySelector('li');
        console.log(li); //<li>首页</li>

        //3、querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);//NodeList(2) [div.box, div.box]

        var lis = document.querySelectorAll('li');
        console.log(lis); //NodeList(4) [li, li, li, li]
    </script>

（4）特殊元素获取（body, html）

<script>
        //1.获取body元素
        var bodyEle = document.body;
        console.log(body.bodyEle);
        console.log(bodyEle);

        //2.获取HTML元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
</script>