JS学习笔记（六）-Web APIs简介和DOM简介

最新推荐文章于 2023-10-20 09:31:26 发布

Ludwig1597

最新推荐文章于 2023-10-20 09:31:26 发布

阅读量268

点赞数

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

本文链接：https://blog.csdn.net/Ludwig1957/article/details/112796711

版权

JavaScript 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

01-17 JavaScript第二阶段Web APIs

文章目录

学习笔记（六）

学习笔记（六）

Web APIs简介

Web APIs和JS基础关联性

JS的组成：

ECMAScript：JavaScript语法-JavaScript基础
DOM：页面文档对象模型&BOM：浏览器对象模型-Web APIs

JS基础阶段以及Web APIs阶段

JS基础阶段：

学习的是ECMAScript标准规定的基本语法
要求掌握JS的基础语法
只学习基础语法，做不了常用的网页交互效果
为JS后面的课程打基础、做铺垫

Web APIs阶段：

Web APIs是w3c组织的标准
Web APIs主要学习DOM和BOM
Web APIs是JS所独有的部分
主要学习页面交互功能
需要使用JS基础的课程内容做基础

总结：
JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果。

API和Web API

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

简单理解：API是给程序员提供的一种工具，以接口的形式来体现，以便能轻松的实现想要完成的功能。

Web API：是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
现阶段我们主要学习针对浏览器常用的API，主要针对浏览器做交互效果。
比如：我们想要浏览器弹出一个警示框，aler()方法就是一个Web APIs，我们可以直接使用alert(‘弹出’)。

MDN详细API：https://developer.mozilla.org/en-US/docs/Web/API

因为Web API很多，所以我们这个阶段叫做Web APIs。

总结：

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

DOM

DOM简介

什么是DOM

DOM(Document Object Model,简称DOM)：文档对象模型，是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一些列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZV4nyE6-1610980590904)(https://i.loli.net/2021/01/17/LvS6J3HClKdFQWe.jpg)]

Note:第一次在markdown文档中插入图片，图片是本地的，链接是用一个叫sm.ms(https://sm.ms/)的网站生成的，非常好用。

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

DOM把以上内容都看作是对象(对象有自己的属性和方法)。

获取元素

如何获取页面元素

DOM在我们实际开发中主要用来操作元素，获取元素可以使用以下几种方法：

根据ID获取
使用document.getElementById() 方法可以获取带有ID的元素对象。
- 因为我们文档页面从上往下加载，所以先得有标签，script要写到标签的下面
- get 获得 element 元素 by 通过 ID 命名驼峰命名法
- 参数：id是大小写敏感的字符串
- 返回值：返回的是一个元素对象
- console.dir()：打印我们返回的元素对象，更好的查看里面的属性和方法。
```
<body>
 <div id="time">2021-1-17</div>
 <script>
     var timer = document.getElementById('time');//timer是一个元素对象
     console.log(timer);//<div id="time">2021-1-17</div>
     console.log(typeof timer);//Object
     console.dir(timer);
 </script>
 </body>
```

根据标签名获取
(1) 使用document.getElementsByTagName() 方法可以返回带有指定标签的对象的合集。

返回值：返回的是获取过来元素对象的合集，以伪数组的形式存储。
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的。
如果页面只有一个li，返回的还是伪数组的形式。
如果页面中没有这个元素，返回的是空的伪数组。

<body>
<ul>
    <li>blue</li>
    <li>pink</li>
    <li>red</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis); //[li, li, li]
    console.log(lis[0]); //<li>blue</li>
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
</script>
</body>

(2) 还可以使用element.getElementsByTagName(‘标签名’) 方法获取某个元素(父元素)内部所有标签名的子元素。

父元素必须是单个对象（必须指明是哪一个元素对象）//数组加索引。
获取的时候不包括父元素自己。

 <body>
   <ol id='ol'>
     <li>blue</li>
     <li>pink</li>
     <li>red</li>
   </ol>
   <script>
     console.log(document.getElementsByTagName('ol')); //[ol]
     // console.log(ol.getElementsByTagName('li'));报错
     var ol = document.getElementsByTagName('ol');
     console.log(ol[0].getElementsByTagName('li'));//[li, li, li]
     //但一般情况下都是指定一个id
     var ol2 = document.getElementById('ol');//ol2[]作为父元素
     console.log(ol2.getElementsByTagName('li'));
   </script>
 </body>

通过HTML5新增的方法获取//ie9以上才支持

<div class='box'>盒子1</div>
<div class='box'>盒子2</div>
<div id='nav'>
   <ul>
     <li>首页</li>
     <li>产品</li>
   </ul>
</div>

document.getElementByClassName() 根据类名获得某些元素集合

<script>
   var boxs = document.getElementsByClassName('box');
   console.log(boxs);
</script>

document.querySelector() 返回指定选择器的第一个对象

<script>
   var firstBox = document.querySelector('.box');
   console.log(firstBox);
   var nav = document.querySelector('#nav');
   console.log(nav);
   var li = document.querySelector('li');
   console.log(li);
</script>

切记里面的选择器要加符号，类要加点(.box),id要加＃(#nav)

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

var allBox = document.querySelectorAll('.box');
console.log(allBox);//输出集合，是个伪数组
console.log(allBox[0]);//输出伪数组里第一个元素

特殊元素获取(body、html)

获取body元素
document.body//返回body元素对象

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

获取html元素
document.documentElement//返回html元素对象

//var htmlEle = document.html错误
var htmlEle = document.documentElement;
console.log(htmlEle);

事件基础

事件概述

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

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

事件三要素

事件有三部分组成：事件源，事件类型和事件处理程序。
这三部分也被称为事件三要素。

<body>
    <button id='btn'>唐伯虎</button>
    <script>
        
    </script>
</body>

事件源：事件被触发的对象（如按钮）

  var btn = document.getElementById('btn');//获得了事件源

事件类型：如何触发，什么事件，比如，鼠标点击（onclick）还是键盘按下。
事件处理程序：通过一个函数赋值的方式完成。

btn.onclick = function(){//匿名函数
  alert('点秋香');
}

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件
        // div.onclick
        // 3. 添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了')
        }
    </script>
</body>

常见的鼠标事件

onclick-鼠标点击左键触发
onmouseover-鼠标经过触发
onmouseout-鼠标离开触发
onfocus-获得鼠标焦点触发
onblur-失去鼠标焦点触发
onmousemove-鼠标移动触发
onmouseup-鼠标弹起触发
onmousedown-鼠标按下触发

Ludwig1597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记（六）-Web APIs简介和DOM简介

01-17 JavaScript第二阶段Web APIs文章目录学习笔记（六）-上Web APIs简介Web APIs和JS基础关联性JS的组成：JS基础阶段以及Web APIs阶段API和Web APIDOMDOM简介什么是DOMDOM树获取元素如何获取页面元素事件基础事件概述事件三要素执行事件的步骤常见的鼠标事件学习笔记（六）-上Web APIs简介Web APIs和JS基础关联性JS的组成：ECMAScript：JavaScript语法-JavaScript基础DOM：页面文档对象.
复制链接

扫一扫