关于什么是DOM

BOM - Document - 文档对象模型

官方解析

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

作用： JS <---> Dom <---> 浏览器

Dom = Html DOM + XML DOM

EventTarget <-- Node  <-- Document

EventTarget <-- Node <-- HTML/XML Elemennt <-- Document

DOM 、 HTML DOM 和 shadow DOM 关系

DOM

activeElement

获取当前的聚焦的元素，返回是 Element，如果没有焦点元素，会返回 `<body>` 或者 `null` 。
一般是作用于inout或者textAera focus 状态下

function onMouseUp(e) {
   // 获取当前焦点的element
   const activeTextarea = document.activeElement;
   const selection = activeTextarea.value.substring(
   activeTextarea.selectionStart, activeTextarea.selectionEnd
);

const outputElement = document.getElementById('output-element');
const outputText = document.getElementById('output-text');
outputElement.innerHTML = activeTextarea.id;
outputText.innerHTML = selection;
}

const textarea1 = document.getElementById('ta-example-one');
const textarea2 = document.getElementById('ta-example-two');
textarea1.addEventListener('mouseup', onMouseUp, false);
textarea2.addEventListener('mouseup', onMouseUp, false);

adoptedStyleSheets

这是一个十分有意思的接口，可以通过它修改dom的css rule，当然 element 应该也继承了这个方法

它可以识别的css叫做 CSSOM， CSS Object Model


// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();

// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");

// Apply the stylesheet to a document
document.adoptedStyleSheets = [sheet];

// We can append a new rule to the stylesheet
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.


const extraSheet = new CSSStyleSheet();
sheet.replaceSync("p { color: green; }");

// Combine the existing sheets and new one
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];


// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });

//Adopt the same sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];

body、head、documentElement

返回 body、head、html 元素

title

document.title 属性用于获取或设置文档的标题。如果存在，它的默认为 <title> 的值。

document.title = newTitle;

characterSet

获取当前的页面character encoding

compatMode

判断属于的是那种布局模式：

"BackCompat"：文档为怪异模式。
"CSS1Compat"：文档不是怪异模式，意味着文档处于标准模式或者准标准模式。

参考：浏览器标准模式和怪异模式 - 掘金 (juejin.cn)

cookie

每个cookie 由下面这些组成：
- key=value
- ;path=
- ;domian=
- ;max-age=
- ;expires=
- ;secure

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 显示：name=oeschger;favorite_food=tripe

参考：Document.cookie - Web API 接口参考 | MDN (mozilla.org)

designMode

document.designMode 控制整个文档是否可编辑。有效值为 "on" 和 "off" 。根据规范，该属性默认为 "off" 。Firefox 遵循此标准。早期版本的 Chrome 和 IE 默认为 "inherit" 。从 Chrome 43 开始，默认值为 "off" ，并且不再支持 "inherit"。在 IE6 到 IE10 中，该值为大写。

Document.dir

控制文本的排列方向，从左到右还是从右到左， ltr or rtl

documentElement

返回根元素 root element 一般是 <html>

firstElementChild、lastElementChild

document.firstElementChild or lastElementChild 会返回 <html>

fonts

会返回FontFaceSet接口，这个接口可以多字体实时管理，包括查看、删除、加载状态等

fullScreenElement、fullScreenEnabled

fullScreenElement - 返回当前全屏的元素 elememt

fullScreenEnabled - 判断浏览器环境是否支持全屏

Note: element存在方法requestFullscreen()让元素加入全屏

pictureInPictureElement、exitPictureInPicture、pictureInPictureEnabled

画中画相关功能

pictureInPictureElement 获取画中画元素
exitPictureInPicture 退出画中画
pictureInPictureEnabled 当前doc环境是否可以使用画中画

Note: HTMLVideoElement有 requestPictureInPicture() 方法加入画中画模式

pointerLockElement

获取当前锁定鼠标的元素

links、images、forms、# scripts

links 返回所有带有href的元素
images 返回所有img元素
forms 返回所有form元素

location、URL

location 是一个只读属性，但是可以它赋值字符串

URL - document.location.href 属性的值是相等的。然而 document.location.href 是可写的，document.URL 是只读的。

readyState

判断当前的doc加载状态：loading、interactive、complete

loading - doc正在加载，界面没有内容
interactive - doc的框架已经显示，可以交互，但是诸如图像，样式表和框架之类的子资源仍在加载。

一般会使用docment的事件readystatechange来触发一下动作

styleSheets

只是可读，返回doc当前的所有style，是一个Array<CSSStyleSheet>

[DOM] - 1 文档对象模型 (DOM) - 属性状态