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
41,692
questions
8679
votes
66
answers
3.2m
views
How do I check if an element is hidden in jQuery?
How do I toggle the visibility of an element using .hide(), .show(), or .toggle()?
How do I test if an element is visible or hidden?
- 131k
3421
votes
34
answers
3.5m
views
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?
- 37.3k
2530
votes
35
answers
2.4m
views
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?
- 25.5k
2497
votes
18
answers
729k
views
.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'...
- 146k
2310
votes
31
answers
2.4m
views
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
1642
votes
22
answers
913k
views
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 ...
- 20.8k
1538
votes
15
answers
2.3m
views
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 <td> elements when I select it by class but not by the element’s name.
For example:
$(".bold").hide(); // ...
- 34k
1375
votes
39
answers
1.6m
views
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:
<p id="foo">
<span>hello</span>
<div&...
- 40.6k
1364
votes
15
answers
1.0m
views
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 = ...
- 35.5k
1352
votes
18
answers
1.5m
views
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?
- 138k
1332
votes
19
answers
1.9m
views
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 ...
- 47.6k
1270
votes
31
answers
840k
views
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.)
- 13.1k
1253
votes
16
answers
4.0m
views
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:
<input name="searchTxt" type="text" ...
- 11.2k
1123
votes
22
answers
947k
views
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 ...
- 11.6k
1101
votes
19
answers
399k
views
Why is setTimeout(fn, 0) sometimes useful?
I've recently run into a rather nasty bug, wherein the code was loading a <select> dynamically via JavaScript. This dynamically loaded <select> had a pre-selected value. In IE6, we ...
- 86.8k
1098
votes
26
answers
2.4m
views
How to make JavaScript execute after page load?
I'm executing an external script, using a <script> inside <head>.
Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like ...
- 113k
1076
votes
20
answers
934k
views
How to insert an element after another element in JavaScript without using a library?
There's insertBefore() in JavaScript, but how can I insert an element after another element without using jQuery or another library?
- 17.1k
985
votes
30
answers
1.5m
views
Check if an element contains a class in JavaScript?
Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class?
Currently, I'm doing this:
var test = document.getElementById("test");
var testClass = test....
- 28k
945
votes
30
answers
967k
views
Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
I have an HTML string representing an element: '<li>text</li>'. I'd like to append it to an element in the DOM (a ul in my case). How can I do this with Prototype or with DOM methods?
(I ...
- 58.5k
910
votes
57
answers
943k
views
Detect click outside React component
I'm looking for a way to detect if a click event happened outside of a component, as described in this article. jQuery closest() is used to see if the target from a click event has the dom element as ...
- 22.6k
872
votes
13
answers
673k
views
How can I remove all CSS classes using jQuery/JavaScript?
Instead of individually calling $("#item").removeClass() for every single class an element might have, is there a single function which can be called which removes all CSS classes from the given ...
- 265k
808
votes
44
answers
2.1m
views
Include another HTML file in a HTML file
I have 2 HTML files, suppose a.html and b.html. In a.html I want to include b.html.
In JSF I can do it like that:
<ui:include src="b.xhtml" />
It means that inside a.xhtml file, I can include ...
- 17.6k
718
votes
6
answers
225k
views
Difference between DOM parentNode and parentElement
Can somebody explain in simple terms, what is the difference between classical DOM parentNode and newly introduced in Firefox 9 parentElement
- 24k
680
votes
14
answers
730k
views
For loop for HTMLCollection elements
I'm trying to set get id of all elements in an HTMLCollectionOf. I wrote the following code:
var list = document.getElementsByClassName("events");
console.log(list[0].id);
for (key in list) {
...
user2953119
664
votes
27
answers
1.4m
views
How can I check if an element exists in the visible DOM?
How do you test an element for existence without the use of the getElementById method?
I have set up a live demo for reference. I will also print the code on here as well:
<!DOCTYPE html>
<...
- 8,055
622
votes
17
answers
1.4m
views
How do I programmatically set the value of a select box element using JavaScript?
I have the following HTML <select> element:
<select id="leaveCode" name="leaveCode">
<option value="10">Annual Leave</option>
<option value="11">Medical Leave</...
- 77.4k
620
votes
31
answers
847k
views
Check if element is visible in DOM
Is there any way that I can check if an element is visible in pure JS (no jQuery) ?
So, given a DOM element, how can I check if it is visible or not? I tried:
window.getComputedStyle(my_element)['...
- 27.4k
606
votes
7
answers
200k
views
Why does jQuery or a DOM method such as getElementById not find the element?
What are the possible reasons for document.getElementById, $("#id") or any other DOM method / jQuery selector not finding the elements?
Example problems include:
jQuery silently failing to ...
- 807k
601
votes
16
answers
498k
views
jQuery find events handlers registered with an object
I need to find which event handlers are registered over an object.
For example:
$("#el").click(function() {...});
$("#el").mouseover(function() {...});
$("#el") has click and mouseover registered.
...
- 6,367
598
votes
8
answers
333k
views
What is the difference between properties and attributes in HTML?
After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), ...
- 6,554
542
votes
6
answers
255k
views
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
There are several questions on StackOverflow regarding offsetWidth / clientWidth / scrollWidth (and -Height, respectively), but none give comprehensive explanation of what those values are.
Also, ...
- 151k
520
votes
15
answers
711k
views
Violation Long running JavaScript task took xx ms
Recently, I got this kind of warning, and this is my first time getting it:
[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms
I'm ...
- 5,560
501
votes
11
answers
787k
views
Find an element in DOM based on an attribute value
Can you please tell me if there is any DOM API which search for an element with given attribute name and attribute value:
Something like:
doc.findElementByAttribute("myAttribute", "aValue");
- 109k
498
votes
18
answers
312k
views
Changing website favicon dynamically
I have a web application that's branded according to the user that's currently logged in. I'd like to change the favicon of the page to be the logo of the private label, but I'm unable to find any ...
- 33.5k
493
votes
13
answers
1.2m
views
How to append text to a div element?
I’m using AJAX to append data to a <div> element, where I fill the <div> from JavaScript. How can I append new data to the <div> without losing the previous data found in it?
- 64.3k
490
votes
36
answers
826k
views
How to pass arguments to addEventListener listener function?
The situation is somewhat like-
var someVar = some_other_function();
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
The problem is that the value of someVar is ...
- 5,081
488
votes
14
answers
425k
views
onKeyPress Vs. onKeyUp and onKeyDown
What is the difference between these three events? Upon googling I found that:
The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user ...
- 9,363
473
votes
14
answers
689k
views
What is the "hasClass" function with plain JavaScript?
How do you do jQuery’s hasClass with plain ol’ JavaScript? For example,
<body class="foo thatClass bar">
What’s the JavaScript way to ask if <body> has thatClass?
- 19.2k
460
votes
0
answers
262k
views
How can I check whether a variable is defined in JavaScript? [duplicate]
How to check whether a JavaScript variable defined in cross-browser way?
I ran into this problem when writing some JavaScript utilizing FireBug logging. I wrote some code like below:
function ...
- 75k
457
votes
8
answers
557k
views
Select all elements with a "data-xxx" attribute without using jQuery
Using only pure JavaScript, what is the most efficient way to select all DOM elements that have a certain data- attribute (let's say data-foo).
The elements may be different, for example:
<p data-...
- 8,818
451
votes
6
answers
59k
views
Do DOM tree elements with IDs become global properties?
Working on an idea for a simple HTMLElement wrapper I stumbled upon the following for Internet Explorer and Chrome:
For a given HTMLElement with an id in the DOM tree, it is possible to retrieve the &...
- 121k
444
votes
5
answers
209k
views
Difference between Node object and Element object?
I am totally confused between Node object and Element object.
document.getElementById() returns Element object while document.getElementsByClassName()
returns NodeList object (Collection of Elements ...
- 10.1k
440
votes
6
answers
131k
views
If a DOM Element is removed, are its listeners also removed from memory?
If a DOM Element is removed, are its listeners removed from memory too?
- 7,672
435
votes
12
answers
347k
views
What is the most efficient way to create HTML elements using jQuery?
Recently I've been doing a lot of modal window pop-ups and what not, for which I used jQuery. The method that I used to create the new elements on the page has overwhelmingly been along the lines of:
...
- 38.6k
419
votes
6
answers
172k
views
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,...
- 51.2k
415
votes
16
answers
782k
views
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 ...
- 4,365
413
votes
9
answers
387k
views
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 ...
- 4,480
411
votes
16
answers
255k
views
Invariant Violation: _registerComponent(...): Target container is not a DOM element
I get this error after a making trivial React example page:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
Here's my code:
/** @jsx React.DOM ...
- 267k
408
votes
12
answers
187k
views
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?
- 49.1k
406
votes
3
answers
143k
views
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?
- 13.4k