DOM ☞ 获取元素

第一章 ：获取元素

---

---

前言

文档对象模型（Document Object Model, DOM）
DOM接口可以改变网页的内容、结构、样式。

• 文档：一个页面解释一个文档
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

---

一、DOM简介

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、获取元素

获取页面元素的几种方式

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

1.ID获取

<div id="time"> 2022-6-16 </div>
<script>
    //参数 ID是大小写敏感的字符串
    //返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    // console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
    console.dir(timer);
</script>

2.标签名获取

<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>
        <li>夕颜</li>
        <li>夕颜</li>
    </ol>
    <script>
        //使用  getElementsByTagName('标签名')方法可以返回带有指定标签名的对象的集合。
        //返回的是 获取过来的伪数组对象的集合  以为数组的形式储存的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.dir(lis);
        console.log(lis[0]);
        //遍历伪数组元素
        for (var i=0;i< lis.length;i++) {
            console.log(lis[i]);
        }
        // 得到的元素对象是动态的
        // 如果页面只有一个li,返回的还是伪数组形式
        // 如果页面中没有这个元素返回的是空的伪数组的形式

       //根据标签名获取,获取某个（父元素）内部所有指定的标签名的子元素。
       //element.getElementsByTagName('标签名')
       //父元素必须是单个对象（必须指明是哪一个元素对象）。获取的时候不包括父元素自己.
         var pl = document.getElementById('ol');
     console.log(pl.getElementsByTagName('li'));

    </script>

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

<div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
    <script>

        //H5新增方法
        //1 .getElementsByClassName  根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //返回指定选择器的第一个元素对象  切记里面的符号  类+.  id加# 
        var firstBox = document.querySelector('.box');
        console.log(firstBox);  //--------------盒子1---------------- 返回第一个元素对象
        var nav = document.querySelector('li'); //-----------首页---------- 返回第一个li的元素对象
        console.log(nav);
        //返回指定选择器的所有元素对象的集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
      </script>

4.特殊元素获取

<script>
    //1. 获取body 元素
    var bodyEle = document.body;
     console.log(bodyEle); // 返回的是元素对象
     console.dir(bodyEle);  
     //获取Html元素
     var htmlEle = document.documentElement;
     console.log(htmlEle);
</script>

---

总结

先获取元素，才能进行相应的操作