DOM基础

什么是DOM

JavaScript由ECMAScript+DOM+BOM组成的。
DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写，是针对HTML和XML文档的一个API（应用程序编程接口）。DOC描绘了一个层次变化的节点树，允许开发人员添加，修改和删除页面的某一个部分。
DOM树：

掌握基本的DOM查找方法

1.document.getElementById() – 根据id获取唯一的一个元素
2.document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组
3.document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组
4.document.getElementsByClassName() – 返回包含带有指定类名的所有元素的集合 – 返回的是数组

DOM事件

HTML事件

直接在HTML元素标签内添加的事件，执行脚本。
语法：<tag 事件=“执行脚本”>
功能：在html元素上绑定事件
说明：执行脚本可以是一个函数的调用

DOM0级事件

1.通过DOM获取HTML元素
2.（获取HTML元素）.事件 = 执行脚本
3.语法：ele.事件 = 脚本
4.功能：在DOM对象上绑定事件
5.说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

鼠标事件
1.onload – 页面加载时触发

<script type="text/javascript">
    //页面加载是触发事件
    window.onload = function(){
      //获取box元素
      var b = document.getElementById("box");
      //调用函数
      function clickbtn(){
        alert("盒子");
      }
      b.onclick = clickbtn;
    }
    
  </script>

2.onmouseover – 鼠标滑过时触发
3.onmouseout – 鼠标离开时触发
4.onfoucs – 获得焦点时触发
onblur – 失去焦点时触发
5.onchange – 域的内容发生改变时触发 – 一般作用在select、checkbox、radio
6.onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上

//需求：文本框中输入什么，提交后就显示什么
<script type="text/javascript">
    window.onload = function(){
      var frm = document.getElementsByTagName("form")[0];
      frm.onsubmit = function(){
        alert(document.getElementsByName("inp")[0].value);
      }
    }
  </script>
<form action="#">
    名字：<input type="text" name="inp">
    <input type="submit" value="提交">
  </form>

7.onmousedown – 鼠标按钮在元素上按下时触发
onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件 ----没有什么必要就不要和onclick放一起使用
8.onmousemove – 在鼠标指针移动时触发
9.onresize – 当调整浏览器窗口大小时触发
10.onscroll – 拖动滚动条滚动时触发