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
528
votes
6 answers

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

There are several questions on StackOverflow regarding offsetWidth / clientWidth / scrollWidth (and -Height, respectively), but none give comprehensive explanation of what those values are. Also, there are several sources on the web giving confusing…
user123444555621
  • 148,182
  • 27
  • 114
  • 126
506
votes
15 answers

Violation Long running JavaScript task took xx ms

Recently, I got this kind of warning, and this is my first time getting it: [Violation] Long running JavaScript task took 234ms [Violation] Forced reflow while executing JavaScript took 45ms I'm working on a group project and I have no idea where…
procatmer
  • 5,420
  • 3
  • 13
  • 20
485
votes
12 answers

How to append text to a div element?

I’m using AJAX to append data to a
element, where I fill the
from JavaScript. How can I append new data to the
without losing the previous data found in it?
Adham
  • 63,550
  • 98
  • 229
  • 344
485
votes
18 answers

Changing website favicon dynamically

I have a web application that's branded according to the user that's currently logged in. I'd like to change the favicon of the page to be the logo of the private label, but I'm unable to find any code or any examples of how to do this. Has anybody…
SqlRyan
  • 33,116
  • 33
  • 114
  • 199
478
votes
14 answers

onKeyPress Vs. onKeyUp and onKeyDown

What is the difference between these three events? Upon googling I found that: The onKeyDown event is triggered when the user presses a key. The onKeyUp event is triggered when the user releases a key. The onKeyPress event is triggered when the…
instantsetsuna
  • 9,183
  • 8
  • 25
  • 28
475
votes
11 answers

Find an element in DOM based on an attribute value

Can you please tell me if there is any DOM API which search for an element with given attribute name and attribute value: Something like: doc.findElementByAttribute("myAttribute", "aValue");
michael
  • 106,540
  • 116
  • 246
  • 346
475
votes
36 answers

How to pass arguments to addEventListener listener function?

The situation is somewhat like- var someVar = some_other_function(); someObj.addEventListener("click", function(){ some_function(someVar); }, false); The problem is that the value of someVar is not visible inside the listener function of the…
Abhishek Yadav
  • 4,931
  • 4
  • 20
  • 10
462
votes
14 answers

What is the "hasClass" function with plain JavaScript?

How do you do jQuery’s hasClass with plain ol’ JavaScript? For example, What’s the JavaScript way to ask if has thatClass?
Kyle Cureau
  • 19,028
  • 23
  • 75
  • 104
460
votes
0 answers

How can I check whether a variable is defined in JavaScript?

How to check whether a JavaScript variable defined in cross-browser way? I ran into this problem when writing some JavaScript utilizing FireBug logging. I wrote some code like below: function profileRun(f) { // f: functions to be profiled …
Morgan Cheng
  • 73,950
  • 66
  • 171
  • 230
446
votes
6 answers

Do DOM tree elements with IDs become global properties?

Working on an idea for a simple HTMLElement wrapper I stumbled upon the following for Internet Explorer and Chrome: For a given HTMLElement with an id in the DOM tree, it is possible to retrieve the
using its ID as a variable name or as a…
KooiInc
  • 119,216
  • 31
  • 141
  • 177
439
votes
5 answers

Difference between Node object and Element object?

I am totally confused between Node object and Element object. document.getElementById() returns Element object while document.getElementsByClassName() returns NodeList object (Collection of Elements or Nodes?) If a div is an Element Object then what…
P K
  • 9,972
  • 12
  • 53
  • 99
434
votes
12 answers

What is the most efficient way to create HTML elements using jQuery?

Recently I've been doing a lot of modal window pop-ups and what not, for which I used jQuery. The method that I used to create the new elements on the page has overwhelmingly been along the lines of: $("
"); However, I'm getting the…
Darko
  • 38,310
  • 15
  • 80
  • 107
433
votes
8 answers

Select all elements with a "data-xxx" attribute without using jQuery

Using only pure JavaScript, what is the most efficient way to select all DOM elements that have a certain data- attribute (let's say data-foo). The elements may be different, for example:


JLeonard
  • 8,520
  • 7
  • 36
  • 36
425
votes
6 answers

If a DOM Element is removed, are its listeners also removed from memory?

If a DOM Element is removed, are its listeners removed from memory too?
Julian Krispel-Samsel
  • 7,512
  • 3
  • 33
  • 40
411
votes
16 answers

Invariant Violation: _registerComponent(...): Target container is not a DOM element

I get this error after a making trivial React example page: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. Here's my code: /** @jsx React.DOM */ 'use strict'; var React =…
Dan Abramov
  • 264,556
  • 84
  • 409
  • 511