JavaScript 基础（七）【DOM】

元素与节点

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Js通过操作dom来控制页面
Js操作的不只是元素，还包括元素的属性、内容、元素外的文本等等，所以Js的dom对象对页面进行了更详细的划分，称为节点。

在 HTML DOM （文档对象模型）中，每个部分都是节点：

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
• 注释是注释节点

元素是节点的一种，节点包括了元素

Js通过控制节点来对html做各种改变

1. 改变页面中的所有 HTML 元素
2. 改变页面中的所有 HTML 属性
3. 改变页面中的所有 CSS 样式
4. 对页面中的所有事件做出反应

输出

document.write()
在文档加载完成后使用会覆盖原文档内容

改变元素

获取元素

document.getElementById()  //获取id
document.getElementByClassName() //获取class
document.getElementByTagName() //获取标签名
document.getElementByName() //获取属性
document.querySelector() //返回匹配指定选择器的第一个元素
document.querySelectorAll() //返回匹配指定选择器的所有元素

id和querySelector 获取的是单个元素，其它获取的是元素集合
元素集合类似数组但不是数组，无法使用数组方法 valueOf，push等

改变内容

innerHTML();
innerText();

改变属性

title,className,src 等

改变样式

Element.style.property = " "

增删元素

创建元素 createElement()
创建文本节点 createTextNode()
向元素末尾添加元素或节点 appendChild()
向元素开始添加元素或节点 insertBefore()
移除已存在的元素 removeChild （需要知道该元素的父元素）
替换元素 replaceChild(新元素，旧元素) （也需要知道父元素）
注：创建的元素只能使用一次，添加到文档之后就不能再次添加，必须重新创建
增删改流程说明

响应事件

浏览器事件：加载完成onload，页面卸载 onunload 等
用户操作： 鼠标事件，键盘事件等

添加事件的三种方式
（1）在元素中添加onclick属性，
（2）在js中获取元素然后添加onclick，
（3）添加事件监听addeventlistener

事件汇总

鼠标事件

onclick  单击事件
ondblclick 双击事件
oncontextmenu 右键事件
onmouseover / onmouseenter 鼠标滑过
onmouseout/onmouseleave 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动

表单事件

onfocus 获取焦点
onblur 失去焦点
onchange 表单改变
onselected 选中事件
oninput 正在输入事件
onsubmit 表单提交
onreset 表单重置
提交和重置需要元素form驱动