如何获取页面元素：

DOM中我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式：

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取

1 .根据 ID 获取

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

<body>
    <div id = 'time'>2020-9-1</div>
    <script>
        // 1.因为我们文档页面从上往下加载 ， 所以先得有标签 所以我们script写到标签的下面（后面我们在有方法提到上面）
        // 2. get 获得 element 元素 by 通过 采用驼峰命名法
        // 3.参数 id 是大小写敏感的字符串
        // 4.返回的是一个元素对象 
        document.getElementById('time');
        console.log(document.getElementById('time'));
        var timer = document.getElementById('time');
        console.log(typeof timer);  // object
        // 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

2.根据标签名获取

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

​

    document.getElementsByTagName('标签名');

注意：

  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  2. 得到的元素是动态的
<body>
    <ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素我们可以采取遍历的方式
        for (var i = 0 ;i<lis.length;i++) {
            console.log(lis[i]);
        }
        // 3. 如果页面中只有一个 li 返回的还是伪数组的形式
        // 4.如果页面中没有这个元素 返回的是空的伪数组的形式
    </script>
</body>

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

     element.getElementsByTagName('标签名');

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

<body>
    <ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
    <ol id = 'oll'>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ol>
    <script>
    // element.getElementByTagName('标签名');  父元素必须是指定的单个元素
         /* var ol = document.getElementsByTagName('ol');
         console.log(ol[0].getElementsByTagName('li')); */
        // 也可以给ol加上id
       var ol = document.getElementById('oll')
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

3.通过H5新增的方法获取

    1. document.getElementsByClassName('类名'); // 根据类名返回元素对象的集合
    2.document.querySelector('选择器')； // 根据指定选择器返回第一个元素对象
    3.document.querySelectorAll('选择器'); // 根据指定选择器返回
<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1.getElementsByClassName()  根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box')
        console.log(boxs);
        // 2. querySelector()  返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号， 如：类选择就 .box  ;id选择器就 #nav。
        var firstbox = document.querySelector('.box');
        console.log(firstbox);
        var firstnav = document.querySelector('#nav');
        console.log(firstnav);
        var firstli = document.querySelector('li');
        console.log(firstli);
        // 3.querySelectorAll()  返回指定选择器的所有元素对象集合
        var allbox = document.querySelectorAll('.box');
        console.log(allbox);
        var allli = document.querySelectorAll('li');
        console.log(allli);
    </script>
    
</body>

4.特殊元素获取

获取body元素

    1.document.body;  // 返回body元素对象

获取html元素

     2.document.documentElement  // 返回html元素对象
<body>
    <script>
        // 1.获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        // 2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
文章目录