Web API 学习笔记（一）之获取元素

樱花树下的空白

已于 2022-04-21 22:52:04 修改

阅读量108

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-21 17:24:13 首次发布

本文链接：https://blog.csdn.net/qq_45382872/article/details/124325936

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.什么是Web API？

在这里插入图片描述

二.什么是DOM？DOM树又是什么呢？

在这里插入图片描述

三.获取元素

DOM在开发应用中主要用来获取操作元素。
而获取元素的方法有如下几种：

根据 ID 获取
根据标签名获取
通过HTML5新增的方式获取
特殊元素获取

3.1根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

	//1.因为我们文档页面是从上往下加载，所以得先有标签，script写在标签下面
	//2.get获得element元素by通过驼峰命名法
	//3.参数 id 是一个对大小写敏感的字符串
	//4.从输出的结果看，document.getElementById() 返回的是一个元素对象
    <div id="time">2022-4-20</div>
    <script>
        var timer = document.getElementById('time')
        console.log(timer);
        console.log(typeof timer);
    </script>

输出的结果是：
在这里插入图片描述

3.2根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
getElementsByTagName(‘标签名’)

    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        //获取的是一个伪数组的集合
        //想要获取里面的所有元素对象我们可以通过遍历
         for (i = 0;i <= lis.length; i++){
            console.log(lis[i]);
        }
	//例子中的li有多个，返回的集合用数组存储。那么假如只有一个li呢？
	//其实也是用数组存储，如果页面中没有li这个元素，那么返回的就是一个空的为数组的形式
	
    </script>

结果是：
在这里插入图片描述
根据标签名获取，还有另一种形式

    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ol>
    <script>
            var ols = document.getElementsByTagName('ol');
        // console.log(ols.getElementsByTagName('li'));
        //上面这种获取方式是错误的，因为getElementsByTagName()返回的是一个伪数组，为数组是不可以作为父元素的！！！必须指定道哪一个元素
        console.log(ols[0].getElementsByTagName('li'))//这样就对了，指定了第一个ol
        //因为父元素必须是指定的单个元素
        //通常我们使用id
    </script>