DOM（核心）（重点）

1. 什么是DOM

文档对象模型（ Document Object Model ，简称DOM），是W3C推荐的处理可扩展标记语言（ HTML或者XML ）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的 dom 编程接口。
2. 对于HTML，dom使得html形成了一棵dom树，包含文档， 元素， 节点

• 文档：一个页面就是一个文档，DOM中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

3. 我们获取的DOM元素是一个对象（object），所以称为文档对象模型

2. 关于dom操作，我们主要针对元素的操作，主要有创建，增，删，改，查，属性操作，事件操作

2.1 创建

1. document.write()

2. element.innerHTML

3. document.createElement()

2.2 增

1. 父级.appendChild(变量);

2. 父级.insertBefore(变量, 父级.children[n])

2.3 删

1. removeChild

2.4 改

2.5查

1. DOM 提供的API的方法：getElementById, getElementByTagName 古老用法不推荐

2. H5提供的新方法：qureySelector， qureySelectorAll 提倡

3. 利用节点操作获取元素：父（parentNode），子（children），兄（previousElementSibling，nextElementSibling）提倡

2.6 属性操作（自定义）

方法	作用
element.getAttribute(‘属性’)	主要获得自定义的属性（标准）
element.setAttribute(‘属性’, ‘属性值’)	自定义属性
element.removeAttribute(‘属性’);	移除属性

2.7 事件操作（基础的，不全）

给元素注册事件，采取 事件.事件类型=事件处理程序

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onmousemove	鼠标移动触发
onmouseenter	鼠标经过触发
onmouseleave	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

更细致的学习 come on！！！https://blog.csdn.net/weixin_45773503/article/details/105948417