62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# dom
|
||
- ## js中dom模型的简介
|
||
- js的dom中常用对象：
|
||
- window：浏览器用来载入页面的tab，通过js中的window对象，用户可以通过调用window对象中的方法完成如下操作：
|
||
- 返回窗口大小
|
||
- 操作导入window中的document
|
||
- 存储特定页面的数据
|
||
- 在当前document中添加handler
|
||
- navigator：可以通过该对象来检索浏览器的状态和身份信息
|
||
- document：代表载入window的html文档
|
||
- dom树形结构：
|
||
- root node：在dom树结构中，根节点总是html节点
|
||
- 子节点：直接位于另一个节点内的节点
|
||
- 后代节点：如果一个节点位于另一个节点内，不管是直接位于还是间接被包含
|
||
- 父节点：如果一个节点直接包含另一个节点
|
||
- 兄弟节点：如果两个节点位于dom树中的同一层，并且具有相同的父节点，那么他们就是兄弟节点
|
||
- ## document api查找节点元素
|
||
- querySelector：
|
||
- document.querySelector()会返回第一个匹配的元素
|
||
```javascript
|
||
document.querySelector("p")
|
||
```
|
||
- querySelector:
|
||
- 返回所有满足条件的元素，按照NodeList的形式返回
|
||
```javascript
|
||
document.querySelectorAll("p")
|
||
```
|
||
- ## document api创建新元素
|
||
- document.createElement:
|
||
```javascript
|
||
let node=document.createElement('p')
|
||
let p_node=document.querySelector('p')
|
||
p_node.apendChild(node)
|
||
```
|
||
- node.appendChild:通过该方法可以为节点插入新的子元素
|
||
- document.createTextNode：创建新的文本节点（类似与#text的子节点）
|
||
- ## document api 移除元素
|
||
- parentNode.removeChild：移除子元素
|
||
```javascript
|
||
let par_node=document.querySelector("div")
|
||
let child_node=document.querySelector("div > p")
|
||
par_node.removeChild(child_node)
|
||
```
|
||
- childNode.remove:对子元素可以直接调用remove
|
||
```javascript
|
||
let child_node=document.querySelector("div > p")
|
||
child_node
|
||
```
|
||
- ## js修改css样式
|
||
- 可以通过修改HTMLElement.style中的属性来通过js修改html页面中元素的样式，其会通过inline style（html元素的style属性）来修改页面样式
|
||
```javascript
|
||
let node=document.querySelector("p")
|
||
node.style.background="grey"
|
||
```
|
||
- 除了可以通过修改inline style来动态修改元素属性外，还可以预先在css中为各个class指定样式，然后在运行时动态的通过js来修改元素的class属性，此时会为元素应用不同的样式
|
||
```javascript
|
||
let node=document.querySelector("p")
|
||
node.setAttribute('class','white-style')
|
||
```
|
||
|
||
|