JavaScript - Web APIs 以及如何获取元素

最新推荐文章于 2023-04-24 00:32:58 发布

学习中的小菜鸟.

最新推荐文章于 2023-04-24 00:32:58 发布

阅读量245

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_33962481/article/details/118019812

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

前言

Web APIs阶段主要用来做页面交互功能

一、API 和 Web API

API

API (应用程序编程接口) 是一些预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力

简单来说就是给程序员提供的一种工具, 以便能更轻松的实现想要完成的功能.

Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API
主要针对于浏览器做交互效果.
Web API很多都是方法 (函数)

二、DOM

文档对象模型, 简称 DOM. 是W3C组织推荐的额处理可扩展标记语言的标准 编程接口

通过这些DOM接口, 可以改变网页的内容, 结构和样式.

DOM 树

在这里插入图片描述

文档 : 一个页面就是一个文档. DOM 中用 document 表示.
元素 : 页面中的所有标签都是元素, DOM中用 element表示.
节点 : 网页中的所有内容都是节点 ( 标签, 属性, 文本, 注释等. ) DOM中用 node 表示.

DOM把以上内容都看做是对象.

三、获取元素

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

1. 根据 ID 获取

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

语法

var element = document.getElementById(id);

如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回值

返回一个匹配到ID 的 DOM Element 对象, 若在当前 Document下没有找到, 则返回 null.

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面是从上往下加载,得先有标签,所以script需要写到标签下面
        var timer = document.getElementById('time');
        console.log(timer);
        // 打印我们返回的元素对象.可以查看里面的属性
        console.dir(timer);
    </script>
</body>

console.dir() : 打印我们返回的元素对象.可以查看里面的属性和方法

2. 根据标签名获取

getElementsByTagName() : 获取某类标签元素. 可以返回带有指定标签名的对象的集合.

<body>
    <ul>
        <li>离离原上草</li>
        <li>一岁一枯荣</li>
        <li>野火烧不尽</li>
        <li>春风吹又生</li>
    </ul>
    <script>
        var elements = document.getElementsByTagName('li');
        console.log(elements);  // HTMLCollection(4) [li, li, li, li]
    </script>
</body>

返回值

返回值是一个由发现的元素出现在树中的顺序构成的动态的HTML集合

以伪数组的形式存储的.

如果页面中只有一个li , 返回的还是伪数组的形式

如果页面中没有这个元素. 返回的是空的伪数组.

<script>
    var elements = document.getElementsByTagName('li');
    // 获取第一个元素.
    console.log(elements[0]);  // <li>离离原上草</li>
</script>

获取某个父元素内部所有指定标签名的子元素.

比如获取所有 ol 里面的 li

语法

父元素必须是单个对象,

element.getElementByTagName('标签名');

用法

获取 ol 里面的 li

<body>
    <ul>
        <li>离离原上草</li>
        <li>一岁一枯荣</li>
        <li>野火烧不尽</li>
        <li>春风吹又生</li>
    </ul>
    <ol>
        <li>ol里面的li</li>
        <li>ol里面的li</li>
        <li>ol里面的li</li>
        <li>ol里面的li</li>
        <li>ol里面的li</li>
    </ol>
    <script>
        var ol = document.getElementsByTagName('ol');
        // 父元素必须是单个对象.
        var lis = ol[0].getElementsByTagName('li');
        console.log(lis);
    </script>
</body>

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

1. 通过类名获取

根据类名返回元素对象集合.

语法 :

document.getElementByClassName('类名');

2. 根据指定选择器返回第一个元素对象

语法

document.querySelector('选择器');

使用

<body>
    <div class="box">盒子</div>
    <script>
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
    </script>
</body>

3. 根据指定选择器返回

语法

document.querySelectorAll('选择器')

返回指定选择器的所有元素对象集合

五、获取特殊元素

获取body元素

<body>
    <script>
        var bod = document.body;
        console.log(bod);
    </script>
</body>

获取html元素

<body>
    <script>
        var htm = document.documentElement;
        console.log(htm);
    </script>
</body>

学习中的小菜鸟.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript - Web APIs 以及如何获取元素

文章目录前言一、API 和 Web APIAPIWeb API二、DOMDOM 树前言 Web APIs阶段主要用来做页面交互功能一、API 和 Web APIAPIAPI (应用程序编程接口) 是一些预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力简单来说就是给程序员提供的一种工具, 以便能更轻松的实现想要完成的功能.Web APIWeb API 是浏览器提供的一套操作浏览器功能和页面元素的API主要针对于浏览器做交互效果.Web API很多
复制链接

扫一扫