【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十二)

1,391 阅读6分钟

这是我参与 8 月更文挑战的第 27 天,活动详情查看: 8月更文挑战

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

JavaScript DOM上

6.1_Web API简介

Web API 是浏览器提供的一套操作浏览器功能和页面元素的接口。

例如,在前面的学习中,经常使用的 console.log() 就是一个接口。 这里的 console 对象表示浏览器的控制台,调用它的 log() 方法就可以在控制台中输出调试信息。

6.1.1_初识Web API

JavaScript 语言由3部分组成,分别是 ECMAScript ( JavaScript 语法 )、BOM( 页面文档对象模型 ) 和 DOM ( 浏览器对象模型 ) ,其中 ECMAScript 是 JavaScript 语言的核心,它的内容包括前面学习的 JavaScript 基本语法、 数组、函数和对象等,即 JavaScript 基础。而 Web API 包括 BOM 和 DOM 两部分

在学习 JavaScript 时,基础阶段学习的是 ECMAScript 的基础语法,是为学习 Web API 部分做前期的铺垫;学习 Web API 阶段是 JavaScript 的实战应用。在这一阶段将会大量使用 JavaScript 基础语法来实现网页的交互效果。

6.1.2_Web API 与 API 的关系

1. API

_
应用程序编程接口 ( Application Prgramming Interface,API)是一些预先定义的函数,这些函数是由某个软件开放给开发人员使用的,帮助开发者实现某种功能。开发人员无须访问源码、无须理解其内部工作机制细节,只需知道如何使用即可
_
例如,开发一个美颜相机的手机应用。该应用需要调起手机上的摄像头来拍摄画面,如果没有 API ,则开发这个应用将无从下手。因此,手机的操作系统为了使其他应用具有访同手机摄像头的能力,就开放了一套 API ,然后由手机应用的开发工具将 API 转换成一个可以被直接调用的函数。直接调用函数就能完成调用摄像头,获取摄像头拍摄的画面等功能。开发人员的主要工作是查阅 API 文档,了解 API 如何使用。

2. Web API

_
Web API是主要针对浏览器的 API ,在 JavaScript 语言中被封装成了对象,通过调用对象的属性和方法就可以使用 Web API。在前面的学习中,经常使用 console.log() 在控制台中输出调试信息,这里的 console 对象就是一个 Web API 。

案例:使用 document.title 属性获取或设置页面的标题、使用 document.write 方法写人页面内容,

document.title = '设置新标题';// 设置页面标题
console.log (document.title);// 获取页面标题
document.write ('<h1>网页内容</h1>');// 将字符串写入页面

6.2_DOM 简介

6.2.1_什么是 DOM

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

W3C 定义了一系列的 DOM 接口,利用 DOM 可完成对 HTML 文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中,诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面,都离不开 DOM。

6.2.2_DOM 树

DOM 中将 HTML 文档视为树结构,所以被称之为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加人到当前的页面。

上图展示了 DOM 树中各节点之间的关系后,接下来我们针对 DOM 中的专有名词进行解释,具体如下:

  • 文档 ( document ): 一个页面就是一个文档 。
  • 元素 ( element ): 页面中的所有标签都是元素。
  • 节点 ( node ): 网页中的所有内容,在文档树中都是节点 ( 如元素节点、属性节点、文本节点、注释节点等 )。DOM 会把所有的节点都看作是对象,这些对象拥有自己的属性和方法。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十八)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(十九)
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML(二十)

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十)

🌊🌈关于后记:

感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易,「点赞」+「关注」 谢谢支持❤