Stack Overflow
Stack Overflow

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
409
votes
6 answers

Pass mouse events through absolutely-positioned element

I'm attempting to capture mouse events on an element with another absolutely-positioned element on top of it. Right now, events on the absolutely-positioned element hit it and bubble up to its parent, but I want it to be "transparent" to these mouse…
s4y
  • 50,525
  • 12
  • 70
  • 98
405
votes
12 answers

How do I select text nodes with jQuery?

I would like to get all descendant text nodes of an element, as a jQuery collection. What is the best way to do that?
Christian Oudard
  • 48,140
  • 25
  • 66
  • 69
402
votes
15 answers

Parse an HTML string with JS

I want to parse a string which contains HTML text. I want to do it in JavaScript. I tried the Pure JavaScript HTML Parser library but it seems that it parses the HTML of my current page, not from a string. Because when I try the code below, it…
stage
  • 4,225
  • 4
  • 15
  • 8
397
votes
3 answers

What is the difference between children and childNodes in JavaScript?

I have found myself using JavaScript and I ran across childNodes and children properties. I am wondering what the difference between them is. Also is one preferred to the other?
John
  • 13,197
  • 7
  • 51
  • 101
394
votes
6 answers

Why is React's concept of Virtual DOM said to be more performant than dirty model checking?

I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff between virtual DOMs actually even less performant…
Daniil
  • 5,760
  • 5
  • 18
  • 29
393
votes
9 answers

How to set DOM element as first child?

I have an element E and I'm appending some elements to it. All of a sudden, I find out that the next element to append should be the first child of E. What's the trick, how to do it? Method unshift doesn't work because E is an object, not…
Popara
  • 4,280
  • 2
  • 19
  • 19
393
votes
12 answers

How can I add a class to a DOM element in JavaScript?

How do I add a class for the div? var new_row = document.createElement('div');
wow
  • 7,989
  • 17
  • 53
  • 63
386
votes
10 answers

Can I position an element fixed relative to parent?

I find that when I position an element fixed, it doesn't matter if the parent is positioned relative or not, it will position fixed, relative to the window? #wrapper { width: 300px; background: orange; margin: 0 auto; position:…
Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
379
votes
16 answers

How to stop event propagation with inline onclick attribute?

Consider the following:
something inside the header
How can I make it so that when the user clicks the span, it…
Sam
  • 6,167
  • 6
  • 26
  • 24
373
votes
11 answers

Detect changes in the DOM

I want to execute a function when some div or input are added to the html. Is this possible? For example, a text input is added, then the function should be called.
esafwan
  • 17,311
  • 33
  • 107
  • 166
372
votes
8 answers

jQuery count child elements

  • 29
  • 16
  • 5
  • 8
  • 10
  • 7
I want to count the total number of
  • elements in
    . How is that possible…
    • gautamlakum
    • 11,815
    • 23
    • 67
    • 90
    369
    votes
    6 answers

    Find the closest ancestor element that has a specific class

    How can I find an element's ancestor that is closest up the tree that has a particular class, in pure JavaScript? For example, in a tree like so:

    Where am I?

    …
    rvighne
    • 20,755
    • 11
    • 51
    • 73
    353
    votes
    4 answers

    What is offsetHeight, clientHeight, scrollHeight?

    Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth? One must know this difference before working on the client side. Otherwise half of their life will be spent…
    shibualexis
    • 4,534
    • 3
    • 20
    • 25
    351
    votes
    9 answers

    Unable to understand useCapture parameter in addEventListener

    I have read article at https://developer.mozilla.org/en/DOM/element.addEventListener but unable to understand useCapture attribute. Definition there is: If true, useCapture indicates that the user wishes to initiate capture. After initiating…
    user26732
    • 3,686
    • 3
    • 14
    • 18
    337
    votes
    6 answers

    How to find a parent with a known class in jQuery?

    I have a
    that has many other
    s within it, each at a different nesting level. Rather than give every child
    an identifier, I rather just give the root
    the identifier. Here’s an example:
    …
    John Smith
    • 8,567
    • 13
    • 51
    • 74
    1 2 3
    …
    99 100