Js如何获取页面元素

最新推荐文章于 2024-04-19 20:57:48 发布

S_戒酒大师

最新推荐文章于 2024-04-19 20:57:48 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45730641/article/details/105587887

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

getElementById获取元素
书写案例

<body>
<div id="time">2019-9-9</div>
</body>
<script>
 var timer = document.getElementById('time')
    console.log(timer);
    console.log(typeof timer);
</script>

注意事项
1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签下面
2. get 获得 element 元素 by 通过驼峰命名法
3.参数 id 是大小写敏感的字符串
4.返回的是一个元素对象
5.console.dir 打印我们返回的元素对象更好的查看里面的属性和方法

 console.dir(timer)

2.getElementsByTagName获取某些元素
代码验证

<body>
    <ul>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
    </ul>
    <ul id="nav">
        <li>孤欲叹</li>
        <li>孤欲叹</li>
        <li>孤欲叹</li>
        <li>孤欲叹</li>
        <li>孤欲叹</li>
    </ul>
</body>

（1）返回的是获取过来元素对象的集合以伪数组的形式存储的

 var lis = document.getElementsByTagName('li')
    console.log(lis);
    console.log(lis[0]);

（2）我们想要依次打印里面的元素对象我们可以采取遍历的方式

 for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);

    }

（3）element.getElementsByTagName() 可以得到这个元素里面的某些标签

var nav = document.getElementById('nav') //这个获得 nav 元素
    var navLis=nav.getElementsByTagName('li')
    console.log(navLis);

3.H5新增获取元素方
内容

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
</body>

（1）getElementsByClassName 根据类名获得某些元素集合切记里面的选择器需要加符号 .box #nav

 var boxs = document.getElementsByClassName('box')
    console.log(boxs);

（2） querySelector 返回指定选择器的第一个元素对象

 var firstBox = document.querySelector('.box')
    console.log(firstBox);
    var nav = document.querySelector('#nav')
    console.log(nav);
    var li = document.querySelector('li')
    console.log(li);

（3）querySelectorAll 返回指定选择器的所有元素对象

 var allBox=document.querySelectorAll('.box')
    console.log(allBox);
    var lis=document.querySelectorAll('li')
    console.log(lis);

4.获取特殊元素
（1）获取body元素

 var bodyEle = document.body
    console.log(bodyEle);
    console.dir(bodyEle)

（2）获取html元素

 // var htmlEle = document.html
    var htmlEle = document.documentElement
    console.log(htmlEle);

S_戒酒大师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js如何获取页面元素

getElementById获取元素书写案例<body><div id="time">2019-9-9</div></body><script> var timer = document.getElementById('time') console.log(timer); console.log(typeo...
复制链接

扫一扫