DOM——查找

北冥有大鹏

已于 2022-07-19 11:21:35 修改

阅读量324

点赞数

分类专栏： DOM学习文章标签： javascript 前端 vue.js

于 2022-07-19 11:18:22 首次发布

本文链接：https://blog.csdn.net/weixin_45328723/article/details/125867962

版权

DOM学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

DOM的几种查找方法

通过ID获取元素

var 元素=document.documnetElement (“id名”)

<body>
    <div id="time">2019-9-9</div>
    <script>
        //1.因为文档页面从上往下加载，所以先得有标签，所以script需要再下面
        //2.get获得 element 元素 by 通过 驼峰命名法
        //3.参数 ID是大小写敏感的字符串
        //4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

通过标签获取元素

document.getElementsByTagName(“标签名”)

<body>
    <ul>
        <li>知否知否，应是绿肥红瘦1</li>
        <ol id="ol">
            <li>生僻字</li>
            <li>生僻字</li>
            <li>生僻字</li>
        </ol>

    </ul>
    <script>
        //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        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.如果页面中只有一个li 返回的还是伪数组的形式
        //4.如果页面中没有这个元素返回的是一个空的伪数组
        //5.element.getElementsByTagName('标签名');父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol')
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>

H5新增获取方法

getElementsByClassName 根据类名获取元素

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

querySelector 返回指定选择器的第一个元素对象里面的选择器需要加符号.box #nav

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

querySelectorAll()返回指定选择器所有元素对象集合

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

获取特殊元素

获取body元素

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

获取HTML元素

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

北冥有大鹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM——查找

DOM查找DOM树的方法
复制链接

扫一扫

专栏目录