js日记之获取页面元素

最新推荐文章于 2023-04-12 19:02:52 发布

小白白中之白

最新推荐文章于 2023-04-12 19:02:52 发布

阅读量192

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/m0_53438035/article/details/116245553

版权

JS 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

如何获取页面元素

一：根据ID获取

通过getElementById()接口获取，由于文档页面是从上往下加载的，所以得先有标签，我们script写在标签下面
代码：

<script>
        var aa=document.getElementById('a');
        console.log(aa);
        console.log(typeof aa);
</script>

效果：
在这里插入图片描述

注意：
1.括号内为’id名，因为id为字符串。
2.console.dir（）返回对象
3.必须以document开头

二：根据标签名获取

getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
代码:

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var lis =document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
    </script>
</body>

效果：
在这里插入图片描述
如果同时存在ol和ul的li，而我要获取ol里面的li呢？
代码：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol id="a">
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ol>
    <script>
        var ol1=document.getElementsByTagName('ol');
        console.log(ol1.getElementsByTagName('li'));
        /* var ol2=document.getElementById('a');
        console.log(ol2.getElementsByTagName('li')); */
        
    </script>
</body>

效果：
在这里插入图片描述

我们发现居然报错了。我们发现通过标签名获取元素，父元素必须是单个对象。而getElementsByTagName()返回的是一个集合。所以需要将ol1替换为ol1[0];
代码：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol id="a">
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ol>
    <script>
        var ol1=document.getElementsByTagName('ol');
        console.log(ol1[0].getElementsByTagName('li'));
        /* var ol2=document.getElementById('a');
        console.log(ol2.getElementsByTagName('li')); */
        
    </script>
</body>

效果：
在这里插入图片描述
或者采取注释里面的方法
代码：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol id="a">
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ol>
    <script>
        var ol1=document.getElementsByTagName('ol');
        console.log(ol1[0].getElementsByTagName('li'));
        var ol2=document.getElementById('a');
        console.log(ol2.getElementsByTagName('li'));
        
    </script>
</body>

效果：
在这里插入图片描述

三：通过HTML5新增的方法获取

1：getElementsByClassName()

getElementsByClassName()可以根据类名获取某些元素的集合
代码：

<body>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
    </script>
</body>

效果：
在这里插入图片描述

2：querrySelector()

querrySelector()根据指定选择器返回第一个元素对象
代码：

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <script>
      var firstbox=document.querySelector('.box')
      console.log(firstbox);
    </script>
</body>

效果：
在这里插入图片描述
由于querrySelector()什么选择器都能选所以括号内要加符号表明选择器的类型

3：querrySelectorAll()

querrySelectorAll()返回指定的集合。

四：特殊元素获取

获取body：document.body
获取html：document.documentElement

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js日记之获取页面元素

如何获取页面元素一：根据ID获取通过getElementById()接口获取，由于文档页面是从上往下加载的，所以得现有标签，我们script写在标签下面代码：<script> var aa=document.getElementById('a'); console.log(aa); console.log(typeof aa);</script>效果：注意：1.括号内为’id名2.console.dir（）返回对象
复制链接

扫一扫