Dom相关

参考文档：

https://www.w3school.com.cn/htmldom/index.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

1. 什么是DOM？(防面试)

DOM: Document Object Model，全称文档对象模型，简称DOM模型, DOM树。它是JS操作网页(HTML文档)的接口API(函数，方法)，它的作用是将网页上各种元素（标签）转为相应的JS对象，从而可以使用JS对象对网页进行各种操作(比如增删查改元素)。

Application Program Interface应用程序接口

DOM中有大量操作HTML文档的API（函数）

网页===》文档

标签===》元素 ===》节点

节点的概念要比元素大，元素只是节点中的一种类型。

浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。所以DOM模型也称为DOM树。

2. 什么是节点？常用的节点类型有哪些？(防面试)

DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。

节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。节点类型不同，这三个属性的值也不相同。

常用的节点包括：文本节点，元素节点，属性节点，其他的节点类型了解。

参考文档：

https://blog.csdn.net/weixin_42472040/article/details/88841675

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

3. DOM中的API？（重点）

3.1. 获取/查询DOM：

    3.1.1. 元素节点获取的方式：推荐，兼容性好。

    document.getElementById('id的值'),获取单个

    document.getElementsByClassName('class的值'),可以获取多个

    document.getElementsByTagName('标签名'),可以获取多个

    document.getElementsByName('name的值'),可以获取多个

    3.1.2. 新的API（HTML5新增加）推荐，未来趋势

    document.querySelector('各种选择器')

    document.querySelectorAll('各种选择器')

    3.1.3. 使用别名获取：（不推荐）

    document.title // 标题

    document.head // 头部

    document.body // 主体

    document.images // 文档上所有的图片

    document.all // 获取文档所有的节点

    document.anchors // 获取锚点。

    document.forms // 获取所有表单

    document.scripts // 获取所有脚本

3.2. 修改DOM：

    3.2.1. 修改内容区：

    textContent，innerText，innerHTML

    3.2.2. 获取/修改/删除元素属性：

    element.getAttribute()

    element.setAttribute()

    element.removeAttribute()

    3.2.3. 样式属性控制：

    element.classList.add()

    element.classList.remove()

3.3. 删除DOM：

    3.3.1. 添加/插入DOM：

    appendChild(), append(), insertBefore()

    3.3.2. 删除DOM:

    remove(), removeChild()

    3.3.3. 替换DOM

    replaceChild()

3.4. 创建DOM：

createElement(), createTextNode()

4. 事件概念？(防面试)

HTML 事件是发生在 HTML 元素上的“事情”。 当在HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。 HTML 事件 HTML 事件可以是浏览器或用户做的某些事情。比如：点击，移入元素，移出元素，鼠标按下，鼠标弹起，键盘按下，键盘弹起等都是事件。

5. 常见事件类型

onclick, oninput, onchange, onsumit, onload, onfocus, onblur

onmouseover, onmouseout,

onmouseenter, onmouseleave,

onmousedown, onmouseup,

onkeydown, onkeyup, onkeypress

详细请参考：

https://www.w3school.com.cn/jsref/dom_obj_event.asp