DOM获取元素

最新推荐文章于 2024-11-01 10:18:14 发布

mewgulfszd！

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量63

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/CLhen/article/details/125414287

版权

DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过DOM接口可以改变网页的内容，结构和样式。

document：文档

element：元素

如何获取页面元素：

1、根据ID获取。

getElementById(id)，id必须为字符串

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

2、根据标签名获取

getElementsByTagName()，返回带有指定标签名的对象的集合。

<body>
    <ul>
        <li>这是一句话1</li>
        <li>这是一句话2</li>
        <li>这是一句话3</li>
        <li>这是一句话4</li>
    </ul>
    <ol id="ol">
        <li>举个栗子1</li>
        <li>举个栗子2</li>
        <li>举个栗子3</li>
        <li>举个栗子4</li>
    </ol>
    <script>
        //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.如果页面中只有一个这个元素，返回的还是伪数组
        //4.如果页面中没有这个元素返回的是空的伪数组的形式
        //5.获取父元素内部指定标签element.getElementsByTagName('标签名')
        //6.父元素必须是指定的单个元素
        var ol=document.getElementById('ol')
        console.log(ol.getElementsByTagName('li'))
    </script>
</body>

3、通过HTML5新增的方法获取

documen.getElementsByClassName() 根据类名获得某些元素集合。

document.querySelector('选择器') 根据指定选择器返回第一个元素对象。

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

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1.getElementsByClassName 根据类名获得某些元素集合
        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);
    </script>
</body>

4、特殊元素获取

获取body元素：document.body

获取html元素：document.documenElement

<script>
    // 1.获取body元素
    var bodyEle=document.body;
    console.log(bodyEle);
    // 2.获取html元素
    var htmlEle=document.documentElement;
    console.log(htmlEle);
</script>