Questions tagged [dom]

The Document Object Model(DOM) is a way to programmatically refer to the elements of a markup language like XML and HTML. Use with [javascript] or any other programming language that has a DOM parser

What is the Document Object Model?

The current DOM standard is at https://dom.spec.whatwg.org/. It is a complete specification for the DOM and supersedes all previous DOM specifications.

The legacy DOM2 specification https://www.w3.org/TR/DOM-Level-2-Core/introduction.html described the DOM in the following terms:

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. [...] Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

In other words, the DOM is not a string, but HTML/XML may represent the DOM as a string.

In the distant past, the DOM was limited in the kinds of elements that could be accessed. Form, link and image elements could be referenced with a hierarchical name that began with the root document object. A hierarchical name could make use of either the names or the sequential index of the traversed elements. For example, a form input element could be accessed as either document.formName.inputName or document.forms[0].elements[0].

JavaScript vs. the DOM

JavaScript is a language that the browser reads and does stuff with. But the DOM is where that stuff happens.

When is the DOM different than the HTML?

Here's one possibility: there are mistakes in your HTML and the browser has fixed them for you. Let's say you have a <table> element in your HTML and leave out the required <tbody> element. The browser will just insert that <tbody> for you. It will be there in the DOM, so you'll be able to find it with JavaScript and style it with CSS, even though it's not in your HTML.


DOM Living standard

Obsolete DOM specs


Useful references

41378 questions
12
votes
1 answer

Touch events are not triggered on video tags on safari for iPhone

I want to prevent the scrolling on a safari web page for iphone by binding the preventDefault method on the document element of the DOM, and it works on every elements but the video tag. document.addEventListener("touchmove",…
Stef
  • 523
  • 2
  • 7
  • 13
12
votes
2 answers

Order of execution of functions bound to an event in Javascript

I was searching for details regarding the order of execution of functions bound to a page event in javascript, for example via an EventListener. For example, if I bind three functions A(), B() and C(), to the same event (say DOMContentLoaded), what…
Carmine Giangregorio
  • 943
  • 2
  • 14
  • 35
12
votes
4 answers

Changing .html() of

Using jQuery when changing .html() of an
12
votes
1 answer

How to add attribute to HTML element using javascript

Using javascript (preferably not jquery) I'm trying to change the line: into I know the solution's got to be easy…
Philip Southwell
  • 365
  • 1
  • 6
  • 18
12
votes
4 answers

Optimize Huge JSON response

I am working on a Big Data client side application. Server language is Java. Within Frontend I have heavily vanilla JavaScript but AngularJS as MVC framework. Problem Dealing with big data analysis, at a time a single REST api response is around…
absqueued
  • 3,013
  • 3
  • 21
  • 43
12
votes
5 answers

Tab on disabled input

I am implementing progressive UI disclosure pattern in my application. Using which I am disabling the next elements. So based on input of one element the next element is enabled. But I have a problem is since the next element is disabled, the tab…
IndianWebDeveloper
  • 129
  • 1
  • 1
  • 4
12
votes
1 answer

lxml - get a flat list of elements

I'd like to flatten an lxml etree (specifically, HTML, if it matters.) How would I go about getting a flat list of all elements in the tree?
Walrus the Cat
  • 2,314
  • 5
  • 35
  • 64
12
votes
4 answers

Javascript: how to tell if a node object has been inserted into a document/another element yet

I'd like to be able to identify whether a given DOM node has been appended/inserted into another node yet, or whether it is fresh out of document.createElement() or similar and has not been placed anywhere. In most browsers just checking the…
thomasrutter
  • 114,488
  • 30
  • 148
  • 167
12
votes
3 answers

How do you disable click events from the contextmenu event when using Ctrl+Click in Safari for Mac?

When using ctrl+ click to fire a contextmenu event (Context.JS) in Safari on Mac OS 10.9, the mousedown/up/click events also fire. This causes the menu to be closed. The events seem to occur asynchronously in relation to one another, so…
GarethPN
  • 432
  • 4
  • 11
12
votes
2 answers

jQuery html() and self-closing tags

While creating self-closed elements with jQuery html() the following issue happens: $('#someId').html('
  • ') will create
  • It closes correctly the
  • tag but not the It seems…
  • UXTE
    • 493
    • 2
    • 5
    • 15
    12
    votes
    2 answers

    Add Query-String parameter to static link on click

    I'm looking for a robust way of dynamically injecting a query string parameter when a visitor clicks on a static anchor-link. For example a link: Test I want to pass a query string to the next page but have…
    krex
    • 345
    • 3
    • 8
    • 21
    12
    votes
    1 answer

    Browser EventListenerList Implementation

    Are there any browsers that implement the DOM3 EventListenerList interface? http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-EventListenerList
    Noor
    • 191
    • 2
    • 7
    12
    votes
    2 answers

    When are DOMs removed from memory?

    I am working on an application that is creating and removing a lot of DOMs. I've notice that the process memory from the browser tab continuously increases, despite the javascript heap memory remaining constant. In a test application I create and…
    r2_118
    • 640
    • 1
    • 9
    • 25
    12
    votes
    3 answers

    How do you keep two tables' column widths in sync while resizing?

    I've looked around a bit and can't seem to find a decent solution, that doesn't require some crazy JavaScript, to the following problem. There are two separate tables in the example. The first one is just for the headers. The second is for the…
    CatDadCode
    • 58,507
    • 61
    • 212
    • 318
    12
    votes
    2 answers

    What is the difference between DOMXPath::evaluate and DOMXPath::query?

    Trying to decide which is more appropriate for my use case... After comparing the documentation for these methods, my vague understanding is evaluate returns a typed result but query doesn't. Furthermore, the query example includes looping through…
    Steve Chambers
    • 37,270
    • 24
    • 156
    • 208
    1 2 3
    99
    100