webveuje/javascript/12.dom基础.md

# DOM

## 节点层次

![JAVASCRIPT高级程序设计_9_DOM_节点层次- Jonathan_C - 博客园](12.dom.assets/1316408-20180226171835400-1011513544.png)



## 节点类型

## Document

> nodeType 9
>
> nodeName '#document'
>
> nodeValue null
>
> parentNode null
>
> ownerDocument null

```javascript
// 获取body
var body = document.body
// 标题
// 获取
var name = document.title;
// 修改
document.title = "新名字"
// 获取url
document.URL
// 获取域名
document.domain
// 获取来源
document.referrer
```

### 选择元素

- id
- class
- name
- tagname

### document.getElementById()

### document.getElementsByClassName()

### document.getElementsByTagName()

### document.getElementsByName()

## 文档写入 了解一下



- write
- writeln
- open
- close

```javascript
write 在加载中不会覆盖页面 但是在页面加载完之后调用就会覆盖页面
writeln 会在后面多输出一个换行符
open 打开文档写入 如果没有调用 在write 的时候会自动执行
close 写入完毕 执行之后再次写入会清除页面
```

## Element

> nodetype 1
>
> nodeName 标签名
>
> nodeValue null
>
> parentNode Document / Element

### 相对于文档增加了几个属性

- id
- title
- lang
- dir
- className

### 如何操作其他属性

获取属性

> .getAttribute()

设置属性

> .setAttribute() 会自动转化为小写

### 创建元素

> document.createElement("")

### 添加元素到指定文档

```javascript
appendChid()
insertBefore()
replaceChild()
```

### 获取元素后代

> childNodes

## Text

> nodetype 3
>
> nodeName #text
>
> nodeValue 内容
>
> parentNode Element
>
> 没有字节点

>  可以使用 nodeValue 或者 data 访问 修改

- appendData()
- deleteData()
- replaceData()
- spitText()
- substringData()



#### 合并文本节点 (规范化)

normalize()

#### 拆分文本节点

splitText()