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
272
votes
4 answers

How to get the title of HTML page with JavaScript?

How can I get the title of an HTML page with JavaScript?
ZA.
  • 10,107
  • 10
  • 37
  • 39
270
votes
5 answers

Getting value of HTML Checkbox from onclick/onchange events

From within onClickHandler and/or onChangeHandler, how can I determine what is the new state of the checkbox?
Maxim Gershkovich
  • 45,951
  • 44
  • 147
  • 243
270
votes
5 answers

Best way to get child nodes

I was wondering, JavaScript offers a variety of methods to get the first child element from any element, but which is the best? By best, I mean: most cross-browser compatible, fastest, most comprehensive and predictable when it comes to behaviour. A…
Elias Van Ootegem
  • 74,482
  • 9
  • 111
  • 149
263
votes
16 answers

Get selected option text with JavaScript

I have a dropdown list like this: How can I get the actual option text rather than the value using JavaScript? I can…
techtheatre
  • 5,678
  • 7
  • 31
  • 51
260
votes
14 answers

Using querySelectorAll to retrieve direct children

I am able to do this:
myDiv = getElementById("myDiv"); myDiv.querySelectorAll("#myDiv > .foo"); That is, I can successfully retrieve all the direct children of the myDiv element that have class…
mattsh
  • 5,713
  • 6
  • 23
  • 20
260
votes
15 answers

Check if an image is loaded (no errors) with jQuery

I'm using JavaScript with the jQuery library to manipulate image thumbnails contained in a unordered list. When the image is loaded it does one thing, when an error occurs it does something else. I'm using jQuery load() and error() methods as…
William
  • 15,465
  • 8
  • 36
  • 32
257
votes
11 answers

How to use XPath in Python?

What are the libraries that support XPath? Is there a full implementation? How is the library used? Where is its website?
yeruham
256
votes
27 answers

scrollIntoView Scrolls just too far

I have a page where a scroll bar containing table rows with divs in them is dynamically generated from the database. Each table row acts like a link, sort of like you'd see on a YouTube playlist next to the video player. When a user visits the page,…
Matthew Wilson
  • 2,565
  • 2
  • 13
  • 5
255
votes
3 answers

Normalization in DOM parsing with java - how does it work?

I saw the line below in code for a DOM parser at this tutorial. doc.getDocumentElement().normalize(); Why do we do this normalization ? I read the docs but I could not understand a word. Puts all Text nodes in the full depth of the sub-tree…
Apple Grinder
  • 3,573
  • 7
  • 22
  • 35
254
votes
25 answers

Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so it's provably the case that the…
Jason Kester
  • 5,951
  • 9
  • 35
  • 40
251
votes
5 answers

Finding child element of parent with JavaScript

What would the most efficient method be to find a child element of (with class or ID) of a particular parent element using pure javascript only. No jQuery or other frameworks. In this case, I would need to find child1 or child2 of parent, assuming…
Blyde
  • 2,923
  • 2
  • 18
  • 16
248
votes
10 answers

How may I sort a list alphabetically using jQuery?

I'm a bit out of my depth here and I'm hoping this is actually possible. I'd like to be able to call a function that would sort all the items in my list alphabetically. I've been looking through the jQuery UI for sorting but that doesn't seem to be…
dougoftheabaci
241
votes
2 answers

Rendering Angular components in Handsontable Cells

In a project of mine, I try to display Angular Components (like an Autocomplete Dropdown Search) in a table. Because of the requirements I have (like multi-selecting different cells with ctrl+click) I decided to give it a go with handsontable. I've…
phhbr
  • 2,699
  • 1
  • 14
  • 25
224
votes
16 answers

jQuery - Trigger event when an element is removed from the DOM

I'm trying to figure out how to execute some js code when an element is removed from the page: jQuery('#some-element').remove(); // remove some element from the page /* need to figure out how to independently detect the above happened */ is there…
sa125
  • 28,121
  • 38
  • 111
  • 153
222
votes
7 answers

jQuery .live() vs .on() method for adding a click event after loading dynamic html

I am using jQuery v.1.7.1 where the .live() method is apparently deprecated. The problem I am having is that when dynamically loading html into an element using: $('#parent').load("http://..."); If I try and add a click event afterwards it does…
Sean Thoman
  • 7,429
  • 6
  • 56
  • 103