JavaScript 关于API的简单部分语法

JavaScript(WebAPI)

的 JS 分成三个大的部分

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

WebAPI 就包含了 DOM + BOM

DOM 基本概念

什么是 DOM

DOM 全称为 Document Object Model.

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

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

DOM 树

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

树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构

重要概念:

• 文档: 一个页面就是一个 文档, 使用 document 表示.
• 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
• 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

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

所以才叫 "文档对象模型

获取元素

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

querySelector

querySelector是document对象的属性

document : 页面中的全局对象,一个页面加载好了,就会自动生成一个全局变量,叫做document 这里面就有一些属性和方法,让我们来操作页面的内容

var element = document.querySelector(selectors);

<div>hello</div>
<script>
    let obj = document.querySelector('div');
    console.log(obj);
</script>

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

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

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
        let obj = document.querySelector('ul li');
        console.log(obj);
</script>

当querySelector匹配到多个元素的时候,此时返回的对象,就是匹配到的所有被选中的第一个元素

此时,如果想将所有的li都选择,就需要使用querySelectotAll ,此时返回的就是一个数组

querySelectotAll

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
<script>
    let obj = document.querySelectorAll('ul li');
    console.log(obj);
</script>

事件初识

JS中的很多代码都是通过"事件"来触发的

事件就是浏览器对于用户的操作行为进行一个统称(准确来说,事件不一定全是由用户操作产生,但是大部分是)

例如:鼠标在页面上移动,就会产生鼠标移动事件

鼠标在页面某处点击,就会产生鼠标点击事件

鼠标滚轮,来滚动页面,就会产生滚动事件

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

2. 事件类型: 是点击, 选中, 还是修改? 比如鼠标移动,鼠标点击,鼠标滚轮

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

最常见的就是点击事件