概念：DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写

DOM查找方法

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

设置元素的样式（css）

  1. 语法：ele.style.stylName = styleValue

    1. ele表示要设置样式的DOM对象
    2. styleName表示要设置的样式名称 — 使用驼峰命名方式 — fontSize
    3. styleValue — 要设置的样式的值

      innerHTML

  2. 语法：ele.innerHTML

  3. 功能：返回ele元素开始和结束标签之间的HTML
  4. 语法：ele.innerHTML=“html”
  5. 功能：设置ele元素开始和结束之前的HTML内容为html

className

  1. 语法：ele.classname
  2. 功能：返回ele元素的class属性
  3. 语法：ele.classname = “cls”
  4. 功能：设置ele元素的class属性为cls

设置DOM元素属性或添加属性

获取属性

  1. 语法：ele.getAttribute(“attribute “)
  2. 功能：获取ele元素的属性
  3. 说明;
    1. ele — 要操作的DOM对象
    2. attribute — 是要获取的html属性（id type class）

设置属性

  1. 语法：ele.setAttribute(“attribute”,value)
  2. 功能：在ele元素上设置属性
  3. 说明：
    1. ele — 要操作的dom对象
    2. attribute — 要设置的属性名称
    3. value — 要设置的attribute属性值

删除属性

  1. 语法：ele.removeAttribute（“attribute”）
  2. 功能：删除ele元素上的attribute属性
  3. 说明：
    1. ele — 要操作的对象
    2. attribute — 要删除的属性名称

对表单元素操作：初始化，赋值，取值

DOM事件

概念：就是文档或者浏览器窗口中发生的一些特定的交互瞬间

HTML事件

  1. 直接在HTML元素标签内添加的事件，执行脚本。
  2. 语法：
  3. 功能：在html元素上绑定事件
  4. 说明：执行脚本可以是一个函数的调用

鼠标事件

  1. onload — 页面加载时触发
  2. onclick — 鼠标点击时触发
  3. onmouseover — 鼠标滑过时触发
  4. onmouseout — 鼠标离开时触发
  5. onfoucs — 获得焦点时触发 — input标签type为text password / textarea标签
  6. onblur — 失去焦点时触发
  7. onchange — 域的内容发生改变时触发 — 一般作用在select、checkbox、radio

关于this的指向

在事件触发函数中，this是对该DOM对象的引用

DOM0级事件

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

鼠标事件 — 拓展

  1. onsubmit事件 — 表单中的确认按钮被点击时发生 — 不是加在按钮上而是表单上
  2. onmousedown — 鼠标按钮在元素上按下时触发
  3. onmouseup — 在元素上松开鼠标按钮时触发 — 2和3成就了onclick事件
  4. onmousemove — 在鼠标指针移动时触发
  5. onresize — 当调整浏览器窗口大小时触发
  6. onscroll — 拖动滚动条滚动时触发

键盘事件与keycode属性

  1. onkeydown — 在用户按下一个键盘按键时触发
  2. onkeypress — 在按下键盘按键时发生（只会响应字母和数字符号）
  3. onkeyup — 在键盘按键松开时发生
  4. keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

常见的DOM操作：

(1) getElementById 返回带有指定的ID元素
(2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
(3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
(4) getElementsByName 获取相同名称（name）的元素的所有节点列表