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
332
votes
14 answers

Difference between innerText, innerHTML and value?

What is the difference between innerHTML, innerText and value in JavaScript?
user2819851
  • 3,371
  • 3
  • 12
  • 6
325
votes
21 answers

How can I check if a scrollbar is visible?

Is it possible to check the overflow:auto of a div? For example: HTML
* content
JQUERY $('.my_class').live('hover', function (event) { if…
Peter
  • 11,413
  • 31
  • 100
  • 152
320
votes
19 answers

"Submit is not a function" error in JavaScript

Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
Jin Yong
  • 42,698
  • 72
  • 141
  • 187
320
votes
37 answers

How do you check if a JavaScript Object is a DOM Object?

I'm trying to get: document.createElement('div') //=> true {tagName: 'foobar something'} //=> false In my own scripts, I used to just use this since I never needed tagName as a property: if (!object.tagName) throw ...; So for the second object,…
Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
314
votes
4 answers

How can I determine the type of an HTML element in JavaScript?

I need a way to determine the type of an HTML element in JavaScript. It has the ID, but the element itself could be a
, a field, a
, etc. How can I achieve this?
AdamTheHutt
  • 8,287
  • 8
  • 33
  • 33
311
votes
13 answers

Why do browsers present selected files as coming from C:\fakepath\ instead of their true local path?

When I pick a file from the input above, I get a path like this: C:\fakepath\test.csv or this (Mozilla): test.csv I want the fully qualified local file…

e_maxm
  • 3,143
  • 2
  • 15
  • 3
305
votes
9 answers

Converting HTML string into DOM elements?

Is there a way to convert HTML like:
or any other HTML string into DOM element? (So that I could use appendChild()). I know that I can do .innerHTML and .innerText, but that is not what I want -- I…
Tower
  • 98,741
  • 129
  • 357
  • 507
299
votes
17 answers

What is the difference between jQuery: text() and html() ?

What the difference between text() and html() functions in jQuery ? $("#div").html('Linkhello'); vs $("#div").text('Linkhello');
Brettk
  • 3,033
  • 2
  • 16
  • 3
297
votes
15 answers

How to Implement DOM Data Binding in JavaScript

Please treat this question as strictly educational. I'm still interested in hearing new answers and ideas to implement this tl;dr How would I implement bi-directional data-binding with JavaScript? Data Binding to the DOM By data binding to the DOM I…
Benjamin Gruenbaum
  • 270,886
  • 87
  • 504
  • 504
292
votes
10 answers

How to check in Javascript if one element is contained within another

How can I check if one DOM element is a child of another DOM element? Are there any built in methods for this? For example, something like: if (element1.hasDescendant(element2)) or if (element2.hasParent(element1)) If not then any ideas how to…
AJ.
  • 10,732
  • 13
  • 41
  • 50
290
votes
18 answers

How can I scale the content of an iframe?

How can I scale the content of an iframe (in my example it is an HTML page, and is not a popup) in a page of my web site? For example, I want to display the content that appears in the iframe at 80% of the original size.
John Griffiths
  • 3,263
  • 4
  • 21
  • 19
286
votes
26 answers

Can scripts be inserted with innerHTML?

I tried to load some scripts into a page using innerHTML on a
. It appears that the script loads into the DOM, but it is never executed (at least in Firefox and Chrome). Is there a way to have scripts execute when inserting them with…
Craig
  • 7,471
  • 4
  • 29
  • 46
282
votes
22 answers

How do you set the document title in React?

I would like to set the document title (in the browser title bar) for my React application. I have tried using react-document-title (seems out of date) and setting document.title in the constructor and componentDidMount() - none of these solutions…
eli
  • 4,636
  • 7
  • 25
  • 29
276
votes
8 answers

How to do a wildcard element name match with "querySelector()" or "querySelectorAll()" in JavaScript?

Is there a way to do a wildcard element name match using querySelector or querySelectorAll? The XML document I'm trying to parse is basically a flat list of properties I need to find elements that have certain strings in their names. I see support…
Erik Andersson
  • 2,761
  • 2
  • 14
  • 3
276
votes
12 answers

How can I inspect html element that disappears from DOM on lost focus?

I'm trying to inspect CSS properties from an input into a table cell. The input appears on click and disappears on lost focus, as when I try to inspect it. How can I do it to don't lost focus while I move to another window (the inspector)?
Rogelio Triviño
  • 5,961
  • 3
  • 22
  • 17