原生js获取dom元素的方式总结

最新推荐文章于 2022-12-16 01:51:08 发布

皮皮停

最新推荐文章于 2022-12-16 01:51:08 发布

阅读量629

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_38888512/article/details/105169935

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

原生js获取元素只有两种方式：
第一种是通过document对象内置的方法。
第二种是通过document节点获取。
方法可以结合节点的方式来获取元素。

第一种：通过方法

动态方法

无论在何时获取元素，document中的对象如何变化，使用动态方法中获取的元素都是最新状态的。

document.getElementById()

通过元素的id获取，id元素的唯一标识。在IE8以下，id不区分大小写。

    <div id="demo"></div>
    <script>   
        var mDiv = document.getElementById("demo")
    </script>

document.getElementsByTagName()

通过标签名选择元素，返回的结构是类数组。

    <div id="demo"></div>
    <script>   
        var mDiv = document.getElementsByTagName("div")
        // mDiv返回结果如下
        // HTMLCollection [div#demo, demo: div#demo]
        // length: 1
        // 0: div#demo
        // demo: div#demo
        // __proto__: HTMLCollection
    </script>

document.getElementsByClassName()

通过类名选择元素，返回的结果为类数组形式。IE8以下不支持。

    <div class="demo"></div>
    <script>   
        var mDiv = document.getElementsByClassName("demo")
        // mDiv 返回结果如下：
        // HTMLCollection [div.demo]
        // length: 1
        // 0: div.demo
        // __proto__: HTMLCollection
    </script>

document.getElementsByName()

通过name属性筛选元素，返回的结果为类数组形式。IE10以下浏览器不支持。

    <div name="demo"></div>
    <script>   
        var mDiv = document.getElementsByName("demo")
        // mDiv返回结果
        // NodeList [div]
        // length: 1
        // 0: div
        // __proto__: NodeList
    </script>

静态方法

获取当前状态的元素，获取之后，如document中元素有变动，静态方法已获取的元素不会更新。
使用的语法和css选择器类似。
IE8以下不支持。

document.querySelector()

返回获取符合条件的第一个元素。

	<body>
    <div name="demo"></div>
    <div ></div>
    <script>   
        var mDiv = document.querySelector("body > div")
        //mDiv返回结果为：
        //<div name="demo"></div>
    </script>
    </body>

document.querySelectorAll()

返回获取符合条件的所有元素，形式为类数组形式。

<body>
    <div name="demo"></div>
    <div ></div>
    <script>   
        var mDiv = document.querySelectorAll("body > div")
        // mDiv返回结果为：
        // NodeList(2) [div, div]
        // length: 2
        // 0: div
        // 1: div
        // __proto__: NodeList
    </script>
</body>

第二种：通过节点

通过节点获取也有两种，一种是所有节点，一种是html的树节点。两种区别在于，html树节点只会返回html树上的元素，而所有节点会包含文本节点等其他节点。

所有节点

parentNode

获取父节点元素

    <div name="demo">
        <span></span>
    </div>
    <script>   
        var mSpan = document.getElementsByTagName("span")[0]
        var par = mSpan.parentNode
        // par返回结果为：
        // <div name="demo">
        // <span></span>
        // </div>
    </script>

ChildNodes

以类数组的形式，返回该元素下的所有字节点。

节点类型根据节点对象nodeType属性值，有如下分类：

节点类型	nodeType	说明
元素	1	返回元素的标签名
属性	2
文本	3	返回text，空格也算一个文本节点
注释节点	8	返回comment
document	9
DocumentFragment	1 1

无空格：

    <div name="demo"><!-- span --><span>我是span</span></div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var chds = mDiv.childNodes
        // chds返回结果为：
        // NodeList(2) [comment, span]
        // length: 2
        // 0: comment
        // 1: span
        // __proto__: NodeList
    </script>

含空格：

    <div name="demo">
        <!-- span -->
        <span>我是span</span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var chds = mDiv.childNodes
        // chds返回结果为：
        // NodeList(5) [text, comment, text, span, text]
        // length: 5
        // 0: text
        // 1: comment
        // 2: text
        // 3: span
        // 4: text
        // __proto__: NodeList
    </script>

firstChild

返回第一个子元素，相当于childNoes[0]。

    <div name="demo">
        <!-- span -->
        <span>我是span</span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var firchd = mDiv.firstChild //#text
        var firchd1 = mDiv.childNodes[0] //#text
    </script>

lastChild

返回最后一个子元素，相当于childNodes[childNodes.length-1]。

    <div name="demo">
        <!-- span -->
        <span>我是span</span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var latchd = mDiv.lastChild //#text
        var latchd1 = mDiv.childNodes[mDiv.childNodes.length-1] //#text
    </script>

nextSibling

返回后一个兄弟节点。

    <div name="demo">
        <!-- span -->
        <span>我是span</span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var firchd1 = mDiv.childNodes[0] //#text
        var nexnode = firchd1.nextSibling //<!-- span -->
    </script>

previousSibling

前一个兄弟节点。

     <div name="demo">
        <!-- span -->
        <span>我是span</span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var firchd1 = mDiv.childNodes[0] //#text
        var nexnode = firchd1.nextSibling //<!-- span -->
        var prenode = nexnode.previousSibling //#text
    </script>

html的树节点

parentElement

返回父级树节点元素对象。IE10以下不兼容。

    <div name="demo">
        <span></span>
    </div>
    <script>   
        var mSpan = document.getElementsByTagName("span")[0]
        var parele = mSpan.parentElement //<div name="demo"></div>
    </script>

children

以类数组的形式返回节点元素。

    <div name="demo">
        <span></span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var chd = mDiv.children 
        // chd返回结果：
        // HTMLCollection [span]
        // length: 1
        // 0: span
        // __proto__: HTMLCollection
    </script>

firstElementChild

返回第一个子节点元素。IE10以下不支持。

    <div name="demo">
        <span></span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var frtd = mDiv.firstElementChild //<span></span>
    </script>

lastElementChild

返回最后一个子节点元素。IE10以下不支持。

    <div name="demo">
        <span></span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var latd = mDiv.lastElementChild //<span></span>
    </script>

nextElementSibling

返回下一个子兄弟节点元素。IE10以下不支持。

    <div name="demo">
        <b></b>
        <span></span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var fir = mDiv.firstElementChild //<b></b>
        var nxt = fir.nextElementSibling //<span></span>
    </script>

previousElementSibling

返回前一个子兄弟节点元素。IE10以下不支持。

    <div name="demo">
        <b></b>
        <span></span>
    </div>
    <script>   
        var mDiv = document.getElementsByTagName("div")[0]
        var last = mDiv.lastElementChild //<span></span>
        var pre = last.previousElementSibling //<b></b>
    </script>