1-1DOM:document object model 文档对象模型

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

1.DOM基础 - 图1

1-2节点

节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
1.DOM基础 - 图2

1-3获取节点

A.getElementById()

B.getElementsByTagName()

  1.  <div class="app">
  2.         hello world
  3.     </div>
  4.     <div class="test">
  5.         good
  6.     </div>
  7.     <script>
  8.         var app=document.getElementsByTagName("div");
  9.         console.log(Array.isArray (app))
  10.         console.log(app.length)
  12.         for(var i=0;i<app.length;i++){
  13.             console.log(app[i])
  14.         }
  16.     </script>

C.getElementsByClassName()

  1.  <!-- div.one*4{hello $} -->
  2.     <div class="one">hello 1</div>
  3.     <div class="one">hello 2</div>
  4.     <div class="one">hello 3</div>
  5.     <div class="one">hello 4</div>
  6.     <script>
  8.         //不能对HTML Collection执行点击事件，只能对具体元素执行点击事件
  9.         var all=document.getElementsByClassName("one");
  10.         // console.log(all);
  11.         for(var i=0;i<all.length;i++){
  12.             all[i].onclick=function(){
  13.                 // console.log("hello")
  15.                 //this-->在事件中，谁执行事件，this就指谁
  16.                 this.style.display="none"//点谁谁消失
  17.             }
  18.         }
  19.     </script>

D.querySelectorAll()

  1. <div id="app">
  2.         app
  3.         <div class="one">one1</div>
  4.         <div class="one">one1</div>
  5.         <div class="one">one1</div>
  6.     </div>
  7.     <script>
  8.         var app=document.getElementById("app")
  9.         console.log(app);
  10.         //NodeList(节点列表)
  11.         var all=document.querySelectorAll(".one")
  12.         console.log(all);
  13.     </script>

练习

实现下面的例子

1.DOM基础 - 图3

  1.  <input  id="input" type="checkbox">篮球
  2.     <!-- 点击事件onclick
  3.         input输入框有checked,true表示选中，false表示没有选中
  4.      -->
  5.     <script>
  6.         var input=document.getElementById("input");
  7.         input.checked=false;
  8.         console.log(input.id)
  9.     </script>
  1.  <button id="all">全选</button>
  2.     <button id="notall">不选</button>
  3.     <button id="reverse">反选</button>
  4.     <div>
  5.         <input type="checkbox">足球
  6.         <input type="checkbox">蓝球
  7.         <input type="checkbox">乒乓球
  8.         <input type="checkbox">羽毛球
  9.     </div>
  10.     <script>
  11.         var all=document.getElementById("all");
  12.         var inputs=document.getElementsByTagName("input");
  13.         //1.对btn执行点击事件
  14.         all.onclick=function(){
  15.             //将所有的input的checked属性设置为true
  16.             for(var i=0;i<inputs.length;i++){
  17.                 inputs[i].checked=true;
  18.             }
  19.         }
  20.         var all=document.getElementById("notall");
  21.         var inputs=document.getElementsByTagName("input");
  22.         //1.对btn执行点击事件
  23.         all.onclick=function(){
  24.             //将所有的input的checked属性设置为false
  25.             for(var i=0;i<inputs.length;i++){
  26.                 inputs[i].checked=false;
  27.             }
  28.         }
  29.         var all=document.getElementById("reverse");
  30.         all.onclick=function(){
  31.             for(var i=0;i<inputs.length;i++){
  32.                 console.log(inputs[i].checked)
  33.                 inputs[i].checked=(inputs[i].checked)?false:true;
  34.             }
  35.         }
  36.     </script>

实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示

  1. <div style="display: block;">
  2.         div</div>
  3.     <button id="btn">btn</button>
  4.     <script>
  5.         var div = document.getElementsByTagName("div")[0];
  6.         var btn = document.getElementById("btn");
  7.         btn.onclick = function () {
  8.             var d = div.style.display;
  9.             div.style.display = (d == "block") ? "none" : "block";
  10.         }
  11.     </script>

