• 中文
    • English
  • 注册
  • 查看作者
  • 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>

    山东省
  • 0
  • 0
  • 0
  • 1.2k
  • 请登录之后再进行评论

    登录

    赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    单栏布局 侧栏位置: