# dom
## dom 节点树
dom 包含 ：元素节点，文本节点，注释节点
demo:
```
Document
hello world
```
```
html
head
title
meta
text --回车
body
text
```
## js操作dom
* 查询元素并获取元素的值
查询元素：
* 根据标签选取：document.getElementsByTagName('目标标签')
* 根据class选取：document.getElementsByClassName('目标类名')
* 根据id选取：document.getElementById('目标id')
* js直接访问html对象：
* document.title 获取文档的标题
* document.body 获取body元素
* document.head 获取head元素
...
通过id获取document.querySelectorAll("#old")
通过标签获取 document.querySelectorAll("p")
通过类名获取document.querySelectorAll(".demo2")
获取值：
* element.innerHTML 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
* element.innerText 也就是从对象的起始位置到终止位置的全部内容,去除Html标签。
特别说明 innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用
innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
```
去除HTML标签后的文本
```
获取属性值：
方法一：element.属性名
eg:document.write(document.getElementById("image").src)
方法二：element.getAttribute('属性名')
eg:
str=document.getElementsByTagName('p')[0]
var attr=str.getAttribute('name')
* 删除元素 自身
element.remove()
* 修改元素
* 修改元素的文本内容
* element.innerHTML="修改后的文本内容"
* elenment.innerText="修改后的文本内容"
* 修改元素的属性
* 方法一：
element.属性名="属性值"
demo:
```
document.getElementById("myImage").src = "landscape.jpg";
```
* 方法二：
element.setAttribute('属性名','属性值')
eg:
```
var myele=document.createElement('div')
myele.setAttribute('class','box')
```
* 创建元素:
* 创建新的html节点
document.createElement('要创建的标签名')
* 为新创建的节点添加文本内容
element.innerHTNL="想要添加的文本内容"
element.innerText="想添加的文本内容"
* 为新创建的添加属性及属性值
方法一： element.setAttribute('属性名','属性值')
方法二： element.属性名='属性值'
* 查找一个现有的元素（新元素的父级元素）
* 向已有的元素追加新元素
* fuelement.append(创建的新元素)
demo:
```
var box = document.createElement('div')
box.innerHTML = 'happy new year'
box.setAttribute('style', 'width:100px;height:100px;background:red;color:white')
var main = document.body
main.append(box)
```
追加元素的方式：
* append(),在父级最后追加一个子元素
* appendTo(),将子元素追加到父级的最后
* prepend(),在父级最前面追加一个子元素
* prependTo(),将子元素追加到父级的最前面
* after(),在当前元素之后追加（是同级关系）
* before(),在当前元素之前追加（是同级关系）
* insertAfter(),将元素追加到指定对象的后面
* insertBefore(),将元素追加到指定对象的前面
```