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
188
votes
12 answers

How to correctly iterate through getElementsByClassName

I am Javascript beginner. I am initing web page via the window.onload, I have to find bunch of elements by their class name (slide) and redistribute them into different nodes based on some logic. I have function Distribute(element) which takes an…
Kupto
  • 2,802
  • 2
  • 13
  • 16
187
votes
12 answers

Count immediate child div elements using jQuery

I have the following HTML node structure:
How do I count the number of immediate children of foo, that are of type div? In the example…
Dónal
  • 185,044
  • 174
  • 569
  • 824
187
votes
11 answers

React.js: onChange event for contentEditable

How do I listen to change events for a contentEditable-based control? var Number = React.createClass({ render: function() { return
NVI
  • 14,907
  • 16
  • 65
  • 104
187
votes
5 answers

How to use "not" in XPath?

I want to write something of the sort: //a[not contains(@id, 'xx')] (meaning all the links who's 'id' attribute doesn't contain the string 'xx') I can't find the right syntax.
Guy
  • 14,178
  • 27
  • 67
  • 88
186
votes
5 answers

Difference between "change" and "input" event for an `input` element

Can someone tell me what the difference between the change and input events is? I am using jQuery for adding them: $('input[type="text"]').on('change', function() { alert($(this).val()); }) It also works with input instead of change. Maybe some…
Gabriel Petrovay
  • 20,476
  • 22
  • 97
  • 168
185
votes
9 answers

HTML "overlay" which allows clicks to fall through to elements behind it

I'm trying to overlay a element on top of a webpage (to draw arbitrary graphics), and I've come to the point where I can stack it inside of a element on top of everything, but this prevents the user from clicking on any links/buttons/etc. Is there…
Steven Schlansker
  • 37,580
  • 14
  • 81
  • 100
185
votes
13 answers

AngularJS: How to run additional code after AngularJS has rendered a template?

I have an Angular template in the DOM. When my controller gets new data from a service, it updates the model in the $scope, and re-renders the template. All good so far. The issue is that I need to also do some extra work after the template has…
gorebash
  • 1,975
  • 2
  • 12
  • 7
178
votes
13 answers

How to check null objects in jQuery

I'm using jQuery and I want to check the existence of an element in my page. I have written following code, but it's not working: if($("#btext" + i) != null) { //alert($("#btext" + i).text()); $("#btext" + i).text("Branch " + i); } How do I…
djmzfKnm
  • 26,679
  • 70
  • 166
  • 227
178
votes
8 answers

JavaScript get element by name

Consider this function: function validate() { var acc = document.getElementsByName('acc').value; var pass = document.getElementsByName('pass').value; alert (acc); } And this HTML part:
Juliver Galleto
  • 8,831
  • 27
  • 86
  • 164
176
votes
17 answers

Can multiple different HTML elements have the same ID if they're different elements?

Can multiple HTML elements have the same ID if they're of different element types? Is a scenario like this valid? Eg: div#foo span#foo a#foo
omninonsense
  • 6,644
  • 9
  • 45
  • 66
175
votes
3 answers

window.location.href vs window.location.replace vs window.location.assign in JavaScript

What is the difference between window.location.href="http://example.com"; window.location.replace("http://example.com"); window.location.assign("http://example.com"); I read in many forums that window.location.assign() just replaces the current…
milan_9211
  • 1,919
  • 3
  • 13
  • 5
173
votes
10 answers

Finding element's position relative to the document

What's the easiest way to determine an elements position relative to the document/body/browser window? Right now I'm using .offsetLeft/offsetTop, but this method only gives you the position relative to the parent element, so you need to determine…
einstein
  • 13,389
  • 27
  • 80
  • 110
173
votes
12 answers

Event when window.location.href changes

I'm writing a Greasemonkey script for a site which at some point modifies location.href. How can I get an event (via window.addEventListener or something similar) when window.location.href changes on a page? I also need access to the DOM of the…
Johan Dahlin
  • 25,300
  • 6
  • 40
  • 55
171
votes
6 answers

innerText vs innerHTML vs label vs text vs textContent vs outerText

I have a dropdown list which is populated by Javascript. Whilst deciding what should be the default value to show on load, I realised that the following properties showed exactly the same…
MyDaftQuestions
  • 4,487
  • 17
  • 63
  • 120
171
votes
17 answers

Best Practice: Access form elements by HTML id or name attribute?

As any seasoned JavaScript developer knows, there are many (too many) ways to do the same thing. For example, say you have a text field as follows:
There are many way to access…
seth
  • 2,741
  • 3
  • 20
  • 15