Skip to main content

DOM and Selectors Support

Unlike React-native, which only allows you to operate the virtual DOM, WebF give you full access to DOM and virtual DOM, behavior the same way as it would when running in web browsers.

Just like the concepts you learn in web development, all supported DOM api strictly follow the WhatWG DOM standards. You can easily find documentations and demos in MDN Web Docs.

EventTarget API supports​

The EventTarget object is the base class for DOM elements. It provides Elements and Nodes with the ability to add listeners to handle user interactions.

Refer to the EventTarget docs in MDN; all three methods are available in WebF.

Demos

document.body.addEventListener('click', () => {
   console.log('Clicked!');
});
const clickEvent = new MouseEvent('click');
document.body.dispatchEvent(clickEvent);
info

Refer to the W3C DOM Events Standard, the event dispatch mechanism includes three event phases:

  1. The capture phase: The event object propagates through the target's ancestors from the Window to the target's parent. This phase is also known as the capturing phase.
  2. The target phase: The event object arrives at the event object's event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn't bubble, then the event object will halt after completion of this phase.
  3. The bubble phase: The event object propagates through the target's ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.

WebF also supports event attributes in Elements; you can add an event listener by setting event attributes to an Element.

document.body.onclick = () => {
   console.log('clicked');
}

Node API supports​

The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of its subclasses. Most notable are Document, Element, and DocumentFragment.

EventTargetNode

WebF give you the DOM Node API to operating the DOM tree in WebF. All these Node APIs are strictly follow the WhatWG DOM standards.

Refer to the Node docs in MDN; We provide part of Node API supports:

  • Node.nodeType: Returns an unsigned short representing the type of the node (e.g., ELEMENT_NODE, TEXT_NODE).
  • Node.nodeName: Returns the name of the node depending on its type (e.g., the tag name for elements).
  • Node.nodeValue: Returns or sets the value of a node depending on its type.
  • Node.hasChildNodes(): Checks if a node has any child nodes; returns true or false.
  • Node.childNodes: Returns a live NodeList containing all the child nodes of the node.
  • Node.firstChild: Returns the first child node of the node, or null if there is no child.
  • Node.isConnected: Returns a boolean indicating if the node is connected to the DOM.
  • Node.lastChild: Returns the last child node of the node, or null if there are no children.
  • Node.nextSibling: Returns the next sibling node, or null if there's no subsequent node.
  • Node.ownerDocument: Returns the Document object associated with the node.
  • Node.parentElement: Returns the parent Element of the specified node in the DOM, or null if no parent exists.
  • Node.parentNode: Returns the parent node of the specified node in the DOM tree.
  • Node.previousSibling: Returns the previous sibling node, or null if there's no preceding node.
  • Node.textContent: Returns or sets the textual content of an element and its descendants.
  • Node.appendChild(childNode): Adds a node to the end of the list of children of a specified parent node. Parameter: childNode - The node to add.
  • Node.cloneNode([deep]): Creates a duplicate of the node. Parameter: deep (optional) - If true, it clones all descendants.
  • Node.contains(otherNode): Checks whether the node is an ancestor (or the same node) as another node. Parameter: otherNode - The node to check.
  • Node.insertBefore(newNode, referenceNode): Inserts a new child node before a reference node. Parameters: newNode - The node to insert, referenceNode - The node before which the new node will be inserted.
  • Node.isEqualNode(otherNode): Checks if two nodes are equal in terms of attributes, child nodes, etc. Parameter: otherNode - The node to compare.
  • Node.isSameNode(otherNode): Checks if two nodes are the exact same node. Parameter: otherNode - The node to compare.
  • Node.removeChild(child): Removes a child node from the DOM. Parameter: child - The child node to remove.
  • Node.replaceChild(newChild, oldChild): Replaces one child node with another. Parameters: newChild - The new node, oldChild - The node to replace.

Samples

const div = document.createElement('div');
document.body.appendChild(div);

Document API supports​

The Document interface represents any web page loaded in the WebF and serves as an entry point into the web page's content, which is the DOM tree.

EventTargetNodeDocument

WebF give you the Document API to operating the DOM tree in WebF. All these Document APIs are strictly follow the WhatWG DOM standards.

CharacterData API supports​

The CharacterData abstract interface represents a Node object that contains characters. This is an abstract interface, meaning there aren't any objects of type CharacterData: it is implemented by other interfaces like Text, Comment.

EventTargetNodeCharacterData

Refer to the CharacterData docs in MDN; We provide part of CharacterData API supports:

Element API supports​

Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.

EventTargetNodeElement

WebF give you the Element API to operating the DOM tree in WebF. All these Element APIs are strictly follow the WhatWG DOM standards.

Refer to the Element docs in MDN; We provide part of Element API supports:

Samples

document.body.innerHTML = `<div>helloworld</div>`;

HTMLElement API supports​

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

EventTargetNodeElementHTMLElement

WebF give you the HTMLElement API to operating the DOM tree in WebF. All these HTMLElement APIs are strictly follow the WhatWG DOM standards.

Refer to the HTMLElement docs in MDN; We provide part of HTMLElement API supports:

  • HTMLElement.offsetTop: Returns the distance of the current element relative to the top of the offsetParent node.
  • HTMLElement.offsetLeft: Returns the distance of the current element relative to the left of the offsetParent node.
  • HTMLElement.offsetWidth: Returns the layout width of the element, typically including padding, border, and possibly scrollbar, but not the margin.
  • HTMLElement.offsetHeight: Returns the layout height of the element, typically including padding, border, and possibly scrollbar, but not the margin.
  • HTMLElement.dataset: Provides read/write access to custom data-* attributes on the element.
  • HTMLElement.style: Returns a CSSStyleDeclaration object that represents the style attribute of the element, used to get or set inline styles.
  • HTMLElement.click(): Simulates a mouse click on the element, triggering the associated event and any event listeners.

DOMTokenList API supports​

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList and many others.

A DOMTokenList is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Refer to the DOMTokenList docs in MDN; We provide part of DOMTokenList API supports:

I want more DOM API support​

If you require more DOM APIs for your libraries to work in WebF, please raise an issue in our GitHub repo. Once there are more people expressing a desire for this feature, we will plan to support it.