JavaScript知识点(阶段二)

TT前端养成日记

已于 2022-09-03 18:55:20 修改

阅读量568

点赞数

文章标签：前端 javascript html

于 2022-08-08 16:47:14 首次发布

本文链接：https://blog.csdn.net/m0_51682073/article/details/126230921

版权

JavaScript知识点（阶段二）

十三. Web APIs

1. Web APIs 和 JS 基础关联性

在这里插入图片描述

2. API 和 Web API

APl ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。

API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数)
学习Web API可以结合前面学习内置对象方法的思路学习

十四. DOM

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

在这里插入图片描述

文档:一个页面就是一个文档，DOM中使用document表示
元素∶页面中的所有标签都是元素，DOM中使用element表示
节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

1. 获取元素

DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

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

1.1 根据 ID 获取 getElementById()

<body>
    <div id="time">2022-7-27</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>
</body>

1.2 根据标签名获取

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

document.getElementsByTagName('标签名')；
// 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
// 2.如果页面中没有这个元素返回的空的伪数组的形式

注意︰

1．因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2．得到元素对象是动态的

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName ( '标签名');

注意∶父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。

1.3 H5新增获取元素方式

document.getElementsByClassName('类名');// 根据类名返回元素对象的集合

document.querySelector('选择器');//根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); //根据指定选择器返回所有对象

1.4 获取特殊元素

// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);

// 1.获取html 元素
var htmlEle = document.html;
console.log(htmlEle);

2. 事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解∶触发—响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

2.1 事件三要素

事件是有三部分组成

事件源事件被触发的对象
事件类型如何触发比如鼠标点击鼠标经过键盘按下
事件处理程序通过一个函数赋值的方式

<body>
    <button id="btn">
        唐伯虎
    </button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function {
     
            alert('点秋香');