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

Difference between document.addEventListener and window.addEventListener?

While using PhoneGap, it has some default JavaScript code that uses document.addEventListener, but I have my own code which uses window.addEventListener: function onBodyLoad(){ document.addEventListener("deviceready", onDeviceReady, false); …
Charlie
  • 11,380
  • 19
  • 83
  • 138
218
votes
10 answers

How to replace DOM element in place using Javascript?

I am looking to replace an element in the DOM. For example, there is an element that I want to replace with a instead. How would I go and do that?
omg
  • 136,412
  • 142
  • 288
  • 348
215
votes
12 answers

How can I loop through ALL DOM elements on a page?

I'm trying to loop over ALL elements on a page, so I want to check every element that exists on this page for a special class. So, how do I say that I want to check EVERY element?
Florian Müller
  • 7,448
  • 25
  • 78
  • 120
213
votes
4 answers

JavaScript DOM remove element

I'm trying to test if a DOM element exists, and if it does exist delete it, and if it doesn't exist create it. var duskdawnkey = localStorage["duskdawnkey"]; var iframe = document.createElement("iframe"); var whereto =…
Joshua Redfield
  • 2,217
  • 2
  • 14
  • 10
213
votes
8 answers

How to access component methods from “outside” in ReactJS?

Why can’t I access the component methods from “outside” in ReactJS? Why is it not possible and is there any way to solve it? Consider the code: var Parent = React.createClass({ render: function() { var child = ; return…
user1518183
  • 4,651
  • 5
  • 28
  • 39
212
votes
10 answers

How to get the element clicked (for the whole document)?

I would like to get the current element (whatever element that is) in an HTML document that I clicked. I am using: $(document).click(function () { alert($(this).text()); }); But very strangely, I get the text of the whole(!) document, not the…
user1145216
  • 2,434
  • 3
  • 15
  • 14
212
votes
18 answers

Check if option is selected with jQuery, if not select a default

Using jQuery, how do you check if there is an option selected in a select menu, and if not, assign one of the options as selected. (The select is generated with a maze of PHP functions in an app I just inherited, so this is a quick fix while I get…
meleyal
  • 32,252
  • 24
  • 73
  • 79
208
votes
13 answers

How to show Page Loading div until the page has finished loading?

I have a section on our website that loads quite slowly as it's doing some intensive calls. Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?
Shadi Almosri
  • 11,678
  • 16
  • 58
  • 80
202
votes
14 answers

Get child node index

In straight up javascript (i.e., no extensions such as jQuery, etc.), is there a way to determine a child node's index inside of its parent node without iterating over and comparing all children nodes? E.g., var child =…
Uyghur Lives Matter
  • 18,820
  • 42
  • 108
  • 144
200
votes
2 answers

querySelector vs. getElementById

I have heard that querySelector and querySelectorAll are new methods to select DOM elements. How do they compare to the older methods, getElementById and getElementsByClassName in terms of performance and browser support? How does the performance…
goesToEleven
  • 2,083
  • 2
  • 12
  • 4
200
votes
4 answers

How to get element by class name?

Using JavaScript, we can get element by id using following syntax: var x=document.getElementById("by_id"); I tried following to get element by class: var y=document.getElementByClass("by_class"); But it resulted into error: getElementByClass is…
Alpha
  • 13,320
  • 27
  • 96
  • 163
197
votes
4 answers

How to get a DOM Element from a jQuery selector?

I'm having an impossibly hard time finding out to get the actual DOMElement from a jQuery selector. Sample Code: var checkbox = $("#bob").click(function() { //some code } ) and in another piece of code I'm trying…
BillRob
  • 4,659
  • 4
  • 26
  • 38
196
votes
11 answers

Appending HTML string to the DOM

How to append a HTML string such as var str = '

Just some text here

'; to the
with the id test? (Btw div.innerHTML += str; is not acceptable.)
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
196
votes
14 answers

How do I replace text inside a div element?

I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.
TEXT GOES HERE
Here's what the function will look…
sblundy
  • 60,628
  • 22
  • 121
  • 123
189
votes
6 answers

jQuery: select an element's class and id at the same time?

I've got some links that I want to select class and id at the same time. This is because I've got 2 different behaviours. When a class of links got one class name they behave in one way, when the same clas of links got another class name they behave…
ajsie
  • 77,632
  • 106
  • 276
  • 381