dom interview questions
Top dom frequently asked interview questions
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 are attached using:
- Prototype's
Event.observe;
- DOM's
addEventListener;
- As element attribute
element.onclick.
Source: (StackOverflow)
I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript.
Source: (StackOverflow)
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 element?
Both jQuery and raw JavaScript will work.
Source: (StackOverflow)
I would like to get all descendant text nodes of an element, as a jQuery collection. What is the best way to do that?
Source: (StackOverflow)
I am working on kinda 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" maxlength="512" id="searchTxt" class="searchField"/>
and this is my JavaScript:
<script type="text/javascript">
function searchURL(){
window.location = "http://www.myurl.com/search/" + (input text value);
}
</script>
How do I get the value from the text field into JavaScript?
Source: (StackOverflow)
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.
Is there a function to find out that, and possibly iterate over the event handlers?
If it is not possible on a jQuery object through proper methods, is it possible on a plain DOM object?
Source: (StackOverflow)
In jQuery, it is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle().
Using jQuery, how would you test if an element is visible or hidden?
Source: (StackOverflow)
How can I change a class of an HTML element in response to an onClick event using JavaScript?
Source: (StackOverflow)
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 = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);
I would like to know if there is a better way to do this using jQuery. I've been experimenting with:
var odv = $.create("div");
$.append(odv);
// And many more
But I'm not sure if this is any better.
Source: (StackOverflow)
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');
})
or in this case do they do the same thing?
And if I do have to switch to using prop(), all the old attr() calls will break if i switch to 1.6?
UPDATE
See this fiddle: http://jsfiddle.net/maniator/JpUF2/
The console logs the getAttribute as a string, and the attr as a string, but the prop as a CSSStyleDeclaration, Why? And how does that affect my coding in the future?
Source: (StackOverflow)
What's the easiest way to add an option to a dropdown using JavaScript?
Will this work?
$("#mySelect").append('<option value=1>My option</option>');
Source: (StackOverflow)
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 looking for this:
What I'm trying to do is make keys like the arrows and enter navigate through a table of input elements. Tab works now, but enter and arrows do not by default it seems. I've got the key handling part set up but now I need to figure out how to move the focus over in the event handling functions.
Source: (StackOverflow)
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:
$("<div></div>");
However, I'm getting the feeling that this isn't the best or the most efficient method of doing this. What is the best way to create elements in jQuery from a performance perspective?
This answer has the benchmarks to the suggestions below.
Source: (StackOverflow)
Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)?
(The question regards Firefox)
Source: (StackOverflow)
How do you test an element for existence without the use of the getElementById method? I have setup a live demo for reference. I will also print the code on here as well:
<!DOCTYPE html>
<html>
<head>
<script>
var getRandomID = function (size) {
var str = "",
i = 0,
chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
while (i < size) {
str += chars.substr(Math.floor(Math.random() * 62), 1);
i++;
}
return str;
},
isNull = function (element) {
var randomID = getRandomID(12),
savedID = (element.id)? element.id : null;
element.id = randomID;
var foundElm = document.getElementById(randomID);
element.removeAttribute('id');
if (savedID !== null) {
element.id = savedID;
}
return (foundElm) ? false : true;
};
window.onload = function () {
var image = document.getElementById("demo");
console.log('undefined', (typeof image === 'undefined') ? true : false); // false
console.log('null', (image === null) ? true : false); // false
console.log('find-by-id', isNull(image)); // false
image.parentNode.removeChild(image);
console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
console.log('null', (image === null) ? true : false); // false ~ should be true?
console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
};
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
Basically what the above code demonstrates is an element being stored into a variable and then removed from dom. Even though the element has been removed from the dom, the variable retains the element as it was when first declared. In other words, it is not a live reference to the element itself, but rather a replica. As a result, checking the variable's value (the element) for existence will provide an unexpected result.
The isNull function is my attempt to check for an elements existence from a variable, and it works, but I would like to know if there is an easier way to accomplish the same result.
Thanks very much in advance for any insight.
PS: I'm also interested in why JavaScript variables behave like this if anyone knows of some good articles related to the subject.
Source: (StackOverflow)