蓝旭前端第五周预习作业

Web API

DOM

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

什么是DOM

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。
网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

数据类型

Document

当一个成员返回 document 对象（例如，元素的 ownerDocument 属性返回它所属的 document），这个对象就是 root document 对象本身。DOM document 参考一章对 document 对象进行了描述。

Node

位于文档中的每个对象都是某种类型的节点。在一个 HTML 文档中，一个对象可以是一个元素节点，也可以是一个文本节点或属性节点。

Element

element 类型是基于 node 的。它指的是一个元素或一个由 DOM API 的成员返回的 element 类型的节点。例如，我们不说 document.createElement() 方法返回一个 node 的对象引用，而只是说这个方法返回刚刚在 DOM 中创建的 element。element 对象实现了 DOM 的 Element 接口和更基本的 Node 接口，这两个接口都包含在本参考中。在 HTML 文档中，元素通过 HTML DOM API 的 HTMLElement 接口以及其他描述特定种类元素能力的接口（例如用于

元素的 HTMLTableElement 接口）进一步强化。

NodeList

nodeList 是由元素组成的数组，如同 document.querySelectorAll() 等方法返回的类型。nodeList 中的条目通过索引有两种方式进行访问：
list.item(1)
list[1]
两种方式是等价的，第一种方式中 item() 是 nodeList 对象中的单独方法。后面的方式则使用了经典的数组语法来获取列表中的第二个条目。

Attr

当 attribute 通过成员函数（例如通过 createAttribute() 方法）返回时，它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点，就像元素一样，只不过你可能会很少使用它。

NamedNodeMap

namedNodeMap 和数组类似，但是条目是由名称或索引访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， namedNodeMap 有一个 item() 方法，你也可以从 namedNodeMap 添加或移除条目。

DOM 接口

AbortController

AbortSignal

AbstractRange (en-US)

Attr

CDATASection

CharacterData

Comment

CustomEvent

Document

DocumentFragment

DocumentType

DOMException

DOMImplementation

DOMParser

DOMPoint

DOMPointReadOnly (en-US)

DOMRect

DOMTokenList

Element

Event

EventTarget

HTMLCollection

MutationObserver

MutationRecord

NamedNodeMap

Node

NodeFilter

NodeIterator

NodeList

ProcessingInstruction

Range

StaticRange (en-US)

Text

TextDecoder

TextEncoder

TimeRanges

TreeWalker

XMLDocument

DOM核心接口

document.querySelector()
文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar"
  document.querySelector("#foo\bar"); // 不匹配任何元素

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // 匹配第一个 div

  document.querySelector("#foo:bar"); // 不匹配任何元素
  document.querySelector("#foo\\:bar"); // 匹配第二个 div
</script>

document.querySelectorAll()
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1, not 0!

document.createElement()
在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

document.body.onload = addElement;

function addElement() {
  // 创建一个新的 div 元素
  let newDiv = document.createElement("div");
  // 给它一些内容
  let newContent = document.createTextNode("Hi there and greetings!");
  // 添加文本节点 到这个新的 div 元素
  newDiv.appendChild(newContent);

  // 将这个新的元素和它的文本添加到 DOM 中
  let currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

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

function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Logging mouse events inside this container...");

Element.setAttribute()
接口的 setAttribute() 方法用于设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

Element.getAttribute()
返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 “” （空字符串）。

let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");

alert(align);
// shows the value of align for the element with id="div1"

EventTarget.addEventListener()
方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

function eventHandler(event) {
  if (event.type === "fullscreenchange") {
    /* 处理 fullscreenchange 事件 */
  } else {
    /* 处理 fullscreenerror 事件 */
  }
}

HTMLElement.style
只读属性 style 以 CSSStyleDeclaration 实时对象（Live Object）的形式返回元素的内联样式，该对象包含该元素的所有样式属性列表，只为元素的内联 style 属性中定义的属性分配值。

const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;

// 我们迭代所有的样式（for…of 对 CSStyleDeclaration 无效）
for (const prop in elementStyle) {
  if (Object.hasOwn(elementStyle, prop)) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Node.appendChild()
方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

// 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

window.onload
事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent += "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent += `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent += `DOMContentLoaded\n`;
});

BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。