如何获取节点
- getElementById() 通过id来获取
- getElementsByTagName() 返回带有指定标签名的对象的集合
获取节点
- nodeType 节点类型
  - getAttributeNode() 获取属性节点
  - firstChild() 获取第一个子节点
- 1-3 children 只获取元素节点
增加节点
删除节点
- removeChild() 删除节点
替换节点
- replaceChild 替换节点
克隆节点
- cloneNode 克隆节点
节点和元素节点

如何获取节点

getElementById() 通过id来获取

<div id="app">
</div>
<div class="one">one1</div>
<div class="one">one2</div>
<div class="one">one3</div>
<script>
var app = document.getElementById("app")
// console.log(app);
</script>

getElementsByTagName() 返回带有指定标签名的对象的集合

HTMLCollection(HTML集合)，不是数组类数组对象，可以使用数组的属性，可以for循环 ```javascript
hello world

var app = document.getElementsByTagName(“div”)

// app HTMLCollection(HTML集合)，不是数组类数组对象，可以使用数组的属性，可以for循环 console.log(Array.isArray(app)); // false console.log(app.length); for(var i = 0;i<app.length;i++){ console.log(app[i]); }

<a name="oS2c6"></a>
### getElementsByClassName(）通过class来获取
- **实例  点击某个div消失**
```javascript
<div class="one">hello 1</div>
<div class="one">hello 2</div>
<div class="one">hello 3</div>
<div class="one">hello 4</div>
<script>
  /* 
   this --> 在事件中，谁执行事件，this就指谁
  */
  var all = document.getElementsByClassName("one")
  for(var i=0;i<all.length;i++){
    // 不能对HTML Collection 执行点击事件，只能对具体元素执行事件
    all[i].onclick=function(){
      // console.log(this)
      this.style.display = "none";
    }
  }
  console.log(all)
</script>

获取节点

nodeType 节点类型

nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
getAttributeNode() 获取属性节点
firstChild() 获取第一个子节点
```javascript // getAttributeNode() 获取属性节点 // firstChild() 获取第一个子节点
hello world

<a name="tJWjj"></a>
### childNodes  获取所有子节点
<a name="8396489e"></a>
### parentNode  父元素节点
```javascript
<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        var childs = app.childNodes;
        console.log(childs);  // 所有的子节点 共有9个
        var arr = []
        for(var i = 0;i<childs.length;i++){
            if(childs[i].nodeType == 1){
                arr.push(childs[i])
            }
        }
        console.log(arr);
    </script>

1-3 children 只获取元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.children)  // 只获取元素节点
    </script>

增加节点

appendChild 追加节点(末尾添加节点)

向节点的子节点列表的末尾添加新的子节点

createElement() 创建节点

createTextNode() 创建文本节点

<div id="app">
</div>
    <script>
        var app = document.getElementById("app")
        var p = document.createElement("p")
        var txt = document.createTextNode("hello world")
        p.appendChild(txt)
        console.log(p)
        app.appendChild(p)
        console.log(app)
    </script>

insertBefore 插入节点

parentNode.insertBefore(newNode,在谁前面)
在已有的子节点前插入一个新的子节点

<ul id="app">
        <li>html</li>
        <li id="js">javascript</li>
</ul>
    <!-- 
        innerHtml 元素里的文字
        parentNode.insertBefore(newNode,在谁前面) 插入节点
     -->
    <script>
        var app = document.getElementById("app")
        var li = document.createElement("li")
        var js = document.getElementById("js")
        li.innerHTML = "vue"
        console.log(li);
        app.insertBefore(li,js)
        console.log(app)
    </script>

innerHtml

innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
如：

这是内容

，
我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。
定义和用法：
innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。
语法
Object.innerHTML = “HTML”;// 设置
var html = Object.innerHTML;// 获取
例子 1
获取段落p的 innerHTML（html内容）

<p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
<input type="button" onclick="getInnerHTML()" value="点击" />
<script>
        function getInnerHTML(){
                alert(document.getElementById("test").innerHTML);
            }
</script>

例子 2
设置段落p的 innerHTML（html内容）


3.     <script type="text/javascript">
4.     function setInnerHTML(){
5.         document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
6.     }
7.     </script>
8.     </head><body>
<p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
<input type="button" onclick="setInnerHTML()" value="点击" />

append 在结尾插入节点

prepend 在开头插入节点

<ul id="app">
        <li>html</li>
</ul>
    <script>
        // append,prepend
        var app =  document.getElementById("app");
        var p1 = "<h1>我是在结尾插入的</h1>";
        var p2 = "<h1>我是在开头插入的</h1>"
        app.append(p1);
        app.prepend(p2)
    </script>

before 在元素节点前插入节点

after在元素节点后插入节点

<p id="p">hello world</p>
    <script>
        var p =  document.getElementById("p");
        p.after("after")
        p.before("before")
    </script>

删除节点

removeChild() 删除节点

<div id="app">
  <div id="child">
    hello world
  </div>
</div>
    <script>
        // removeChild() 让元素从DOM树，渲染树中消失
        var app = document.getElementById("app")
        var child = document.getElementById("child")
        app.removeChild(child)
    </script>

替换节点

replaceChild 替换节点

parentNode.replaceChild(newNode,targetNode) 替换某个元素

<div id="app">
  <div id="child">
    child
    </div>
</div>
    <script>
        var app = document.getElementById("app")
        var child = document.getElementById("child")
        var p = document.createElement("p")
        p.innerHTML = "hello world"
        app.replaceChild(p,child)
        console.log(app);
    </script>

克隆节点

cloneNode 克隆节点

node.cloneNode( )  
括号为空或false浅拷贝，只复制标签不复制内容
括号为true，深拷贝，也复制内容

<div id="app">
    <div id="one">hello world</div>
</div>
    <script>
        var app = document.getElementById("app")
        var one = document.getElementById("one")
        var test = one.cloneNode(true)
        console.log(test);
        app.appendChild(test);
        console.log(app);
    </script>

节点和元素节点

firstChild         获取第一个子节点
firstElementChild  获取第一个元素子节点
lastChild
lastElementChild 
nextSibling
nextElementSibling
previousSibling
previousElementSibling

<ul id="app">
        <li>html</li>
        <li>css</li>
</ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.firstElementChild);
    </script>

JavaScript 基础

DOM节点