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 选择器知识, 达到更快捷更精准的方式获取到元素对象 .

javascript 复制代码

var element = document.querySelector(selectors);

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常

表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.

如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素
正因为参数是选择器 , 所以一定要通过特殊符号指定是哪种选择器 .
例如 .box 是类选择器 , #star 是 id 选择器等（ 点类，＃选择 ）

javascript 复制代码

<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 用法和上面类似 .

javascript 复制代码

<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 事件三要素

事件源 : 哪个元素触发的
事件类型 : 是点击 , 选中 , 还是修改 ?
事件处理程序 : 进一步如何处理 . 往往是一个回调函数 .

javascript 复制代码

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

btn 按钮就是事件源.

点击就是事件类型

function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个操作称为 注册事件**/**绑定事件
注意 : 这个匿名函数相当于一个回调函数 , 这个函数不需要程序猿主动来调用 , 而是交给浏览器 , 由浏览器自动在合适的时机( 触发点击操作时 ) 进行调用 .

JAVAEE之JavaScript(WebAPI)

1.WebAPI****背景知识

2.API

3.DOM****基本概念

3.1 DOM****树

4.获取元素

4.1 querySelector

4.2 querySelectorAll

5.事件初识

5.1 基本概念

5.2 事件三要素

3.1 DOM树