Dom Api之获取元素

最新推荐文章于 2022-09-25 01:42:22 发布

WLY_Unity_Unreal

最新推荐文章于 2022-09-25 01:42:22 发布

阅读量292

点赞数

分类专栏： web前端 js 文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/Wenliuyong/article/details/107248991

版权

web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

Dom,全名Document object model,文档对象模型,我们打开的一个网页,可以看做一个文档,网页中的标签可以看做是文档中的元素,h5中的标签、标签文本内容、标签属性、注释可以看做节点,在js中可以使用一些api来操作这些节点以帮助我们实现某些功能.下面看一下dom中经常使用的一些获取元素的api.

1.getElementById.

如果给标签添加一个id,可以通过document.getElementById(id)的方式来获取到这个标签元素.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content">content of dom api</div>
</body>

<script>
    let contentEle = document.getElementById('content');
    console.log(contentEle);
    console.dir(contentEle);
</script>

</html>

console.log可以打印内容到控制台.

console.dir可以打印出参数的相关属性.

2.getElementsByTagName.

通过这个方法可以获取到当前标签下指定的全部标签,如果通过document.getElementsByTagName,则获取当前网页中指定的全部标签,返回值是一个集合:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content1">
        <span>content 1-1</span>
        <span>content 1-2</span>
    </div>
    <div id="content2">
        <span>content 2-1</span>
        <span>content 2-2</span>
    </div>
</body>

<script>
    //获取全部apan标签
    let spanArr = document.getElementsByTagName('span');
    console.log(spanArr);
    //获取id为content1的元素
    let content1Ele = document.getElementById('content1');
    //获取content1下面的所有span标签
    let content1SpanArr = content1Ele.getElementsByTagName('span');
    console.log(content1SpanArr);
</script>

</html>

3.getElementsByClassName.

通过这个方法可以获取到当前标签下指定类名的标签,如果是document.getElementsByClassName,则获取当前网页中所有指定类名的标签.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content1">
        <span class="content-item">content 1-1</span>
        <span class="content-item">content 1-2</span>
    </div>
    <div id="content2">
        <span class="content-item">content 2-1</span>
        <span class="content-item">content 2-2</span>
    </div>
</body>

<script>
    //获取全部类名为content-item的标签
    let itemArr = document.getElementsByClassName('content-item');
    console.log(itemArr);
    //获取id为content1的元素
    let content1Ele = document.getElementById('content1');
    //获取content1下面的所有类名为content-item的标签
    let content1ItemArr = content1Ele.getElementsByClassName('content-item');
    console.log(content1ItemArr);
</script>

</html>

4.querySelector.

通过这个方法可以获取到当前标签下第一个指定选择器的标签,如果是document.querySelector,则获取第一个当前网页中指定选择器的标签:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content1">
        <span class="content-item">content 1-1</span>
        <span class="content-item">content 1-2</span>
    </div>
    <div id="content2">
        <span class="content-item">content 2-1</span>
        <span class="content-item">content 2-2</span>
    </div>
</body>

<script>
    //获取当前网页中第一个类名为content-item的标签
    let firstDocItem = document.querySelector('.content-item');
    console.log(firstDocItem);
    //获取id为content2的元素
    let content2Ele = document.querySelector('#content2');
    //获取content2下面第一个类名为content-item的标签
    let content2FirstItem = content2Ele.querySelector('.content-item');
    console.log(content2FirstItem);
</script>

</html>

5.querySelectorAll.

通过这个方法,可以获取到当前标签下所有指定选择器的标签,如果是document.querySelectorAll,则获取当前网页中所有指定选择器的标签:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content1">
        <span class="content-item">content 1-1</span>
        <span class="content-item">content 1-2</span>
    </div>
    <div id="content2">
        <span class="content-item">content 2-1</span>
        <span class="content-item">content 2-2</span>
    </div>
</body>

<script>
    //获取当前网页中所有类名为content-item的标签
    let itemArr = document.querySelectorAll('.content-item');
    console.log(itemArr);
    //获取id为content2的元素
    let content2Ele = document.querySelector('#content2');
    //获取content2下面所有类名为content-item的标签
    let content2ItemArr = content2Ele.querySelectorAll('.content-item');
    console.log(content2ItemArr);
</script>

</html>

6.获取body标签和html标签.

我们可以通过document.body和document.documentElement来获取body标签和html标签:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>dom api</title>
</head>

<body>
    <header>dom api</header>
    <div id="content1">
        <span class="content-item">content 1-1</span>
        <span class="content-item">content 1-2</span>
    </div>
    <div id="content2">
        <span class="content-item">content 2-1</span>
        <span class="content-item">content 2-2</span>
    </div>
</body>

<script>
    //获取body标签
    let bodyEle = document.body;
    console.log(bodyEle);
    //获取html标签
    let htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

</html>

WLY_Unity_Unreal

关注

0
点赞
踩
0

收藏

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

Dom,全名Document object model,文档对象模型,我们打开的一个网页,可以看做一个文档,网页中的标签可以看做是文档中的元素,h5中的标签、标签文本内容、标签属性、注释可以看做节点,在js中可以使用一些api来操作这些节点以帮助我们实现某些功能.下面看一下dom中经常使用的一些获取元素的api.1.getElementById.如果给标签添加一个id,可以通过document.getElementById(id)的方式来获取到这个标签元素.<!DOCTYPE html&
复制链接

扫一扫