1-4修改元素节点的内容,样式

  • 修改元素节点的内容

    1. innerHTML

  • 修改样式

    1. object.style.color="pink";
    2. object.style["color"]="pink";

    练习

    练习：隔行变色
    image.png

    1. <ul>
    2.       <li>1</li> <!--lis[0]-->
    3.       <li>2</li><!--lis[1]-->
    4.       <li>3</li><!--lis[2]-->
    5.       <li>4</li><!--lis[3]-->
    6.       <li>5</li><!--lis[4]-->
    7.   </ul>
    8.   <script>
    9.       // i%2 0%2-->0 1%2-->1 2%2-->0 3%2-->1 4%2-->0 
    10.       var lis=document.getElementsByTagName("li");
    11.       for(var i=0;i<lis.length;i++){
    12.           if(i%2==0){
    13.               lis[i].style.backgroundColor="pink";
    14.           }
    15.           else{
    16.               lis[i].style.backgroundColor="blue";
    17.           }
    18.       }
    19.   </script>

    1-5节点的分类nodeType

    1. a.nodeType==1  为元素节点
    2. b.nodeType==2  为属性节点
    3. c.nodeType==3  位文本节点
    1. <p id="app">hello</p>
    2.   <script>
    3.       //getAttributeNode()获取属性节点 firstChild获取第一个子节点 
    4.       var app = document.getElementById("app");
    5.       var id = app.getAttributeNode("id")
    6.       console.log(app.nodeType);
    7.       console.log(app.firstChild.nodeType);
    8.       console.log(id.nodeType);
    9.   </script>

    1-6查找节点

    //childNode 获取所有节点
    //children 只获取元素节点（子节点）

    1. <ul id="app">
    2.       <li>hello</li>
    3.       <li>hello</li>
    4.       <li>hello</li>
    6.   </ul>
    7.   <script>
    8.       //childNode  获取所有节点
    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>

    1-7增加获取节点

    appendChild(node)向父元素后面添加一个节点
    createElement(); //创建元素节点
    createTextNode(); //创建文本节点

    1. <div id="app">
    2.   </div>
    3.   <script>
    4.       var app=document.getElementById("app");
    5.       var p=document.createElement("p");
    6.       var txt=document.createTextNode("hello");
    7.       //向父元素的后面添加一个节点
    8.       p.appendChild(txt);
    9.       app.appendChild(p);
    10.   </script>

    insertBefore（parentNode.insertBefore(newNode,targetNode)）在某一元素前添加节点
    给元素添加内容 innerHTML

    1. <ul id="app">
    2.       <li>html</li>
    3.       <li id="h5">html</li>
    4.   </ul>
    5.   <script>
    6.       //给元素添加内容 innerHTML
    7.       // insertBefore 在某一元素前添加节点 (parentNode.insertBefor(newNode,targetNode))
    8.       var app=document.getElementById("app");
    9.       var h5=document.getElementById("h5");
    10.       var li=document.createElement("li");
    11.       li.innerHTML="vue";
    12.       // console.log(li);
    13.       app.insertBefore(li,h5);
    15.   </script>

    1-8删除节点

    removeChild()删除节点(parentNode.removeChild(childNode))

    1. <div id="app">
    2.       <div id="child">
    3.           hello
    4.       </div>
    5.   </div>
    6.   <script>
    7.       //removeChild()删除节点
    8.       var app=document.getElementById("app");
    9.       var child=document.getElementById("child");
    10.       app.removeChild(child);
    11.   </script>

    1-9修改节点（替换节点）

    replaceChild (newNode,targetNode)替换某个元素节点

    1. <div id="app">
    2.       <div id="child">
    4.       </div>
    5.   </div>
    6.   <script>
    7.       // replaceChild  (newNode,targetNode)替换某个元素节点
    8.       var app=document.getElementById("app");
    9.       var child=document.getElementById("child");
    10.       var p=document.createElement("p")
    11.       p.innerHTML="hello";
    12.       app.replaceChild(p,child);
    13.   </script>

    1-10克隆节点

    cloneNode node.cloneNode(true)

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