# dom

## dom 节点树
dom 包含 ：元素节点，文本节点，注释节点
demo:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>
```
``` 
    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标准的示例：

```
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>

``` 
获取属性值：
  方法一：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')

        ```

* <p style="color:red;font-weight:bold">创建元素:</p>
  
  * 创建新的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(),将元素追加到指定对象的前面
```
