2-2DOM

1.什么是DOM？

• W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。
• HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
• 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

2.如何查找 HTML 元素

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素

• 通过类名找到 HTML 元素

  document.getElementById();
  document.getElementsByTagName()；
  document.getElementsByClassName()；
  document.querySelectorAll()；//指定 CSS 选择器的所有元素
  

  2-1通过 id 找到 HTML 元素

    <div id="app">
        app
    </div>
    <script>
        var app=document.getElementById("app");
        console.log(app);
    </script>
  

  2-2通过标签名找到 HTML 元素

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
  </ul>
  <script>
    var lis = document.getElementsByTagName("li");
    console.log(lis);
     for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
            alert(this.index);
        }
    }
  </script>
  

  2-3通过类名找到 HTML 元素

  <div class="one">hello 1</div>
    <div class="one">hello 2</div>
    <div class="one">hello 3</div>
    <div class="one">hello 4</div>
    <script>
        var all = document.getElementsByClassName("one");
        console.log(all);
    </script>
  

  练习

  1.全选，全不选，反选

  ```javascript

  全选 全不选 反选

    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">王者
    <input type="checkbox">lol