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

39277 questions
8314
votes
63 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
  • 124,779
  • 37
  • 85
  • 97
3153
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
  • 34,569
  • 6
  • 27
  • 25
2435
votes
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?
haddar
  • 24,557
  • 3
  • 19
  • 12
2423
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
  • 141,408
  • 39
  • 237
  • 299
1995
votes
29 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.
monaung
1507
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
  • 19,274
  • 15
  • 46
  • 65
1438
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.
  • 31,451
  • 47
  • 123
  • 162
1319
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
  • 34,459
  • 21
  • 86
  • 139
1316
votes
17 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
  • 128,866
  • 137
  • 280
  • 342
1266
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
  • 42,243
  • 11
  • 75
  • 95
1147
votes
30 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,851
  • 3
  • 19
  • 22
1145
votes
37 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
  • 35,929
  • 37
  • 108
  • 142
1092
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
  • 8,799
  • 63
  • 201
  • 374
1001
votes
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
  • 83,187
  • 29
  • 180
  • 174
976
votes
19 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…
Navneet
  • 10,139
  • 4
  • 20
  • 22
1
2 3
99 100