9：JS查询元素和获取元素

一.  查询元素

1. 根据ID名查询：getElementById(“IdName”)

<button id="btn1">按钮1</button>
<script type="text/javascript">
    window.onload = function () {
        var btn1 = document.getElementById("btn1");
        console.log(btn1);
        //输出<button id="btn1">按钮1</button>
    };
</script>

2. 根据标签名查询：getElementsByTagName(“TagName”)

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
    window.onload = function () {
        var btns = document.getElementsByTagName("button");
        console.log(btns);
        console.log(btns.length) //2
        /*  
        输出：      
        HTMLCollection(2) [button#btn1, button#btn2, btn1: button#btn1, btn2: button#btn2]
        0: button#btn1
        1: button#btn2
        length: 2
        btn1: button#btn1
        btn2: button#btn2
        __proto__: HTMLCollection
        */
    };
</script>

3.  根据类名查询：getElementsByClassName(“ClassName”)

<button id="btn1" class="btns">按钮1</button>
<button id="btn2" class="btns">>按钮2</button>
<script type="text/javascript">
    window.onload = function () {
        var btns = document.getElementsByClassName("btns");
        console.log(btns);
        /*
        输出：
         HTMLCollection(2) [button#btn1.btns, button#btn2.btns, btn1: button#btn1.btns, btn2: button#btn2.btns]
        0: button#btn1.btns
        1: button#btn2.btns
        length: 2
        btn1: button#btn1.btns
        btn2: button#btn2.btns
        __proto__: HTMLCollection
        */
    };
</script>

4.  根据name查询：getElementsByName(“Name”)

<script type="text/javascript">
    window.onload = function () {
        var zjs = document.getElementsByName("zj");
        console.log(zjs);
    };
</script>
<input type="checkbox" name="zj"/>
<input type="checkbox" name="zj"/>
<input type="checkbox" name="zj"/>

5.  根据子元素查询：元素.childNodes;

<script type="text/javascript">
    window.onload = function () {
        var ul = document.getElementsByTagName("ul")[0];
        var ulChildren = ul.childNodes;
        console.log(ulChildren);
        /*
        NodeList(9) [text, li, text, li, text, li, text, li, text]
        0: text
        1: li
        2: text
        3: li
        4: text
        5: li
        6: text
        7: li
        8: text
         */
    };
</script>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

可以看到，我们获取了ul的所有子元素，但是却有9个子元素，这是因为js默认把ul下的文本节点（比如上面的换行就是text）和注释节点也作为了一个子元素来看待。如果我们把上面的列表修改成：

<ul><li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

此时ul便只有八个子元素。

6.  根据父元素查询：元素.parentNode;

<script type="text/javascript">
    window.onload = function () {
        var li = document.getElementsByTagName("li")[0];
        var liParent = li.parentNode;
        console.log(liParent);
    };
</script>
<ul><li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

7.  根据上一个兄弟元素查询：元素.previousSibling;和元素.previousElementSibling;

previousElementSibling 可以忽略掉文本节点、注释节点，所以列表项2的上一个兄弟元素就是列表项1。

而previousSibling是不忽略文本节点、注释节点的，所以列表项2的上一个子元素就是换行text；

<script type="text/javascript">
    window.onload = function () {
        var li = document.getElementsByTagName("li")[1];
        console.log(li); //<li>列表项2</li>
        var liParent = li.previousSibling;
        console.log(liParent); //#text


        liParent = li.previousElementSibling;
        console.log(liParent);//<li>列表项1</li>

    };
</script>
<ul><li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

8.  根据下一个兄弟元素查询：元素.nextSibling;和元素.nextElementSibling;

nextSibling和nextElementSibling的区别和和上一个兄弟元素查询同理。

<script type="text/javascript">
    window.onload = function () {
        var li = document.getElementsByTagName("li")[1];
        console.log(li); //<li>列表项2</li>
        var liParent = li.nextSibling;
        console.log(liParent); //#text


        liParent = li.nextElementSibling;
        console.log(liParent);//<li>列表项3</li>

    };
</script>
<ul><li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

二.  添加元素

我们使用createElement()创建一个元素，然后使用appendChild()将其添加到指定位置：

<div id="box"></div>
<button id="btn">添加h1</button>
<script type="text/javascript">
    window.onload = function () {
        var divBox = document.getElementById("box");
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            var h1 = document.createElement("h1");
            h1.innerHTML = "一级标题";
            h1.style = "color:red"; //方法一
            h1.style.color = "red";//方法二

            divBox.appendChild(h1);
        }
    };
</script>