Write with ❤️ by zhangbao.

学习如何管理浏览器页面:添加元素,操纵它们的大小和位置,动态创建界面并与访问者交互。

文档

|
1. 浏览器环境和标准
|
5. 节点属性:类型,标签和内容
|
9. 元素尺寸和滚动
| | —- | —- | —- | |
2. DOM 树
|
6. HTML 特性和对象属性
|
10. 窗口尺寸和滚动
| |
3. 遍历 DOM
|
7. 修改文档
|
11. 坐标系
| |
4. 查找:getElement 和 querySelector
|
8. 样式和类
| |

事件介绍

  1. 浏览器事件介绍

  2. 冒泡和捕获

  3. 事件委托

  4. 浏览器默认行为

  5. 派发自定义事件

事件详情

  1. 鼠标事件基础

  2. 移动:mouseover/out,mouseenter/leave

  3. 鼠标拖拽事件

  4. 键盘:keydown 和 keyup

  5. 滚动

  6. 页面声明周期:DOMContentLoaded,load,beforeload,unload

  7. 资源加载:onload 和 onerror

表单,控件

  1. 表单属性和方法

  2. 聚焦:focus/blur

  3. 事件:change,input,cut,copy 和 paste

  4. 表单提交:事件和方法提交


摘要

1. 浏览器环境和标准

JavaScript 最开始创造出来就是为了在浏览器中使用,由 ECMAScript、DOM 和 BOM 组成。

2. DOM 树

HTML 文档最终被解析为一个 DOM 树结构,我们可以通过开发者工具观察和手动修改 DOM 结构。

3. 遍历 DOM

第二部分:文档、事件和界面 - 图1

4. 查找:getElement 和 querySelector

查找 DOM 节点的主要方法:

  • getElementById(只能在 document 上调用),

  • getElementsByTagName

  • getElementsByClassName

  • querySelector

  • querySelectorAll

此外还还讲了方法:

  • elem.matches(css)

  • elem.closest(css)

  • elemA.contains(elemB)

5. 节点属性:类型,标签和内容

  • 节点继承关系

第二部分:文档、事件和界面 - 图2

  • 讲述了规格里使用的 IDL(接口描述语言)

  • elem.nodeType 属性值

    • 1。表示元素节点,

    • 3。表示文本节点,

    • 9。表示 document 对象,

  • tagName 属性只存在于 Element 类型的节点上。在 HTML 文档中是大写形式;在 XML 文档中,是在文档里出现的样子。

  • 元素节点使用 innerHTML 获取内容;非元素节点,使用 data(nodeValue)获取内容。

6. HTML 特性和对象属性

  • 操作 HTML 特性:

    • elem.hasAttribute(name)——检查特性是否存在。

    • elem.getAttribute(name)——获得特性值。

    • elem.setAttribute(name, value)——设置特性值。

    • elem.removeAttribute(name)——删除特性。

  • DOM 属性值类型:

    • 字符串。

    • 布尔值。比如 复选框的 input.checked 属性,

    • 对象。比如元素节点的 style 属性,

  • 自定义属性 data-*,用 dataset 属性获得。

7. 修改文档