【JavaEE】JavaScript(WebAPI)

一、WebAPI 背景知识

1、什么是 WebAPI

前面学习的 JS 分成三个大的部分

• ECMAScript：基础语法部分
• DOM API：操作页面结构
• BOM API：操作浏览器

WebAPI 就包含了 DOM + BOM

2、什么是 API

API 是一个更广义的概念，而 WebAPI 是一个更具体的概念，特指 DOM+BOM
所谓的 API 本质上就是一些现成的函数/对象，让程序猿拿来就用，方便开发

3、API 参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API

二、DOM 基本概念

1、什么是 DOM

DOM 全称为 Document Object Model
W3C 标准给我们提供了一系列的函数，让我们可以操作：

• 网页内容
• 网页结构
• 网页样式

2、DOM 树

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

页面结构形如：

DOM 树结构形如：

重要概念：
文档：一个页面就是一个文档，使用 document 表示
元素：页面中所有的标签都称为元素，使用 element 表示
节点：网页中所有的内容都可以称为节点（标签节点,，注释节点，文本节点，属性节点等），使用 node 表示

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 “文档对象模型”

三、获取元素

1、querySelector

var element = document.querySelector(selectors);

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

<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>

2、querySelectorAll

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

四、事件初识

1、基本概念

JS 要构建动态页面，就要感知用户的行为

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

2、事件三要素

• 事件源：哪个元素触发的
• 事件类型：是点击、选中、还是修改？
• 时间处理程序：进一步如何处理，往往是一个回调函数

3、简单示例

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

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

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

五、操作元素

1、获取/修改元素内容

1.1 innerText

1.2 innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

2、获取/修改元素属性

3、获取/修改表单元素属性

4、获取/修改样式属性

六、操作节点

1、新增节点

2、删除节点

七、代码案例: 猜数字

八、代码案例: 表白墙

九、代码案例: 待办事项