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(内容)直接添加内容如果为‘’则为清除内容