web APls

基础理解

目录：

一、WEB APL的概念

二、DOM介绍

三、获取元素

四、事件基础

五、操作元素

一、WEB APL的概念

APL的理解：

APl是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，儿3又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

Web APl的理解：

web APl是浏览器提供的一套操作浏览器功能和页面元素的APl（BOM、DOM）

浏览器常用的APl（此处的Web APl特指浏览器提供的一系列APl[很多函数或对象方法]即操作网页的一系列工具，例如：操作html标签、操作页面地址的方法。），主要是针对浏览器做交互效果。例如想让浏览器弹出一个警示框的效果，直接用alert（‘弹出’）就可以了。

二、DOM介绍

DOM的由来：

DOM是网bai页中的用来表示文档中对象的标准模型，du通过JavaScript可以对网页中的所zhi有DOM对象进dao行操作，是由万维网联盟W3C组织制定的标准编程接口。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。

微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。

DOM的作用：

做网页的都知道，想要做一个动态页面，需要交互之类的，那这个时候，静态页面是无法满足的，千万别跟我说，你可以提前把要查询的显示的内容写在代码里，那么多数据，你要写几年啊。。要实时变化嘛，当然得有后台支持。就比如你在博客里，修改个人信息，添加一个标签页，删除个性签名等等，都需要同步的额。

HTML DOM 树：

DOM基本功能：

① 查询某个元素

② 查询某个元素的祖先、兄弟以及后代元素

③ 获取、修改元素的属性

④ 获取、修改元素的内容

⑤ 创建、插入和删除元素

按照不同的的类型分类，dom有不同的节点：文档、元素、属性、文本、注释等节点

总的来说， HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

3、JS 和DOM有什么联系吗？ js是代码，html是标记语言哦

想要做成动态页面，肯定要用到js了，管你是vue还是ng还是什么的。 DOM的妙处在于：它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。

1、在浏览器加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记的所有元素，自上而下解析，遇到JavaScript浏览器会检查它的正确性，然后执行代码。

2、JavaScript继续执行，使用DOM检查页面、完成修改、从页面接受事件，或者要求浏览器从Web服务器获取其它数据 注：document是一个反映HTML的对象，通过调用document的方法改变DOM的状态，也就是改变HTML页面

3、JavaScript修改了DOM时，浏览器会随着动态更新页面。

DOM就是一张映射表啦，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的API

三、获取元素

JS获取元素的8种方法：

通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）获取html的方法（document.documentElement）document.documentElement是专门获取html这个标签的获取body的方法（document.body）document.body是专门获取body这个标签的

ID获取：

document.getElementById('id')

name属性：

document.getElementsByName('name')

标签名获取：

var obj = document.getElementsByTagName('div'); for(let i = 0; i<obj.length; i++){ obj[i].onclick = function(e){ console.log(i) } }

类名获取：

var obj1 = document.getElementsByClassName('animated') // console.log 0:div.app.animated 1:div#login.login.animated.rubberBand 2:div#reg.reg.animated.shake 3:div#kefu.kefu.animated.swing 4:div#LoginState.state.animated.bounce 5:div.loginState.animated 6:div.regState.animated 7:div.pop.animated

选择器获取：

document.querySelector('.animated')

选择器获取一组元素：

document.querySelector('.animated')

四、事件基础

事件概述：

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制

事件三要素：

事件源（谁）：触发事件的元素

事件类型（什么事件）：例如click点击事件

事情处理程序（做什么的）：事件触发后执行的代码（函数形式），事件处理函数

五、操作元素

改变元素内容（获取或设置）

innerHTML 语法: ele.innerHTML 功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容） 语法: ele.innerHTML=" html” 功能:设置ele元素开始和结束标签之间的HTML内容为html说明： 注： 不能使用”-”连字符形式font-size 使用驼峰命名形式：fontSize

innerText和innerHTML的区别：

获取时：

innerText会去除空格和换行，而innerHTML会保留空格和换行。

设置时：

innerText不会识别html，而innerHTML会识别。

常用的元素属性操作：

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名 = 值