JAVAEE之JavaScript(WebAPI)

1.WebAPI 背景知识

JS 分成三个大的部分

ECMAScript: 基础语法部分（ JS 基础语法主要学的是 ECMAScript, ）

DOM API: 操作页面结构

BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

 2.API

API 是一个更广义的概念 . 而 WebAPI 是一个更具体的概念 , 特指 DOM+BOM

所谓的 API 本质上就是一些现成的函数 / 对象 , 让程序猿拿来就用 , 方便开发 .

3.DOM 基本概念

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数 , 让我们可以操作 :

网页内容

网页结构

网页样式

3.1 DOM 树

一个页面的结构是一个树形结构 , 称为 DOM 树 .

重要概念:

文档 : 一个页面就是一个 文档 , 使用 document 表示 .

元素 : 页面中所有的标签都称为 元素 . 使用 element 表示 .

节点 : 网页中所有的内容都可以称为 节点 ( 标签节点 , 注释节点 , 文本节点 , 属性节点等 ). 使用 node表示.

这些文档等概念在 JS 代码中就对应一个个的对象 .

所以才叫 " 文档对象模型 " .

 

 4.获取元素

这部分工作类似于 CSS 选择器的功能 .

4.1 querySelector

前面的几种方式获取元素的时候都比较麻烦 . 而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象 .

var element = document.querySelector(selectors);

• selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
• 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
• 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
• 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素

正因为参数是选择器 , 所以一定要通过特殊符号指定是哪种选择器 .

例如 .box 是类选择器 , #star 是 id 选择器 等（ 点类，＃选择 ）

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
    var elem2 = document.querySelector('#id');
    console.log(elem2);
    var elem3 = document.querySelector('h3 span input');
    console.log(elem3);
</script>

4.2 querySelectorAll

使用 querySelectorAll 用法和上面类似 .

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
console.log(elems);
</script>

5.事件初识

5.1 基本概念

JS 要构建动态页面 , 就需要感知到用户的行为 .

用户对于页面的一些操作 ( 点击 , 选择 , 修改等 ) 操作都会在浏览器中产生一个个事件 , 被 JS 获取到 , 从而进行更复杂的交互操作.

5.2 事件三要素

1. 事件源 : 哪个元素触发的

2. 事件类型 : 是点击 , 选中 , 还是修改 ?

3. 事件处理程序 : 进一步如何处理 . 往往是一个回调函数 .

<button id="btn">点我一下</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert("hello world");
   }
</script>

• btn 按钮就是事件源.
• 点击就是事件类型
• function 这个匿名函数就是事件处理程序
• 其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

注意 : 这个匿名函数相当于一个回调函数 , 这个函数不需要程序猿主动来调用 , 而是交给浏览器 , 由浏览器自动在合适的时机( 触发点击操作时 ) 进行调用 .