在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥

nodeType 判断节点类型

1 元素节点 2 属性节点 3 文本节点

  1.      <!-- nodeType  判断一个节点的类型
  2.         1  元素节点
  3.         3  文本节点
  4.         2  属性节点
  5.      -->                                               
  6.      <!-- 
  7.          getAttributeNode()  获取属性节点
  8.          firtChild获取第一个子节点
  9.       -->
  10.     <p id="app">hello world</p>
  11.     <script>
  12.         var app = document.getElementById("app");
  13.         var id = app.getAttributeNode("id");
  14.         console.log(app.nodeType)
  15.         console.log(app.firstChild.nodeType)
  16.         console.log(id.nodeType)
  17.     </script>

childNodes—所有的子节点 children—只会获取元素节点

  1. <ul id="app">
  2.         <li>hello world</li>
  3.         <li>hello world</li>
  4.         <li>hello world</li>
  5.         <li>hello world</li>
  6.     </ul>
  7.     <script>
  8.         // childNodes--包含所有的子节点(不管文本还是元素都包含)
  9.         // children  --只会获取子节点
  10.         var app =  document.getElementById("app");
  11.         var childs = app.childNodes;
  12.         var children = app.children;
  13.         console.log(childs)
  14.         console.log(children)
  15.     </script>

push 添加数组元素

  1. <script>
  2.          var arr = ["html","css"];
  3.         //  push
  4.         arr.push("js");
  5.         console.log(arr);
  6.     </script>

nodeType,push 获取所有的元素节点

  1.  <ul id="app">
  2.         <li>hello world</li>
  3.         <li>hello world</li>
  4.         <li>hello world</li>
  5.         <li>hello world</li>
  6.     </ul>
  7.     <script>
  8.         // 获取所有的元素节点
  9.       var app = document.getElementById("app");
  10.       var childs = app.childNodes;
  11.       var arr = [];
  12.       for(var i=0;i<childs.length;i++){
  13.             if(childs[i].nodeType == 1){
  14.                   arr.push(childs[i])
  15.                   console.log(i)   
  16.             }
  17.             // console.log(i)
  18.         }
  19.         console.log(arr);
  20.     </script>

添加节点 createElement，createTextNode

appendChild() 方法向节点添加最后一个子节点

  1.  <!-- 增加节点
  2.         createElement();
  3.         createTextNode();
  4.         appendChild();
  5.      -->
  6.     <div id="app">
  7.        <div>
  8.            hello world</div>
  9.        </div>
  10.     </div>
  11.     <script>
  12.         var app = document.getElementById("app");
  13.         var p = document.createElement("p");
  14.         var txt = document.createTextNode("hello world");
  15.         p.appendChild(txt);
  16.         app.appendChild(p);
  17.     </script>

innerHTML，insertBefore()

innerHTML 属性：设置或返回表格行的开始和结束标签之间的 HTML。 insertBefore() ：方法在您指定的已有子节点之前插入新的子节点。

  1. <ul id="app">   
  2.     <li>html</li>
  3.     <li id="js">javascript</li>
  4. </ul>
  5. <script>
  6.     // 给元素添加内容innerHTML 
  7.     /* 
  8.     parentNode.insertBefore(newNode,targetNode)
  9.      */
  10.     var app =  document.getElementById("app");
  11.     var js = document.getElementById("js");
  12.     var li = document.createElement("li");
  13.     li.innerHTML = "vue";
  14.     app.insertBefore(li,js);
  15. </script>

元素消失 removeChild()

  1.  <div id="app">
  2.     <div id="child">child</div>
  3. </div>
  4. <script>
  5.     // removeChild()让从元素DOM树,渲染树上都消失
  6.     var app = document.getElementById("app");
  7.     var child = document.getElementById("child");
  8.     app.removeChild(child);
  9. </script>

替换元素 replaceChild()

repalceChild(newNode,targetNode)

  1. <div id="app">
  2.     <div id="child">child</div>
  3. </div>
  4. <script>
  5.     var app = document.getElementById("app");
  6.     var child = document.getElementById("child");
  7.     var p = document.createElement("p");
  8.     p.innerHTML = "hello world";
  9.     app.replaceChild(p,child);
  10. </script>

克隆节点

  1. <div id="app">
  2.     <div class="one">
  3.         hello world
  4.     </div>
  5. </div>
  6. <script>
  7.     // cloneNode
  8.     var app = document.getElementById("app");
  9.     var one = document.getElementsByClassName("one")[0];
  10.     var test = one.cloneNode(true);
  11.     console.log(test);
  12.     app.appendChild(test);
  13. </script>

element.value

输入框中内容

  1.     <input type="text" id="input" value="helloworld">
  2.     <script>
  3.         /* element.value */
  4.         var input =  document.getElementById("input");
  5.         input.onkeyup = function(event){
  6.             if(event.keyCode ==13 ){
  7.                 console.log(this.value)
  8.             }
  9.         }
  10.     </script>
  1. <head>
  2.    <style>
  3.         textarea{
  4.             border:1px solid #333;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <p>还可以输入<em id="em" style="color:red">0</em>/30</p>
  10.     <textarea  id="txt" cols="30" rows="10"></textarea>
  11.     <script>
  12.         var txt =  document.getElementById("txt");
  13.         var em =  document.getElementById("em")
  14.         txt.onkeydown = function(){
  15.             var length = this.value.length;
  16.             if(length<=30){
  17.                 em.innerHTML =  this.value.length;
  18.             }else{
  19.                 alert("只能输入30个字符")
  20.             }
  21.         }
  22.     </script>

textarea字数限制（有问题）

  1.     <style>
  2.         textarea{
  3.             border:1px solid #333;
  4.         }
  5.     </style>
  7. <body>
  8.     <p>还可以输入<em id="em" style="color:red">0</em>/30</p>
  9.     <textarea  id="txt" cols="30" rows="10"></textarea>
  10.     <script>
  11.         var txt =  document.getElementById("txt");
  12.         var em =  document.getElementById("em")
  13.         txt.onkeydown = function(){
  14.             var length = this.value.length;
  15.             if(length<=30){
  16.                 em.innerHTML =this.value.length;
  17.             }else{
  18.                 alert("只能输入30个字符")
  19.             }
  21.         }
  22.     </script>

在javascript中声明的全局变量

  1.     <script>
  2.         /* 在javascript中声明的全局变量是window的属性,方法是window的方法 */
  3.         var a = 10;
  4.         function go(){
  5.             console.log("hello world")
  6.         }
  7.         // const window = {
  8.         //     a:10,
  9.         //     go:function(){
  10.         //         console.log("hello world")
  11.         //     }
  12.         // }
  13.         // console.log(window.a);
  14.         // window.go();
  15.         console.log(a);
  16.         go();
  17.     </script>

parentNode 元素的父节点

  1.  <ul>
  2.         <li>html  <button>删除</button></li>
  3.         <li>css  <button>删除</button></li>
  4.         <li>javascript  <button>删除</button></li>
  5.     </ul>
  6.     <script>
  7.         var btns = document.getElementsByTagName("button");
  8.         for(var i=0;i<btns.length;i++){
  9.             btns[i].onclick =  function(){
  10.                var temp =  window.confirm("确定吗");
  11.                if(temp){
  12.                    this.parentNode.style.display = "none"
  13.                }
  14.             }
  15.         }
  16.     </script>

递归 函数调用函数自身

  1.  /* 函数调用函数自身,就叫递归 */
  2.         function show(){
  3.             setTimeout(function(){
  4.                 console.log(1)
  5.                 show();
  6.             },1000)
  7.         }
  8.         show()