Top Related Projects
A JavaScript implementation of various web standards, for use with Node.js
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
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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>…)</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>…)</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>.
Top Related Projects
A JavaScript implementation of various web standards, for use with Node.js
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot