DOM操作

• ， 30 3月 2021
• 作者 847954981@qq.com
• 前端学习

DOM操作

在学习了JavaScript之后，我们会想，如何使用JavaScript来操纵HTML呢。

其实HTML中的每一个对象都是一个DOM对象，其以一种树状图形式表现

如图

1.树根是 DOCUMENT，也可以称为整个页面文档

2. 每个 HTML 标签我们称之为 DOM 节点，英文为Node或者ELement

3. 每个 HTML 标签包裹的子标签，在树上体现为分支，称为儿子节点。比如上图，P和H1都是DIV的儿子节点。DIV同样也是BODY的儿子节点。

4. 儿子节点类推可以得知P,H1是BODY的孙子节点。

5. 所有P,H1的长辈，我们称为P和H1的祖先节点。

6. H1,P是亲兄弟，我们称为兄弟节点。

那么我们知道了HTML的DOM间的关系，接下来我们需要的是去获取HTML的DOM来方便我们使用JavaScript进行修改

使用如下代码，获取main下的.core之后的.subtitle标签的DOM

document.querySelector('main .core .subtitle');

其中我们要记住的就是.querySelector 来获取节点，其方法和CSS中的选取类似。

除此之外我们.querySelectorAll('')来全量查询，并按顺序返回一个类数组。

getElementById(): 根据 id 查询某个节点 getElementsByClassName(): 根据 class 查询多个节点 getElementsByTagName(): 根据 标签名 查询多个节点

这些也是选取方式

document.createElement(tagName)创建标签(节点)

document.createTextNode(string)创建纯文本

标签dom等等.appendChild(newNode) 将newNode节点插入（在所有儿子节点之后）

标签dom等等.inserBefore(新节点，位置节点) 在指定位置插入节点

img.setAttribute(‘style’, ‘width: 100%; height: 100%;’);属性修改（可以修改class id 等等）

dom.style.color = ‘xxxx’;具体属性修改

标签dom等等.innerHTML(内容）直接添加内容如果为‘’则为清除内容