Convert Figma logo to code with AI

whatwg logodom

DOM Standard

1,563
289
1,563
211

Top Related Projects

20,475

A JavaScript implementation of various web standards, for use with Node.js

7,948

Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux.

Read-only Git mirror of the Mercurial gecko repositories at https://hg.mozilla.org. How to contribute: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html

Quick Overview

The whatwg/dom repository is the official specification for the Document Object Model (DOM) maintained by the Web Hypertext Application Technology Working Group (WHATWG). It defines the core infrastructure for HTML and XML documents, providing a standard way for scripts to interact with and manipulate web content.

Pros

  • Provides a comprehensive and standardized API for web developers
  • Regularly updated to reflect modern web development practices
  • Widely supported by major browsers, ensuring cross-platform compatibility
  • Offers detailed explanations and examples for implementers and developers

Cons

  • Can be complex and overwhelming for beginners
  • Some older parts of the specification may still contain legacy features
  • Implementing the full specification can be challenging for browser vendors
  • Occasional inconsistencies between the specification and real-world implementations

Code Examples

This is not a code library, but a specification. Therefore, code examples are not applicable in this context.

Getting Started

As this is a specification and not a code library, there are no getting started instructions. However, web developers can refer to the specification at https://dom.spec.whatwg.org/ to understand the DOM standard and its implementation details.

Competitor Comparisons

20,475

A JavaScript implementation of various web standards, for use with Node.js

Pros of jsdom

  • Provides a JavaScript implementation of the DOM for use in Node.js
  • Allows testing of web applications without a browser environment
  • Supports a wide range of DOM and HTML features

Cons of jsdom

  • May not always perfectly match browser behavior
  • Can be slower than native browser DOM implementations
  • Requires more setup and configuration for certain use cases

Code Comparison

dom (WHATWG specification):

<script>
document.body.appendChild(document.createElement("p")).textContent = "Hello, world!";
</script>

jsdom:

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent);

The dom repository represents the official WHATWG DOM specification, while jsdom provides a JavaScript implementation of that specification for use in Node.js environments. The dom repo focuses on defining the standard, whereas jsdom aims to implement it in a way that can be used outside of browsers.

7,948

Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux.

Pros of WebKit

  • Comprehensive web browser engine implementation
  • Actively maintained with frequent updates and bug fixes
  • Extensive documentation and developer resources

Cons of WebKit

  • Larger codebase, potentially more complex to navigate
  • Specific to WebKit-based browsers, less universally applicable
  • Steeper learning curve for contributors

Code Comparison

WebKit (WebKit.h):

class WebKit {
public:
    static void initialize(const WTF::String& storageDirectory);
    static void shutdown();
    static bool isInitialized();
};

DOM (dom.js):

export function createDocumentType(qualifiedName, publicId, systemId) {
  if (!qualifiedName) {
    throw new TypeError("Qualified name is required");
  }
  // Implementation details...
}

Summary

WebKit is a full-featured browser engine implementation, while DOM focuses on standardizing web APIs. WebKit offers a complete browsing experience but is more complex, while DOM provides a cleaner, more focused approach to defining web standards. WebKit's code is primarily in C++, dealing with low-level browser operations, whereas DOM uses JavaScript for high-level API definitions. Both projects are crucial for web development, with WebKit providing practical implementations and DOM establishing the standards that browsers like WebKit aim to follow.

Read-only Git mirror of the Mercurial gecko repositories at https://hg.mozilla.org. How to contribute: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html

Pros of gecko-dev

  • Larger, more comprehensive codebase covering the entire Firefox browser
  • More active development with frequent commits and updates
  • Broader community involvement and contribution

Cons of gecko-dev

  • More complex and potentially overwhelming for newcomers
  • Slower build times due to the large codebase
  • Steeper learning curve for understanding the entire project structure

Code Comparison

gecko-dev (C++):

nsresult
Element::GetAttribute(const nsAString& aName, nsAString& aReturn)
{
  const nsAttrValue* val = mAttrs.GetAttr(aName);
  if (val) {
    val->ToString(aReturn);
    return NS_OK;
  }
  SetDOMStringToNull(aReturn);
  return NS_OK;
}

