Convert Figma logo to code with AI

mdn logodom-examples

Code examples that accompany various MDN DOM and Web API documentation pages

3,374
1,785
3,374
16
View on GitHub

Top Related Projects

web-platform-tests's avatar

wpt

4,878

Test suites for Web platform specs — including WHATWG, W3C, and others

whatwg's avatar

dom

1,563

DOM Standard

GoogleChrome's avatar

samples

5,774

A repo containing samples tied to new functionality in each release of Google Chrome.

Quick Overview

The mdn/dom-examples repository is a collection of small, focused examples demonstrating various DOM (Document Object Model) APIs and related technologies. It serves as a companion to the MDN Web Docs, providing practical code samples for developers to learn from and experiment with.

Pros

  • Comprehensive coverage of DOM APIs and related web technologies
  • Well-organized structure with separate directories for different topics
  • Regularly updated to reflect modern web development practices
  • Directly linked to MDN documentation for easy reference

Cons

  • Some examples may be too simplistic for advanced developers
  • Not all examples are fully cross-browser compatible
  • Limited explanations within the code itself; relies on accompanying MDN documentation
  • Some older examples may not reflect the latest best practices

Code Examples

  1. Creating and appending elements:
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);
  1. Adding event listeners:
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});
  1. Using Intersection Observer:
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

const elements = document.querySelectorAll('.lazy-load');
elements.forEach(el => observer.observe(el));

Getting Started

To use these examples:

  1. Clone the repository:

    git clone https://github.com/mdn/dom-examples.git

  2. Navigate to the desired example directory:

    cd dom-examples/example-directory

  3. Open the HTML file in a web browser to see the example in action.

  4. Explore the JavaScript and CSS files to understand how the example works.

  5. Refer to the linked MDN documentation for detailed explanations and additional context.

Competitor Comparisons

web-platform-tests logo

wpt

4,878

Test suites for Web platform specs — including WHATWG, W3C, and others

Pros of wpt

  • Comprehensive test suite covering a wide range of web platform features
  • Collaborative effort with contributions from major browser vendors
  • Regularly updated to reflect the latest web standards and specifications

Cons of wpt

  • More complex and harder to navigate for beginners
  • Focuses on testing rather than providing simple, educational examples
  • Requires more setup and understanding of the testing framework

Code Comparison

mdn/dom-examples:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

web-platform-tests/wpt:

test(() => {
  const button = document.createElement('button');
  assert_true(button instanceof HTMLButtonElement);
  assert_equals(button.type, 'submit');
}, 'HTMLButtonElement interface object');

The mdn/dom-examples repository provides simple, practical examples for learning DOM manipulation, while web-platform-tests/wpt focuses on comprehensive testing of web platform features. The code snippets illustrate this difference, with mdn/dom-examples showing a basic event listener setup, and wpt demonstrating a more complex test case for button element properties.

whatwg logo

dom

1,563

DOM Standard

Pros of dom

  • Official specification repository, providing the most up-to-date and authoritative DOM standard
  • Includes detailed explanations and rationales for DOM features and behaviors
  • Allows direct contribution to the DOM standard through issues and pull requests

Cons of dom

  • More complex and technical content, less beginner-friendly
  • Focuses on specification rather than practical examples
  • May lack context for real-world usage scenarios

Code comparison

dom-examples:

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

dom:

interface Element : Node {
  [SameObject] readonly attribute DOMTokenList classList;
  [CEReactions] attribute DOMString className;
  [CEReactions] attribute DOMString id;
  [CEReactions] attribute DOMString slot;
};

The dom-examples repository provides practical JavaScript code samples, while the dom repository focuses on Web IDL interface definitions for the DOM specification.

dom-examples is more suitable for developers learning DOM manipulation, offering hands-on examples. dom is better for those interested in the technical details of the DOM standard or contributing to its development.

Both repositories serve different purposes: dom-examples for practical learning and dom for specification and standardization. Developers may find value in using both, depending on their needs and expertise level.

GoogleChrome logo

samples

5,774

A repo containing samples tied to new functionality in each release of Google Chrome.

Pros of samples

  • More extensive collection of examples covering a wider range of Chrome and web APIs
  • Regularly updated with new features and APIs as they become available in Chrome
  • Includes examples for cutting-edge web technologies and experimental features

Cons of samples

  • Focused primarily on Chrome-specific features, which may not work in other browsers
  • Less beginner-friendly, with more complex examples and less detailed explanations
  • May contain deprecated or experimental features that are subject to change

Code Comparison

samples (Service Worker example):

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

dom-examples (Service Worker example):

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

Both examples demonstrate a basic service worker fetch event handler, but samples tends to use older function syntax, while dom-examples uses more modern arrow functions.

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

dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages.

[!NOTE] You can include an example directly in MDN pages using {{EmbedLiveSample()}} macros or regular Markdown code blocks. These methods are simpler to maintain as the code lives beside the rest of the content. Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.

Repository contents

Contribute to MDN Web Docs

You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work. The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.

To find out how to get started, see the CONTRIBUTING.md document in this repository. By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our Code of Conduct.

Get in touch

You can communicate with the MDN Web Docs team and community using the communication channels.