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