JavaScript-DOM-笔记

1.JavaScript的组成
1）ECMAScript
ECMAScript规定了JS的编程语法和基础核心知识，如语法、类型等等。
2）DOM——文档对象模型
文档对象模型可以对页面上的各种元素进行操作（大小、位置、颜色等）
3）BOM——浏览器对象模型
浏览器对象模型可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

DOM和BOM就是网页API，其中包含了预先定义好的工具函数，直接拿来使用即可
DOM中：
文档： 一个页面就是一个文档 ----- html
节点： 文档中的所有内容 ---- 标签、属性、文本
元素： 标签
文档中包含节点，节点包含元素

2.根据id名、类名、标签名获取元素
1）根据id名获取元素? ? document.getElementById('id名')
id是唯一的 获取的就是元素
2）根据类名获取元素? ? document.getElementsByClassName('类名')
类名可以重复。使用类名获取的结果是一个伪数组，获取具体的元素需要使用下标
document.getElementsByClassName('类名')[下标]
3）根据标签名获取元素? ?document.getElementsByTagName('标签名')
标签名可以重复。使用标签名获取的结果是一个伪数组，获取具体的元素需要使用下标
document.getElementsByTagName('标签名')[下标]

3.使用选择器获取元素
通配符选择器、id选择器、类选择器、标签选择器、后代选择器、子元素选择器
id选择器：#id名 类选择器：.类名 标签选择器：标签名
document.querySelector('选择器')： 根据选择器，只获取第一个
document.querySelectorAll('选择器')：根据选择器，获取所有 --- 伪数组 使用下标获取具体元素

4.获取特殊元素
获取body ： document.body
获取html : ?document.documentElement

5.事件三要素
1）事件源： 操作了谁
2）事件类型： 干了什么事
3）事件处理函数： 做出的反应

6.绑定事件的三步
1）获取事件源
2）确定事件类型
3）绑定事件处理函数 元素.事件类型 = function(){ 代码 }

7.常见的事件类型
onclick? ?鼠标点击左键触发
onfocus? 获取鼠标焦点触发
onblur? 失去鼠标焦点触发
onmouseenter/onmouseleave? ?鼠标移入/移出某元素触发
onmouseover/onmouseout? ?鼠标悬停/离开某元素触发
onmousemove? ? 鼠标移动触发
onmousedown/onmouseup? ? 鼠标按下/弹起触发

8.获取、修改元素的文本内容
1）获取：元素.innerText
2）修改：元素.innerText = '值'

9.获取、修改元素内部html结构
1）获取：元素.innerHTML
2）修改：元素.innerHTML = '值'

10.获取、修改元素的属性
1）获取：元素.属性名
2）修改：元素.属性名 = '值'

11.表单元素的特殊属性
input标签中的特殊属性type：
? ? ? ? text:文本框 password:密码框 radio:单选按钮 checkbox:复选框
特殊属性：
? ? ? ? disabled(禁用)、checked（选中）、selected（下拉菜单被选中），readonly（只读），这些属性的值是布尔型，不能加引号