API dom操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

事件三要素

• 事件源:触发(被)事件的元素

• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)

• 事件处理程序:事件触发后要执行的代码(函数形式)

• ****排他功能

• <input type="button" value="哈哈">
  <input type="button" value="哈哈">
  <input type="button" value="哈哈">
  <input type="button" value="哈哈">
  <input type="button" value="哈哈">
  <input type="button" value="哈哈">
  
  
  <script>
      /*
      * 我们看到的：
      * 点击按钮，====点击事件
      *      上一次点击的按钮的值由 "嘻嘻" 变成 "哈哈"======把所有的按钮的值改为  "哈哈"
      *      再把当前的按钮的值变成 "嘻嘻" ，
      *
      * */
      var inputObjs = document.getElementsByTagName("input");//数组【input1,input2...】
      //遍历数组，获取每一个按钮，为按钮添加点击事件
      for (var i = 0; i < inputObjs.length; i++) {
          //每个按钮添加点击事件
          inputObjs[i].onclick = function () {
              // 两件事：
              //  ①所有的按钮的值改为  "哈哈"
              //遍历数组，获取每一个按钮，改变按钮的value值
              for (var j = 0; j < inputObjs.length; j++) {
                  inputObjs[j].value = "哈哈";
              }
              //    ②当前的按钮(this)的值变成 "嘻嘻"
              // console.log(i);
             this.value = "嘻嘻"
          }
      }
      console.log(i);//6
      //for循环在页面加载的时候，就执行完毕了
      //事件处理函数里面的内容是 在点击触发时执行的
  
  </script>