Extremely Popular
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470import { CTOR_KEY } from "../constructor-lock.ts";import { fragmentNodesFromString } from "../deserialize.ts";import { Node, NodeType, Text, Comment } from "./node.ts";import { NodeList, nodeListMutatorSym } from "./node-list.ts";
export class DOMTokenList extends Set<string> { #onChange: (className: string) => void;
constructor(onChange: (className: string) => void) { super(); this.#onChange = onChange; }
add(token: string): this { if (token === "" || /[\t\n\f\r ]/.test(token)) { throw new Error(`DOMTokenList.add: Invalid class token "${token}"`); } super.add(token); this.#onChange([...this].join(" ")); return this; }
clear() { super.clear(); this.#onChange(""); }
remove(...tokens: string[]): this { for (const token of tokens) { super.delete(token) } this.#onChange([...this].join(" ")); return this; }
delete(token: string): boolean { const deleted = super.delete(token); if (deleted) { this.#onChange([...this].join(" ")); } return deleted; }
contains(token: string): boolean { return this.has(token); }
_update(value: string | null) { // Using super.clear() and super.add() rather than the overriden methods so // onChange doesn't fire while updating. super.clear(); if (value !== null) { for (const token of value.split(/[\t\n\f\r ]+/g)) { // The only empty strings resulting from splitting should correspond to // whitespace at either end of `value`. if (token === "") continue; super.add(token); } } }}
export class Attr { #namedNodeMap: NamedNodeMap | null = null; #name: string = "";
constructor(map: NamedNodeMap, name: string, key: typeof CTOR_KEY) { if (key !== CTOR_KEY) { throw new TypeError("Illegal constructor"); }
this.#name = name; this.#namedNodeMap = map; }
get name() { return this.#name; }
get value() { return (<{[attribute: string]: string}> <unknown> this.#namedNodeMap)[this.#name]; }}
export class NamedNodeMap { #attrObjCache: { [attribute: string]: Attr; } = {};
private newAttr(attribute: string): Attr { return new Attr(this, attribute, CTOR_KEY); }
getNamedItem(attribute: string) { return this.#attrObjCache[attribute] ?? (this.#attrObjCache[attribute] = this.newAttr(attribute)); }
setNamedItem(...args: any) { // TODO }}
export class Element extends Node { #classList = new DOMTokenList((className) => { if (this.hasAttribute("class") || className !== "") { this.attributes["class"] = className; } }); public attributes: NamedNodeMap & {[attribute: string]: string} = <any> new NamedNodeMap();
#currentId = "";
constructor( public tagName: string, parentNode: Node | null, attributes: [string, string][], key: typeof CTOR_KEY, ) { super( tagName, NodeType.ELEMENT_NODE, parentNode, key, );
for (const attr of attributes) { this.attributes[attr[0]] = attr[1];
switch (attr[0]) { case "class": this.#classList._update(attr[1]); break; case "id": this.#currentId = attr[1]; break; } }
this.tagName = this.nodeName = tagName.toUpperCase(); }
_shallowClone(): Node { const attributes: [string, string][] = []; for (const attribute of this.getAttributeNames()) { attributes.push([attribute, this.attributes[attribute]]) } return new Element(this.nodeName, null, attributes, CTOR_KEY); }
get className(): string { return this.getAttribute("class") ?? ""; }
get classList(): DOMTokenList { return this.#classList; }
set className(className: string) { this.setAttribute("class", className); this.#classList._update(className); }
get outerHTML(): string { const tagName = this.tagName.toLowerCase(); const attributes = this.attributes; let out = "<" + tagName;
for (const attribute of this.getAttributeNames()) { out += ` ${ attribute.toLowerCase() }`;
// escaping: https://html.spec.whatwg.org/multipage/parsing.html#escapingString if (attributes[attribute] != null) { out += `="${ attributes[attribute] .replace(/&/g, "&") .replace(/\xA0/g, " ") .replace(/"/g, """) }"`; } }
// Special handling for void elements switch (tagName) { case "area": case "base": case "br": case "col": case "embed": case "hr": case "img": case "input": case "link": case "meta": case "param": case "source": case "track": case "wbr": out += ">"; break;
default: out += ">" + this.innerHTML + `</${ tagName }>`; break; }
return out; }
set outerHTML(html: string) { // TODO: Someday... }
get innerHTML(): string { let out = "";
for (const child of this.childNodes) { switch (child.nodeType) { case NodeType.ELEMENT_NODE: out += (child as Element).outerHTML; break;
case NodeType.COMMENT_NODE: out += `<!--${ (child as Comment).data }-->`; break;
case NodeType.TEXT_NODE: // Special handling for rawtext-like elements. switch (this.tagName.toLowerCase()) { case "style": case "script": case "xmp": case "iframe": case "noembed": case "noframes": case "plaintext": out += (child as Text).data; break;
default: // escaping: https://html.spec.whatwg.org/multipage/parsing.html#escapingString out += (child as Text).data .replace(/&/g, "&") .replace(/\xA0/g, " ") .replace(/</g, "<") .replace(/>/g, ">"); break; }
break; } }
return out; }
set innerHTML(html: string) { // Remove all children for (const child of this.childNodes) { child.parentNode = child.parentElement = null; }
const mutator = this._getChildNodesMutator(); mutator.splice(0, this.childNodes.length);
if (html.length) { const parsed = fragmentNodesFromString(html); mutator.push(...parsed.childNodes[0].childNodes);
for (const child of this.childNodes) { child._setParent(null); child._setOwnerDocument(this.ownerDocument); } } }
get innerText(): string { return this.textContent; }
set innerText(text: string) { this.textContent = text; }
get id(): string { return this.#currentId || ""; }
set id(id: string) { this.setAttribute(id, this.#currentId = id); }
getAttributeNames(): string[] { return Object.getOwnPropertyNames(this.attributes); }
getAttribute(name: string): string | null { return this.attributes[name?.toLowerCase()] ?? null; }
setAttribute(rawName: string, value: any) { const name = rawName?.toLowerCase(); const strValue = String(value); this.attributes[name] = strValue;
if (name === "id") { this.#currentId = strValue; } else if (name === "class") { this.#classList._update(strValue); } }
removeAttribute(rawName: string) { const name = rawName?.toLowerCase(); delete this.attributes[name]; if (name === "class") { this.#classList._update(null); } }
hasAttribute(name: string): boolean { return this.attributes.hasOwnProperty(name?.toLowerCase()); }
hasAttributeNS(_namespace: string, name: string): boolean { // TODO: Use namespace return this.attributes.hasOwnProperty(name?.toLowerCase()); }
get nextElementSibling(): Element | null { const parent = this.parentNode;
if (!parent) { return null; }
const index = parent._getChildNodesMutator().indexOf(this); const childNodes = parent.childNodes; let next: Element | null = null;
for (let i = index + 1; i < childNodes.length; i++) { const sibling = childNodes[i];
if (sibling.nodeType === NodeType.ELEMENT_NODE) { next = <Element> sibling; break; } }
return next; }
get previousElementSibling(): Element | null { const parent = this.parentNode;
if (!parent) { return null; }
const index = parent._getChildNodesMutator().indexOf(this); const childNodes = parent.childNodes; let prev: Element | null = null;
for (let i = index - 1; i >= 0; i--) { const sibling = childNodes[i];
if (sibling.nodeType === NodeType.ELEMENT_NODE) { prev = <Element> sibling; break; } }
return prev; }
querySelector(selectors: string): Element | null { if (!this.ownerDocument) { throw new Error("Element must have an owner document"); }
return this.ownerDocument!._nwapi.first(selectors, this); }
querySelectorAll(selectors: string): NodeList { if (!this.ownerDocument) { throw new Error("Element must have an owner document"); }
const nodeList = new NodeList(); const mutator = nodeList[nodeListMutatorSym](); mutator.push(...this.ownerDocument!._nwapi.select(selectors, this))
return nodeList; }
matches(selectorString: string): boolean { return this.ownerDocument!._nwapi.match(selectorString, this) }
// TODO: DRY!!! getElementById(id: string): Element | null { for (const child of this.childNodes) { if (child.nodeType === NodeType.ELEMENT_NODE) { if ((<Element> child).id === id) { return <Element> child; }
const search = (<Element> child).getElementById(id); if (search) { return search; } } }
return null; }
getElementsByTagName(tagName: string): Element[] { return <Element[]> this._getElementsByTagName(tagName.toUpperCase(), []); }
private _getElementsByTagNameWildcard(search: Node[]): Node[] { for (const child of this.childNodes) { if (child.nodeType === NodeType.ELEMENT_NODE) { search.push(child); (<Element> child)._getElementsByTagNameWildcard(search); } }
return search; }
private _getElementsByTagName(tagName: string, search: Node[]): Node[] { for (const child of this.childNodes) { if (child.nodeType === NodeType.ELEMENT_NODE) { if ((<Element> child).tagName === tagName) { search.push(child); }
(<Element> child)._getElementsByTagName(tagName, search); } }
return search; }
getElementsByClassName(className: string): Element[] { return <Element[]> this._getElementsByClassName(className, []); }
getElementsByTagNameNS(_namespace: string, localName: string): Element[] { // TODO: Use namespace return this.getElementsByTagName(localName); }
private _getElementsByClassName(className: string, search: Node[]): Node[] { for (const child of this.childNodes) { if (child.nodeType === NodeType.ELEMENT_NODE) { if ((<Element> child).classList.contains(className)) { search.push(child); }
(<Element> child)._getElementsByClassName(className, search); } }
return search; }}