DOM基础

概念：DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写
DOM查找方法
• document.getElementById() – 根据id获取唯一的一个元素
• document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组
• document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组
• document.getElementsByClassName() – 返回包含带有指定类名的所有元素的集合 – 返回的是数组
设置元素的样式（css）

1. 语法：ele.style.stylName = styleValue
   a. ele表示要设置样式的DOM对象
   b. styleName表示要设置的样式名称 – 使用驼峰命名方式 – fontSize
   c. styleValue – 要设置的样式的值
   innerHTML
2. 语法：ele.innerHTML
3. 功能：返回ele元素开始和结束标签之间的HTML
4. 语法：ele.innerHTML=“html”
5. 功能：设置ele元素开始和结束之前的HTML内容为html
   className
6. 语法：ele.classname
7. 功能：返回ele元素的class属性
8. 语法：ele.classname = “cls”
9. 功能：设置ele元素的class属性为cls
   设置DOM元素属性或添加属性
   获取属性
10. 语法：ele.getAttribute("attribute ")
11. 功能：获取ele元素的属性
12. 说明;
    a. ele – 要操作的DOM对象
    b. attribute – 是要获取的html属性（id type class）
    设置属性
13. 语法：ele.setAttribute(“attribute”,value)
14. 功能：在ele元素上设置属性
15. 说明：
    a. ele – 要操作的dom对象
    b. attribute – 要设置的属性名称
    c. value – 要设置的attribute属性值
    删除属性
16. 语法：ele.removeAttribute（“attribute”）
17. 功能：删除ele元素上的attribute属性
18. 说明：
    a. ele – 要操作的对象
    b. attribute – 要删除的属性名称
    对表单元素操作：初始化，赋值，取值
    DOM事件
    概念：就是文档或者浏览器窗口中发生的一些特定的交互瞬间
    HTML事件
19. 直接在HTML元素标签内添加的事件，执行脚本。
20. 语法：<tag 事件=“执行脚本”>
21. 功能：在html元素上绑定事件
22. 说明：执行脚本可以是一个函数的调用
    鼠标事件
23. onload – 页面加载时触发
24. onclick – 鼠标点击时触发
25. onmouseover – 鼠标滑过时触发
26. onmouseout – 鼠标离开时触发
27. onfoucs – 获得焦点时触发 – input标签type为text password / textarea标签
28. onblur – 失去焦点时触发
29. onchange – 域的内容发生改变时触发 – 一般作用在select、checkbox、radio
    关于this的指向
    在事件触发函数中，this是对该DOM对象的引用
    DOM0级事件
30. 通过DOM获取HTML元素
31. （获取HTML元素）.事件 = 执行脚本
32. 语法：ele.事件 = 脚本
33. 功能：在DOM对象上绑定事件
34. 说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用
    鼠标事件 – 拓展
35. onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上
36. onmousedown – 鼠标按钮在元素上按下时触发
37. onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件
38. onmousemove – 在鼠标指针移动时触发
39. onresize – 当调整浏览器窗口大小时触发
40. onscroll – 拖动滚动条滚动时触发
    键盘事件与keycode属性
41. onkeydown – 在用户按下一个键盘按键时触发
42. onkeypress – 在按下键盘按键时发生（只会响应字母和数字符号）
43. onkeyup – 在键盘按键松开时发生
44. keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码
    常见的DOM操作：
    (1) getElementById 返回带有指定的ID元素
    (2) getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
    (3) getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
    (4) getElementsByName 获取相同名称（name）的元素的所有节点列表