1、如何获取DOM

• 在文档上通过ID获取

document.getElementById();

• class HTMLCollection 是一个伪数组集合

document.getElementsByClassName();

• 通过标签名获取

   document.getElementsByTagName();

  <div id="app">one</div>
    <div class="one">one1</div>
    <div class="one">one2</div>
    <div class="one">one3</div>
    <p class="two">1</p>
    <p class="two">1</p>
    <p class="two">1</p>
    <script>
        /* 在文档上通过ID获取 */
        var app = document.getElementById("app");
        console.log(app);
        /* class HTMLCollection  数组 */
        var all = document.getElementsByClassName("one");
        console.log(all);
        /* 通过标签名获取 */ 
        var ps = document.getElementsByTagName("p");
        console.log(ps)
    </script>

• 通过选择器获取

document.querySelectorAll();

<div class="parent">
        <p>hello1</p>
        <p>hello2</p>
    </div>
    <script>
        /* 通过选择器获取 */ 
        var all = document.querySelectorAll(".parent p");
        console.log(all);
    </script>

2、事件

2-1.事件格式

element(获取的DOM).eventName(事件名) = function()(函数){
//执行代码
}

<button id="btn">btn</button>
    <script>
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            console.log("hello worle")
        }
        /* 
        element(获取的DOM).eventName(事件名) = function()(函数){
            //执行代码
        }
        */ 
    </script>

2-2.单击事件

element.onclick = function(){
}

<button id="btn">btn</button>
    <script>
        /* 更改元素的内容，样式，结构 */ 
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            /* this指向正在执行事件的当前对象 */
            console.log(this)
            this.innerHTML = "change"
        }
        /* 
        innerHTML   --可以改变元素的内容
        */ 
    </script>

3、更改元素

3-1.单独更改元素

<button id="app">发送验证码</button>
    <script>
        var app = document.getElementById("app");
        app.onclick = function(){
            this.innerHTML = "60";
            this.style.backgroundColor = "#999";
            this.style.color = "#fff";
            this.style.fontSize = "30px";
        }
        /*
        更改css的语法
        element.style.cssName
        */ 
    </script>

3-2集体更改元素

<!-- 点击谁，就将谁隐藏 -->
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        /* tips:只能对单个对象执行事件，不能对集合执行事件 */ 
        console.log(lis)
        for( var i=0;i<lis.length;i++){
            lis[i].onclick = function () {
                console.log(this);
                this.style.display = "none";
            }
        }
    </script>

4、获取父子兄弟节点

4-1.获取元素的父节点

• child.parentNode;

  <div id="parent">
        <div id="child">child</div>
    </div>
    <!-- 获取父节点
        parentNode  获取元素的的父节点
    -->
    <script>
        var child = document.getElementById("child");
        console.log(child);
        var parent = child.parentNode;
        console.log(parent);
    </script>

  

  4-2.获取子节点

• parent.childNodes;获取父元素下所有类型的子节点

• 空格为文本节点

  <div id="parent">
        <p class="one">1</p>
        <p class="one">2</p>
        <p class="one">3</p>
    </div>
    <script>
        /* tips:childNodes获取所有类型的节点 */ 
        var parent = document.getElementById("parent");
        var childs =parent.childNodes;
        console.log(childs);
        console.log(parent.firstChild)
    </script>

  

  4-3.节点的类型

  节点的类型 nodeType
  1、元素节点 1
  2、属性节点 2
  3、文本节点 3

  <p id="app">hello world</p>
    <script>
        /* 节点的类型   nodeType
        1、元素节点         1
        2、属性节点         2
        3、文本节点         3
         */ 
        var app = document.getElementById("app");
        console.log(app.nodeType);
        var app_id = app.getAttributeNode("id");
        console.log(app_id.nodeType);
        var txt = app.firstChild;
        console.log(txt.nodeType);
  </script>

  

  4-4.选择指定元素节点

• tips:childNodes获取所有类型的节点

• 利用for循环只选取节点类型为1(元素节点)的输出

  <div id="parent">
        <p class="one">1</p>
        <p class="one">2</p>
        <p class="one">3</p>
    </div>
    <script>
        /* tips:childNodes获取所有类型的节点 */ 
        var parent = document.getElementById("parent");
        var childs =parent.childNodes;
        var arr=[];
        /* 利用for循环只选取节点类型为1(元素节点)的输出 */ 
        for(var i=0;i<childs.length;i++){
            if(childs[i].nodeType==1){
                console.log(childs[i]);
                arr.push(childs[i]);
            }
        }
        console.log(arr)
    </script>

  

