DOM 基础 ---------- 获取元素

卡卡西最近怎么样

已于 2022-04-27 23:59:28 修改

阅读量6.5k

点赞数 17

分类专栏： JavaScript 零基础入门文章标签： javascript 前端开发语言

于 2022-02-02 23:48:12 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/122772566

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式

文档：一个页面就是一个文档，DOM 中用 document 表示

元素：页面中所有的标签都是元素，DOM 中用 element 表示

节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示

DOM 获取元素有很多方法，下面一一说明

一：document.getElementById()

此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID 大部分情况下要求是独一无二的，所以getElementById() 这个方法成为了一个高效查找特定元素的方法，返回的结果是一个元素对象

（由于文档页面要从上往下加载，所以要先有标签元素才能获取，因此 script 放在了标签的下方）

<body>

    <p id="p">这是一个P标签</p>

    <script>

        var ele=document.getElementById('p');  //获取id为p的元素

        console.log(ele);  //  输出结果为元素对象

        console.log(typeof ele);  //类型为object对象

    </script>

</body>

有一个新方法为 console.dir()，这个方法可以输出对象的所有属性和方法，用法如下

<body>

    <p id="p">这是一个P标签</p>

    <script>

        var ele=document.getElementById('p');

        console.dir(ele)

    </script>

</body>

二：document.getElementsByTagName()

有些标签内部有很多相同的标签，例如 li 标签，我们利用这个方法可以获取带有指定标签名的对象的集合（以伪数组的形式存储，有长度有索引号，可以根据索引号来单独输出，可以遍历），注意这个方法名为 elements，刚才的方法为 element，如果页面中没有要获取的这个元素，则返回结果为空的伪数组的形式

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>

        var ele=document.getElementsByTagName('li');

        console.log(ele);

        console.log(ele[0]);

    </script>

</body>

如果想要依次输出伪数组里的元素对象，可以采用遍历的方式

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>

       var ele=document.getElementsByTagName('li');

       for(var i=0;i<ele.length;i++)

       {
           console.log(ele[i]);
       }

    </script>

</body>

三：element.getElementsByTagName()

上面第二个方法的拓展，用于返回指定父元素下的指定标签名的子元素对象的集合，应注意父元素不可以是伪数组的形式，必须是单个对象

例如一个页面有 ul 标签也有 ol 标签，但是我只需要得到 ul 标签下的 li 标签，就可以用此方法

（注意如果直接输出 ele.getElementsByTagName('li') 就会报错，因为得到的 ele 是一个伪数组，但 ele[0] 得到的就是一个元素对象，因为此代码中只有一个 ul，所以是 ele[0]）

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ol>

    <script>

       var ele=document.getElementsByTagName('ul');

       console.log(ele[0].getElementsByTagName('li'));

    </script>

</body>

但是更普遍的做法是给父元素设置 id 属性，使用 getElementById 获取父元素对象，这样得到的直接就是一个对象，不必担心出错

<body>

    <ul id="uull">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ol>

    <script>

      var ele=document.getElementById('uull');

      console.log(ele.getElementsByTagName('li'));

    </script>

</body>

四：document.getElementsByClassName()

该方法为H5新增的方法，，根据类名返回某些元素对象的集合（以伪数组形式存储）

<body>

    <p class="ppp">这是第一个p标签</p>

    <p class="ppp">这是第二个p标签</p>

    <ul class="ppp">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>

     var ele=document.getElementsByClassName('ppp')

     console.log(ele);

    </script>

</body>

五： document.querySelector( 选择器 )

返回指定选择器的第一个元素对象，注意这里的选择器要带符号，例如 .aaa #aaa

<body>

    <p class="ppp">这是第一个p标签</p>

    <p class="ppp">这是第二个p标签</p>

    <ul id="uull">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>

     var ele1=document.querySelector('.ppp')

     var ele2=document.querySelector('#uull')

     var ele3=document.querySelector('li')

     console.log(ele1);

     console.log(ele2);

     console.log(ele3);

    </script>

</body>

六： document.querySelectorAll( 选择器 )

返回指定选择器下的所有元素对象的集合

<body>

    <p class="ppp">这是第一个p标签</p>

    <p class="ppp">这是第二个p标签</p>

    <ul id="uull">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>

     var ele1=document.querySelectorAll('.ppp')

     var ele2=document.querySelectorAll('li')

     console.log(ele1);

     console.log(ele2);

    </script>

</body>

七：获取特殊元素

我们如何获取 html 元素与 body 元素呢？

获取 body 元素：document.body

获取 html 元素：document.documentElement

<body>

    <script>

     var ele1=document.body;

     var ele2=document.documentElement;

     console.log(ele1);

     console.log(ele2);

    </script>

</body>

卡卡西最近怎么样

关注

17
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM 基础 ---------- 获取元素

DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式文档：一个页面就是一个文档，DOM 中用 document 表示元素：页面中所有的标签都是元素，DOM 中用 element 表示节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示DOM 获取元素有很多方法，下面一一说明一：document.getElementById()此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID
复制链接

扫一扫