获取 DOM 元素的方式

最新推荐文章于 2024-05-29 22:27:40 发布

CHY__YHC

最新推荐文章于 2024-05-29 22:27:40 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/weixin_45982960/article/details/118719592

版权

DOM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在 JS 中可以通过一些方式获取到页面中的元素，并进行操作；根据页面中的元素标签又可以分为非常规标签和常规标签，获取它们的方式也有所不同。

1、非常规标签获取方式

html ：document.documentElement
head ：document.head
body ：document.body

// 获取 html 元素
var html = document.documentElement
console.log(html)
// 获取 head 元素
var head = document.head
console.log(head)
// 获取 body 元素
var body = document.body
console.log(body)

2、常规标签

getElementById（）

语法：查找范围.getElementById('ID名称')
查找范围：document 或者一个元素

返回值：如果有这个id名称元素匹配，就是这个元素；如果没有，返回值就是 null

<body>
    <p id="box">我是一个段落</p>
    <script>
        var box = document.getElementById('box')
        console.log(box)  // <p id="box">我是一个段落</p>

        var box = document.getElementById('box1')
        console.log(box)  // null
    </script>
</body>

getElementsByTagName（）

语法：查找范围.getElementsByTagName('标签名')

返回值：是一个伪数组（数组常用方法不可以用）；如果有匹配元素，全部返回如果没有，就返回一个空的伪数组

<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var li = document.getElementsByTagName('li')
        console.log(li)  // HTMLCollection(3) [li, li, li]

        var li = document.getElementsByTagName('ul')
        console.log(li) // HTMLCollection []
    </script>
</body>

getElementByClassName（）

语法：查找范围.getElementByClassName('类名')

返回值：是一个伪数组（数组常用方法不可以用）；如果有匹配元素，全部返回如果没有，就返回一个空的伪数组

<body>
    <ol>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
    </ol>
    <script>
        var li = document.getElementsByClassName('box')
        console.log(li) // HTMLCollection(2) [li.box, li.box]
        var li = document.getElementsByClassName('box1')
        console.log(li) // HTMLCollection []
    </script>
</body>

getElementsByName（）

语法：查找范围.getElementByName（'元素name属性值'）

返回值：是一个伪数组（数组常用方法不可以用）；如果有匹配元素，全部返回如果没有，就返回一个空的伪数组

<body>
    <input type="text" name="username">
    <input type="text" name="password">
    <script>
        var user = document.getElementsByName('username')
        console.log(user) // NodeList [input]
        var code = document.getElementsByName('code')
        console.log(code) // NodeList []
    </script>
</body>

下面俩个获取方式是 H5 推出的（IE低版本浏览器无法使用）

querySelector（）

语法：查找范围.querySelector（'选择器'）
选择器：能在CSS 里面写的选择器，这里都可以使用

返回值：如果有这个元素匹配，就是这个元素；如果没有，返回值就是 null

<body>
    <p id="box">我是一个段落</p>
    <ol>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
    </ol>
    <script>
        var box = document.querySelector('.box')
        console.log(box) // <li class="box"></li>  只会获取第一个找到的元素
    </script>
</body>

querySelectorAll（）
- 语法：查找范围.querySelector（'选择器'）
- 选择器：能在CSS 里面写的选择器，这里都可以使用
- 返回值：是一个伪数组（数组常用方法不可以用）；如果有匹配元素，全部返回如果没有，就返回一个空的伪数组
```
<body>
    <p id="box">我是一个段落</p>
    <ol>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
    </ol>
    <script>
        var box = document.querySelectorAll('.box')
        console.log(box) // NodeList(2) [li.box, li.box]
    </script>
</body>
```