dom (Web IDL):

interface Element : Node {
  DOMString? getAttribute(DOMString name);
  void setAttribute(DOMString name, DOMString value);
  void removeAttribute(DOMString name);
  boolean hasAttribute(DOMString name);
  // ...
};

The gecko-dev example shows a C++ implementation of getAttribute, while the dom example provides a Web IDL interface definition for Element methods.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

This repository hosts the DOM Standard.

Code of conduct

We are committed to providing a friendly, safe, and welcoming environment for all. Please read and respect the Code of Conduct.

Contribution opportunities

Folks notice minor and larger issues with the DOM Standard all the time and we'd love your help fixing those. Pull requests for typographical and grammar errors are also most welcome.

Issues labeled "good first issue" are a good place to get a taste for editing the DOM Standard. Note that we don't assign issues and there's no reason to ask for availability either, just provide a pull request.

If you are thinking of suggesting a new feature, read through the FAQ and Working Mode documents to get yourself familiarized with the process.

We'd be happy to help you with all of this on Chat.

Pull requests

In short, change dom.bs and submit your patch, with a good commit message.

Please add your name to the Acknowledgments section in your first pull request, even for trivial fixes. The names are sorted lexicographically.

To ensure your patch meets all the necessary requirements, please also see the Contributor Guidelines. Editors of the DOM Standard are expected to follow the Maintainer Guidelines.

Tests

Tests are an essential part of the standardization process and will need to be created or adjusted as changes to the standard are made. Tests for the DOM Standard can be found in the dom/ directory of web-platform-tests/wpt.

A dashboard showing the tests running against browser engines can be seen at wpt.fyi/results/dom.

Building "locally"

For quick local iteration, run make; this will use a web service to build the standard, so that you don't have to install anything. See more in the Contributor Guidelines.

Formatting

Use a column width of 100 characters.

Do not use newlines inside "inline" elements, even if that means exceeding the column width requirement.

<p>The
<dfn method for=DOMTokenList lt=remove(tokens)|remove()><code>remove(<var>tokens</var>&hellip;)</code></dfn>
method, when invoked, must run these steps:

is okay and

<p>The <dfn method for=DOMTokenList
lt=remove(tokens)|remove()><code>remove(<var>tokens</var>&hellip;)</code></dfn> method, when
invoked, must run these steps:

is not.

Using newlines between "inline" element tag names and their content is also forbidden. (This actually alters the content, by adding spaces.) That is

<a>token</a>

is fine and

<a>token
</a>

is not.

An <li> element always has a <p> element inside it, unless it's a child of <ul class=brief>.

If a "block" element contains a single "block" element, do not put it on a newline.

Do not indent for anything except a new "block" element. For instance

 <li><p>For each <var>token</var> in <var>tokens</var>, in given order, that is not in
 <a>tokens</a>, append <var>token</var> to <a>tokens</a>.

is not indented, but

<ol>
 <li>
  <p>For each <var>token</var> in <var>tokens</var>, run these substeps:

  <ol>
   <li><p>If <var>token</var> is the empty string, <a>throw</a> a {{SyntaxError}} exception.

is.

End tags may be included (if done consistently) and attributes may be quoted (using double quotes), though the prevalent theme is to omit end tags and not quote attributes (unless they contain a space).

Place one newline between paragraphs (including list elements). Place three newlines before <h2>, and two newlines before other headings. This does not apply when a nested heading follows the parent heading.

<ul>
 <li><p>Do not place a newline above.

 <li><p>Place a newline above.
</ul>

<p>Place a newline above.


<h3>Place two newlines above.</h3>

<h4>Placing one newline is OK here.</h4>


<h4>Place two newlines above.</h4>

Use camel-case for variable names and "spaced" names for definitions, algorithms, etc.

<p>A <a for=/>request</a> has an associated
<dfn export for=request id=concept-request-redirect-mode>redirect mode</dfn>,...
<p>Let <var>redirectMode</var> be <var>request</var>'s <a for=request>redirect mode</a>.