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
3 answers

Append NodeList to HTML element

I have the following string: var songlist = '
Mama Tried

Mama Tried

12
votes
3 answers

Insert a node in between text

I am familiar with inserting text nodes after or before a given reference node. But, I would like to know how to insert a tag between text in a given node. For example, Before insertion:

Lorem dolor

After insertion:

Lorem…

roobus
12
votes
1 answer

In Javascript, why does setting outerHTML on an element set its parentNode to 'null'?

In Javascript, when I set the outerHTML of an element in the DOM to a new value (to change it into a different element, for example), its 'parentNode' property gets set to 'null'. Why? I would expect it to remain at whatever value it was at before…
DrMcCleod
  • 3,865
  • 1
  • 15
  • 24
12
votes
2 answers

Should I wait for DOMContentLoaded event if I place a script tag at the end of a body tag

Should I wait for DOMContentLoaded event if I place a script tag with the corresponding JS file at the end of a body tag? index.html
FrozenHeart
  • 19,844
  • 33
  • 126
  • 242
12
votes
2 answers

Pass the value of a SELECT to a Javascript function via the onchange event?

I have a HTML page that contains a search box containing a number of textboxes. The first part of the search box is a SELECT dropdown list that contains a variety of report types. Each report type requires 1 or more of textboxes to be filled in to…
John M
  • 14,338
  • 29
  • 91
  • 143
12
votes
3 answers

How is document.querySelector implemented?

I suppose the answer to this question depends on what browser you are using, but I guess that just makes it all the more interesting. I'm wondering how the querySelector() method is actually implemented. Similarly, I'm curious about…
Luke
  • 5,567
  • 4
  • 37
  • 66
12
votes
4 answers

Binding events to not yet created DOM elements (jquery)

How do I bind events to html elements that don't exist at the time of the script loading? One part of my script adds these to the DOM: link The problem is I can't just do: $(document).ready(function(){ …
Ben G
  • 26,091
  • 34
  • 103
  • 170
12
votes
1 answer

MutationObserver characterData usage without childList

Up until recently I thought that childList : true on MutationObserver was to be used when child node is being added/removed e.g from to and characterData : true…
Matas Vaitkevicius
  • 58,075
  • 31
  • 238
  • 265
12
votes
2 answers

HTML1506: Unexpected token