JavaScript之DOM获取元素

cloudOnSkyline

已于 2022-06-22 14:29:01 修改

阅读量306

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-06-21 17:11:19 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125394631

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍如何利用DOM来获取页面的元素，从而达到操作元素的目的。方法如下：

1.通过id名获取，利用getElementById()方法，获取的是单个元素

2.通过类名获取，利用getElementsByClassName()方法，获取的是一组元素

3.通过标签名获取，利用getElementsByTagName()方法，获取的是一组元素

4.通过name属性获取，利用getElementsByName()方法，获取的是一组元素

5.通过querySeletor()方法获取，根据指定的类名、id名或标签名等获取符合要求的第一个元素

6.通过querySeletorAll()方法获取，根据指定的类名、id名或标签名等获取符合要求的所有元素

注：querySeletor()以及querySeletorAll()方法异常强大，等同于可以利用CSS的各种选择器获取页面元素。

7.通过document.body获取body元素

8.通过document.documentElement获取html元素

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>

</head>

<body>
    <div id="div1"></div>
    <div class="div2">1</div>
    <div class="div2">2</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <section name='sec'></section>
    <main name="sec"></main>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        console.log('1.id名获取(获取单一元素)');
        console.log(document.getElementById('div1'));
        console.log('2.类名获取（获取的是伪数组，可利用索引值访问单个元素');
        console.log(document.getElementsByClassName('div2'));
        console.log(document.getElementsByClassName('div2')[0]);
        console.log('3.标签名获取（同类名相似，获取的是伪数组，可利用索引值访问单个元素）');
        console.log(document.getElementsByTagName('p'));
        console.log(document.getElementsByTagName('p')[0]);
        console.log('4.name获取(获取的也是伪数组，可利用索引值访问单个元素)');
        console.log(document.getElementsByName('sec'));
        console.log(document.getElementsByName('sec')[0]);
        console.log('5.querySelector(),根据指定的类名、id名或标签名等获取首个元素');
        console.log(document.querySelector('div'));
        console.log('6.querySelectorAll(),根据指定的类名、id名或标签名等获取符合要求的所有元素,返回伪数组');
        console.log(document.querySelectorAll('div'));
        console.log(document.querySelectorAll('div')[0]);
        console.log('7.获取body');
        console.log(document.body);
        console.log('8.获取html');
        console.log(document.documentElement);
    </script>
</body>


</html>

9.专门用于获取form元素的方法，document.forms['id名']

  <form id="p1"></form>
    <script>
        var o = document.forms['p1'];
        console.log(o);
    </script>

cloudOnSkyline

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM获取元素

本文主要介绍如何利用DOM来获取页面的元素，从而达到操作元素的目的。方法如下：1.通过id名获取，利用getElementById()方法，获取的是单个元素2.通过类名获取，利用getElementsByClassName()方法，获取的是一组元素3.通过标签名获取，利用getElementsByTagName()方法，获取的是一组元素4.通过name属性获取，利用getElementsByName()方法，获取的是一组元素5.通过querySeletor()方法获取，根据指定的类名、id名或标签名等获取符
复制链接

扫一扫

专栏目录