JavaScript-DOM之获取页面元素

最新推荐文章于 2023-05-04 19:40:59 发布

Mao.O

最新推荐文章于 2023-05-04 19:40:59 发布

阅读量329

点赞数

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

本文链接：https://blog.csdn.net/m0_60155232/article/details/126923316

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

通过常用的DOM操作获取元素，可以使用如下方式：

根据ID获取
根据标签名获取
通过子父关系获取
通过H5新增方法获取
获取特殊元素获:Body、HTML

根据ID获取元素

方法：getDocumentByID

<body>

<div id="ele_div"></div>

    <script>
        var ele = document.getElementById("ele_div")
        console.log(ele);
        console.log(typeof ele ); //object
    </script>

</body>

//需要注意点：
语法：document.getElementById（id）
1.参数id大小写敏感。
2.返回的是一个对象。

根据标签获取元素

getElementsByTagName()

返回一个对象的集合，需要遍历后操作。

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
    <script>
        var eles = document.getElementsByTagName('li');
        // console.log(eles);//方法返回为伪数组形式
        //遍历返回对象
        for(var i = 0 ; i < eles.elngth; i++){
            console.log(eles[i]);
        }
    </script>

</body>

通过子父关系获取

操作时父元素必须是单个对象，获取时候不包括父元素自己。

<body>
    <ul>
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
    </ul>
    <ol id="olol">
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>

    </ol>

    <script>
        //获取指定子父类关系的元素
        //方式一：
        var ol = document.getElementsByTagName('ol');
        var lis1 = ol[0].getElementsByTagName('li') //伪数组不可调用该方法
        console.log(lis1);

        // 方式二 :通过id的方式获取，直接得到元素，避免了伪数组调用
        var olol = document.getElementById('olol')
        console.log(olol.getElementsByTagName('li'));
    </script>
</body>

通过H5新增方法获取

1.document.getElementsByClassName('类名');

根据类名返回元素集合

<body>
    <span class="span">span标签1</span>
    <span class="span">span标签2</span>
    <div class="div"></div>

    <script>
        var span = document.getElementsByClassName('span');
        console.log(span.length); //2
    </script>

</body>

2.document.querySelector('选择器');

根据指定选择器返回第一个元素对象

<body>
    <span class="span">span标签</span>
    <div id="div">div</div>
    <div class="cdiv">cdiv1</div>
    <div class="cdiv">cdiv2</div>

    <script>
        var tag = document.querySelector("span");//获取第一个标签名为span的元素
        var id = document.querySelector("#div");//获取第一个id为div的元素
        var clazz = document.querySelector(".cdiv");//获取第一个class为cdiv的元素
        var cAll = document.querySelectorAll(".cdiv")//获取全部class为.cdiv的元素，返回伪数组形式    
        console.log(cAll.length);//2
    </script>

</body>

获取特殊元素：HTML、Body

1.获取body元素：document.body

<body>
    <script>
        var body = document.body;
        console.log(body); 
    </script>
</body>

2.获取html元素 document.documentElement

<body>
    <script>
        var html = document.documentElement;
        console.log(html); 
    </script>
</body>

Mao.O

关注

0
点赞
踩
1

收藏

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

常用获取页面元素的方式。以及获取特殊元素Body、HTML。
复制链接

扫一扫

专栏目录

JavaScript-DOM之获取页面元素

根据ID获取元素

根据标签获取元素

通过子父关系获取

通过H5新增方法获取

获取特殊元素：HTML、Body

“相关推荐”对你有帮助么？