Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）

Web APIs

Web APIs 和 JS 的关联性：

1. Web APIs是 W3C 组织的标准，主要学习DOM 和 BOM
2. Web APIs是 JS 所独有的部分
3. 主要学习页面交互功能
4. Web APIs 是 JS 的应用

总结：

1. API 是一种接口工具，以实现某些功能，只要会使用就可以了
2. Web APIs是浏览器提供的一套操作浏览器功能（BOM) 和 页面元素(DOM)的API
3. Web APIs 一般都有输入和输出，Web APIs很多都是方法（函数）
4. 可以结合前面学习内置对象方法的思路学习

DOM

DOM是文档对象模型，是W3C推荐的处理可扩展标记语言的一套标准程序接口，即处理页面/文档的一些接口
W3C已经规定了一系列的DOM接口，通过这些接口可以改变网页的内日那个、结构、和样式

DOM树

文档（document）：一个页面就是一个文档；
元素(Element)：页面中的所有标签都是元素；
节点(Node)：页面中的内容都是节点，例如：标签，文本，属性，注释等；
DOM把以上内容都看成是对象

DOM在实际操作中获取元素的方法：

1. 根据ID获取

• getElementById(‘id’) 方法可以获取带有ID的元素对象
• 因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面
• 驼峰命名法 get 获得Element 元素 by
• 参数id 是大小写敏感的字符串
• 返回的是一个元素对象

    <div id="time">2020-10-01</div>
    <script>
      //1.因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面
      //2.驼峰命名法  get 获得Element 元素 by
      //3.参数id 是大小写敏感的字符串
      //4.返回的是一个元素对象
      var timer = document.getElementById("time");
      console.log(timer); //把标签选中了
      console.log(typeof timer);//返回object
      //5.console.dir打印返回的元素对象，更好地查看属性里面的属性和方法
      console.dir(timer);

2. 根据标签名获取

• getElementsByTagName(‘标签名’) 方法可以返回页面内所有的带有指定标签名的对象的集合
• 返回的是获取过来元素对象的集合，以伪数组形式存储

   <ul>
      <li>如月之恒，如日之升1</li>
      <li>如月之恒，如日之升2</li>
      <li>如月之恒，如日之升3</li>
      <li>如月之恒，如日之升4</li>
      <li>如月之恒，如日之升5</li>
    </ul>
    <ol>
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
    </ol>
   <script>
      //(1)getElementsByTagName 方法可以返回带有指定标签名的对象的集合
      //(2)返回的是获取过来元素对象的集合，以伪数组形式存储
      var lis = document.getElementsByTagName("li");
      console.log(lis);
      console.log(lis[0]); //得到第一行的li
      //(3)想要依次得到元素对象可以采取遍历的方式
      for (var i = 0; i < lis.length; i++) {
   
        console.log(lis[i]);
      }
  </script>

注意：
1.因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
2.得到的元素对象是动态的（即原对象一旦变化，得到的结果也会随之变化）
3.如果页面中只有一个元素，返回的依然是元素对象，伪数组
4.如果页面中没有元素，返回的是空的伪数组
5.element（父元素）.getElementsByTagName(’标签名’)；可以获取某个元素 （父元素）内部所有指定标签名的子元素
///父元素必须是单个对象（必须指明是哪个对象），获取时不包括父元素自己
例：此处必须是 ’ ol[0] . getElementsByTagName(“li”) ’

     //获取ol下的li标签
      var ol = document.getElementsByTagName("ol");
      console.log(ol[0].getElementsByTagName("li"));

//这样过于麻烦，经常做出改进:给ol一个id值

    <ol id="ol">-----</ol>
    -------------------------------------------
     //改进
      var ol = document.getElementById("ol");
      console.log(ol.