• childNodes

• children —只获取元素节点
• firstChild —获取父元素的第一个子节点
• firstElementChild —获取父元素下面的第一个元素节点
• lastChild

• lastElementChild

  <div id="parent">
        <p class="one">1</p>
        <p class="one">2</p>
        <p class="one">3</p>
    </div>
    <script>
        var parent = document.getElementById("parent");
        /* 
        childNodes
        children  --只获取元素节点
        firstChild  --获取父元素的第一个子节点
        firstElementChild  --获取父元素下面的第一个元素节点
        lastChild  
        lastElementChild
        */ 
        var childs = parent.children;
        var firstChild = parent.firstChild;
        var firstElement = parent.firstElementChild;
        var lastChild = parent.lastChild;
        var lastElement = parent.lastElementChild;
        console.log(childs);
        console.log(firstChild);
        console.log(firstElement);
        console.log(lastChild);
        console.log(lastElement)
    </script>

  

  4-5.兄弟节点

• previousSibling —获取前一个兄弟节点

• previousElementSibling —获取前一个兄弟元素节点

• nextSibling —获取后一个兄弟节点

• nextElementSibling —获取后一个兄弟元素节点

  <div>one</div>
    <div id="md">middle</div>
    <div>two</div>
    <script>
        /*
        previousSibling  --获取前一个兄弟节点
        previousElementSibling  --获取前一个兄弟元素节点
        nextSibling  --获取后一个兄弟节点
        nextElementSibling  --获取后一个兄弟元素节点
        */ 
        var md = document.getElementById("md")
        var siblings = md.previousSibling;
        var sibling = md.previousElementSibling;
        var nextsiblings = md.nextSibling;
        var nextSibling = md.nextElementSibling;
        console.log(siblings);
        console.log(sibling);
        console.log(nextsiblings);
        console.log(nextSibling);
    </script>

  

  5、arr数组的增加

• arr.push();

  <script>
        var arr = [];
        arr.push("html");
        console.log(arr);
        arr.push("css");
        console.log(arr)
    </script>

  

  6、新增子节点

  6-1.新增子元素在最后

• appendChild —在父元素的最后面添加一个子元素,必须是一个节点(Node)

• createElement —创建一个元素

• createTextNode —创建一个文本节点

  <div id="app">
        <p>one</p>
        <!-- <p>hello world</p> -->
    </div>
    <script>
        /*
        appendChild  --在父元素的最后面添加一个子元素,必须是一个节点(Node)
        createElement  --创建一个元素
        createTextNode  --创建一个文本节点
        */ 
        var app = document.getElementById("app");
        var p = document.createElement("p");
        var p1 = document.createElement("p1")
        var txt = document.createTextNode("hello world");
        p.innerHTML = "hello world";
        console.log(p);
        app.appendChild(p);
        console.log(p.nodeType);
        p1.appendChild(txt);
        console.log(p1);
        app.appendChild(p1);
    </script>

  

• appendChild —只能添加节点(Node)

• append —可以添加节点和字符串

  <div id="app">
    </div>
    <script>
        /*
        appendChild  --只能添加节点(Node)
        append  --可以添加节点和字符串
        */
       var app = document.getElementById("app");
       var txt = document.createTextNode("hello world");
       app.appendChild(txt);
       app.append("good")
    </script>

  

  6-2.新增子元素在最前

• prepend —在父元素的最前面插入节点

  <div id="app">
        <!-- <p>前面</p> -->
        <div>first</div>
    </div>
    <script>
        /*
        prepend  --在父元素的最前面插入节点
        */ 
        var app = document.getElementById("app");
        var p = document.createElement("p");
        p.innerHTML = "前面";
        app.prepend(p);
    </script>

  

  7、删除一个节点

  7-1.删除指定获取子节点

• removeChild —删除指定子节点

  <div id="app">
        <p>one</p>
        <p id="two">two</p>
    </div>
    <script>
        /*
        removeChild  --删除指定子节点
        */ 
        var app = document.getElementById("app");
        var two = document.getElementById("two");
        app.removeChild(two)
    </script>

  

  7-2.点击事件删除

  <div id="app">
        <p>one</p>
        <p id="two">two</p>
        <button id="btn">删除</button>
    </div>
    <script>
        var app = document.getElementById("app");
        var two = document.getElementById("two");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            app.removeChild(two);
        }
    </script>

  

  7-3.remove()指定对象删除

• remove();

