バニラのWeb標準で何ができるかを把握する。

https://jsprimer.net/basic/ecmascript/

https://www.262.ecma-international.org/6.0/index.html

DOM 4 が DOM Standard と言えそう。

https://wiki.suikawiki.org/n/DOM4

https://triple-underscore.github.io/DOM4-ja.html

特に User Script で役立つ。

https://wiki.greasespot.net/Main_Page

https://www.tampermonkey.net/documentation.php

https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes

微妙にTSが対応してない。

https://developer.mozilla.org/ja/docs/Web/API/ElementCSSInlineStyle/style

// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black";
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// Set specific style while leaving other inline style values untouched
elt.style.color = "blue";

https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByClassName

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement

HTMLElement じゃない

昔はこういうのがあったらしい

https://developer.mozilla.org/en-US/docs/Archive/Events/DOMSubtreeModified

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

代替

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

https://triple-underscore.github.io/DOM4-ja.html#interface-mutationobserver

https://dom.spec.whatwg.org/#mutation-observers

User Scripts

https://wiki.greasespot.net/Metadata_Block

MutationObserver

https://ja.javascript.info/mutation-observer

observe

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver/observe#例外

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit#properties

At a minimum, one of childList, attributes, and/or characterData must be true when you call observe(). Otherwise, a TypeError exception will be thrown.

Error

sample

TypeError: Failed to execute 'observe' on 'MutationObserver': The options object must set at least one of 'attributes', 'characterData', or 'childList' to true.

child list

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList

By setting childList to true, your callback will be invoked any time nodes are added to or removed from the DOM node or nodes being watched.

Setting subtree to true causes addition or removal of nodes anywhere within the subtree rooted at target to be reported.