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

What is a callback function and how do I use it with OOP

I want to use the php simple HTML DOM parser to grab the image, title, date, and description from each article on a page full of articles. When looking at the API I notice it has a set_callback which Sets a callback function. However im not sure…
Paul M
  • 3,937
  • 9
  • 45
  • 53
12
votes
3 answers

Clone Element without Children

Is there a way to copy an element without copying it's children? My goal is to duplicate a table, along with all classes, inline styles, etc. But I do not want to copy any of the table element's children. I realize I could copy the entire table and…
Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
12
votes
5 answers

Is it possible to use Optimizely (or other DOM manipulating A/B testing tools) on a site using Angularjs?

I am looking to use Optimizely on a site where we will use Angularjs, but from what I understand, that will be difficult because the whole purpose of Angularjs is to not manipulate the DOM, and Optimizely works by manipulating the DOM. Does anyone…
Tyler Riggs
  • 121
  • 1
  • 3
12
votes
3 answers

Trying to use HTML DOM parser to get main image on Amazon page

I'm trying to use HTML DOM Parser to get the image source of the "main" product image no matter what product page the parser is being pointed to. On every page it seems that that image has the id "landingImage". You would think that this should do…
user3312242
  • 161
  • 5
12
votes
3 answers

What are HTML DOM #text elements?

I'm learning knockout.js and trying to use an afterRender callback to apply behaviour to elements. I don't understand what these #text elements are that show up in my console.log(). So UI looks like this: Knockout binding like this:
rism
  • 11,932
  • 16
  • 76
  • 116
12
votes
3 answers

JavaScript selection/range framework

I've been working with selection/range objects, and because to the incredible amount of inconsistencies between browsers for specific selection/range stuff (even more than the DOM) I was wondering if there was a framework that would help me get…
Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
12
votes
2 answers

Why does code after tag get moved to before ? Is there a performance gain?

Reading other Stack Overflow posts like this SO question lead me to this odd Google recommendation on CSS optimization. "Odd" being their recommendation for deferring CSS loading ended like this:
Hello, world!
MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
12
votes
4 answers

How should I add multiple identical elements to a div with jQuery

I need to add multiple empty divs to a container element using jQuery. At the moment I am generating a string containing the empty html using a loop divstr = '
...
'; and then injecting that into my…
Ken
  • 77,016
  • 30
  • 84
  • 101
12
votes
1 answer

How to get current index in Array prototype map?

I'm using Array.prototype.map.call to store in an array a bunch of node list objects: function getListings() { return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) { return { rectangle:…
ILikeTacos
  • 17,464
  • 20
  • 58
  • 88
12
votes
5 answers

How to get the pageX and pageY of an Element without using event

Is there anyway to the positioning of any element without using e.pageX and e.pageY. Check this fiddle The fiddle is actually a poor attempt at what im trying to ask, but i though a visual example would be better. What i want to know is, Is it…
MarsOne
  • 2,155
  • 5
  • 29
  • 53
12
votes
1 answer

DOMsubtreemodified equivalent in IE

Does anyone know the equivalent of this event in IE ? Or may be a way around for this logic: document.addEventListener("DOMSubtreeModified", function (e) { if ($(e.target).hasClass("myclass")) { var getId= e.target.id; …
Ani
  • 4,473
  • 4
  • 26
  • 31
12
votes
2 answers

Will the browser parse / pre-render / paint display:none HTML?

I want to prevent the browser from doing the work to parse and pre-render or paint some "hidden" HTML until I'm ready to show it, so that I can quickly display a minimal set of content, having the browser only do the work the render the visible…
Steven Moseley
  • 15,871
  • 4
  • 39
  • 50
12
votes
3 answers

Selecting only from child nodes using Jsoup?

I'm currently working with a
    element with a lot of first-level
  • elements. I want to get those elements and only those elements. However, when I get them either using Jsoup selector or getElementsByTag, it returns also
  • elements inside…
heisenbergman
  • 1,459
  • 4
  • 16
  • 33
12
votes
7 answers

Clicking a link when enter key is pressed using jQuery

I'm trying to make it so when a user is in a text box and they press enter, it is the same as clicking the link, in which case it should take them to another page. Here's what I have and it doesn't work. The code //jQuery…
Tom
  • 121
  • 1
  • 1
  • 3
12
votes
1 answer

Creating a DOM NodeList

I'm implementing all of the optional E4X features described in ECMA-357 Annex A and I'm having trouble implementing domNodeList (§A.1.2 and §A.2.2). How would I create my own NodeList object? Even if I create a new XMLDocument and append every…
Eli Grey
  • 35,104
  • 14
  • 75
  • 93
1 2 3
99
100