• element.remove(); —直接指定对象执行删除

  <div id="app">
        <p>one</p>
        <p id="two">two</p>
        <button id="btn">删除</button>
    </div>
    <script>
        /*
        remove()
        element.remove();  --直接指定对象执行删除
        */ 
        var two = document.getElementById("two");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            two.remove();
        }
    </script>

  8、改变一个节点

  8-1.父元素改变替换子节点

• 替换节点

parentNode.replaceChild(newNode,targetNode)

<div id="app">
        <!-- <h1>change</h1> -->
        <p id="child">hello world</p>
    </div>
    <script>
        /*
        替换节点
        parentNode.replaceChild(newNode,targetNode)
        */ 
        var app = document.getElementById("app");
        var h1 = document.createElement("h1");
        h1.innerHTML = "change"
        var child = document.getElementById("child");
        app.replaceChild(h1,child);
    </script>

8-2.点击改变节点

<div id="app">
        <!-- <h1>change</h1> -->
        <p id="child">hello world</p>
        <button id="btn">改变</button>
    </div>
    <script>
        /*
        替换节点
        parentNode.replaceChild(newNode,targetNode)
        */ 
        var app = document.getElementById("app");
        var h1 = document.createElement("h1");
        h1.innerHTML = "change"
        var child = document.getElementById("child");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            app.replaceChild(h1,child);
        }
    </script>

9、checkbox多选框

9-1.input多选框的属性

• input输入框有属性checked

    true 默认选中<br />        false 默认没有选中

  <input class="like" type="checkbox">足球
    <script>
        /*
        input输入框有属性checked
        true 默认选中
        false 默认没有选中
        */ 
        var input = document.getElementsByClassName("like");
        input[0].checked = true;
    </script>

  

  9-2.多选，不选，反选选中测试

• for循环设置全体选框

• if判断设置反选

  <input class="like" type="checkbox">足球
    <input class="like" type="checkbox">篮球
    <input class="like" type="checkbox">排球
    <input class="like" type="checkbox">游泳 <br>
    <button id="all">全选</button>
    <button id="no">不选</button>
    <button id="reverse">反选</button>
    <script>
        /*
        input输入框有属性checked
        true 默认选中
        false 默认没有选中
        */ 
        var input = document.getElementsByClassName("like");
        var all = document.getElementById("all");
        var no = document.getElementById("no");
        var reverse = document.getElementById("reverse");
        all.onclick = function(){
            for(var i=0;i<input.length;i++){
                input[i].checked = true
            }
        }
        no.onclick = function(){
            for(var i=0;i<input.length;i++){
                input[i].checked = false
            }
        }
        reverse.onclick = function(){
            for(var i=0;i<input.length;i++){
                if(input[i].checked==true){
                    input[i].checked=false;
                }
                else{
                    input[i].checked=true;
                }
            }
        }
    </script>

  
  全选：
  
  不选：
  
  反选前：
  
  反选后：
  

  9-3.反选的优化

  1.if-else 判断取反
  2.三元运算式 判断取反
  3.取反运算符

  <input class="like" type="checkbox">足球
    <input class="like" type="checkbox">篮球
    <input class="like" type="checkbox">排球
    <input class="like" type="checkbox">游泳 <br>
    <button id="reverse">反选</button>
    <script>
        /*
        input输入框有属性checked
        true 默认选中
        false 默认没有选中
        1.if-else 判断取反
        2.三元运算式 判断取反
        3.取反运算符
        */ 
        var input = document.getElementsByClassName("like");
        var reverse = document.getElementById("reverse");
        reverse.onclick = function(){
            for(var i=0;i<input.length;i++){
                // input[i].checked = (input[i].checked==true)? false:true
                input[i].checked = !input[i].checked
            }
        }
    </script>

  

  10、奇偶数项的选择

• odd: 奇数项

• even：偶数项

  10-1.CSS方法

  <style>
        /* 
        odd:奇数项
        even：偶数项
        */
        li:nth-child(odd){
            color: red;
        }
        li:nth-child(even){
            color: orange;
        }
    </style>
  </head>
  <body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>

  

  10-2.JavaScript方法

  加入点击事件改变奇偶项各自样式：

  <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <button id="one">所有偶数的颜色变red</button>
        <button id="two">所有奇数的颜色变orange</button>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        var one = document.getElementById("one");
        var two = document.getElementById("two");
        one.onclick = function(){
            for(var i=0;i<lis.length;i++){
                if(i%2==0){
                    lis[i].style.color = "red";
                }
            }
        }
        two.onclick = function(){
            for(var i=0;i<lis.length;i++){
                if(i%2!=0){
                    lis[i].style.color = "orange";
                }
            }
        }
    </script>