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 It is a complete specification for the DOM and supersedes all previous DOM specifications.

The legacy DOM2 specification 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
65 answers

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

How do I toggle the visibility of an element using .hide(), .show(), or .toggle()? How do I test if an element is visible or hidden?
Philip Morton
  • 129,733
  • 38
  • 88
  • 97
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
  • 36,807
  • 6
  • 28
  • 25
35 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?
  • 25,377
  • 3
  • 20
  • 13
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…
  • 144,921
  • 39
  • 244
  • 303
32 answers

Retrieve the position (X,Y) of an HTML element

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript.
21 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
  • 20,522
  • 15
  • 48
  • 66
15 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…
  • 33,367
  • 47
  • 130
  • 168
15 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"); = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing =…
Rob Stevenson-Leggett
  • 35,279
  • 21
  • 87
  • 141
18 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?
  • 136,412
  • 142
  • 288
  • 348
39 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:



And I grab the node I want like so: var myNode =…
  • 39,494
  • 39
  • 114
  • 146
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…
  • 46,476
  • 14
  • 84
  • 101
31 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.)
  • 12,869
  • 3
  • 20
  • 22
16 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…
  • 11,039
  • 73
  • 223
  • 418
20 answers

How to find event listeners on a DOM node in JavaScript or in debugging?

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…
  • 11,187
  • 4
  • 21
  • 22
19 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
  • 85,990
  • 32
  • 182
  • 176
2 3
99 100