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 http://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

37956 questions
8089
votes
60 answers

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?
Philip Morton
  • 121,023
  • 36
  • 84
  • 96
2984
votes
34 answers

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?
Nathan Smith
  • 32,861
  • 6
  • 25
  • 25
2387
votes
34 answers

Get selected text from a drop-down list (select box) using jQuery

How can I get the selected text (not the selected value) from a drop-down list in jQuery?
haddar
  • 24,077
  • 3
  • 18
  • 12
2384
votes
18 answers

.prop() vs .attr()

So jQuery 1.6 has the new function prop(). $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) or in this case do they do the same…
Naftali aka Neal
  • 138,754
  • 36
  • 231
  • 295
1816
votes
28 answers

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.
monaung
1418
votes
16 answers

How do I find out which DOM element has the focus?

I would like to find out, in JavaScript, which element currently has focus. I've been looking through the DOM and haven't found what I need, yet. Is there a way to do this, and how? The reason I was looking for this: I'm trying to make keys like the…
Tony Peterson
  • 18,264
  • 15
  • 45
  • 64
1353
votes
14 answers

How can I select an element by name with jQuery?

I have a table column I’m trying to expand and hide. jQuery seems to hide the elements when I select it by class but not by the element’s name. For example: $(".bold").hide(); // Selecting by class works. $("tcol1").hide(); // Selecting by name…
T.T.T.
  • 29,703
  • 45
  • 120
  • 161
1297
votes
15 answers

How do I set/unset a cookie with jQuery?

How do I set and unset a cookie using jQuery, for example create a cookie named test and set the value to 1?
omg
  • 123,990
  • 135
  • 275
  • 341
1293
votes
14 answers

jQuery document.createElement equivalent?

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on. var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing =…
Rob Stevenson-Leggett
  • 33,849
  • 21
  • 84
  • 138
1221
votes
19 answers

Remove element by id

When removing an element with standard JavaScript, you must go to its parent first: var element = document.getElementById("element-id"); element.parentNode.removeChild(element); Having to go to the parent node first seems a bit odd to me, is there…
Zaz
  • 39,637
  • 10
  • 70
  • 92
1067
votes
27 answers

How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)
benzaita
  • 11,041
  • 3
  • 18
  • 22
1016
votes
35 answers

Remove all child elements of a DOM node in JavaScript

How would I go about removing all of the child elements of a DOM node in JavaScript? Say I have the following (ugly) HTML:

hello

world

And I grab the node I want like so: var myNode =…
Polaris878
  • 33,681
  • 35
  • 107
  • 140
992
votes
15 answers

How do I get the value of text input field using JavaScript?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field: And this is my…
user979331
  • 10,209
  • 56
  • 186
  • 339
949
votes
18 answers

Why is setTimeout(fn, 0) sometimes useful?

I've recently run into a rather nasty bug, wherein the code was loading a had a pre-selected value. In IE6, we already had code to fix the selected
Dan Lew
  • 81,251
  • 29
  • 178
  • 174
917
votes
19 answers

How to find event listeners on a DOM node when debugging or from the JavaScript code?

I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event? Events are attached using: Prototype's…
Navneet
  • 9,549
  • 4
  • 19
  • 22
1
2 3
99 100