Give your form an id only, and your input a name only: <form id=”myform”> <input type=”text” name=”foo”> Then the most standards-compliant and least problematic way to access your input element is via: document.getElementById(“myform”).elements[“foo”] using .elements[“foo”] instead of just .foo is preferable because the latter might return a property of the form named “foo” rather than … Read more
Differences between textContent/innerText/innerHTML on MDN. And a Stackoverflow answer about innerText/nodeValue. Summary innerHTML parses content as HTML, so it takes longer. nodeValue uses straight text, does not parse HTML, and is faster. textContent uses straight text, does not parse HTML, and is faster. innerText Takes styles into consideration. It won’t get hidden text for instance. … Read more
You can pass a * to getElementsByTagName() so that it will return all elements in a page: var all = document.getElementsByTagName(“*”); for (var i=0, max=all.length; i < max; i++) { // Do something with the element here } Note that you could use querySelectorAll(), if it’s available (IE9+, CSS in IE8), to just find elements … Read more
Here is a complete test case that simulates the click event, calls all handlers attached (however they have been attached), maintains the “target” attribute (“srcElement” in IE), bubbles like a normal event would, and emulates IE’s recursion-prevention. Tested in FF 2, Chrome 2.0, Opera 9.10 and of course IE (6): <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML … Read more
To get the window object for a frame you can use the window.frames array: var iframewindow= frames[‘iframe_name’]; This requires that you give the <iframe> an old-school name attribute instead-of-or-as-well-as the id. Alternatively if you know the order of iframes on the page you can index them numerically: var iframewindow= frames[0]; It’s generally more flexible to … Read more
Here’s the function we use in pure.js: function outerHTML(node){ return node.outerHTML || new XMLSerializer().serializeToString(node); } To use it the DOM way: outerHTML(document.getElementById(‘theNode’)); And it works cross browsers EDIT: WARNING! There is a trouble with XMLSerializer, it generates an XML(XHTML) string. Which means you can end up with a tags like <div class=”team” /> instead of<div … Read more
Try options function myNewFunction(sel) { alert(sel.options[sel.selectedIndex].text); } <select id=”box1″ onChange=”myNewFunction(this);”> <option value=”98″>dog</option> <option value=”7122″>cat</option> <option value=”142″>bird</option> </select>
For the point 2. I see that no one has suggested to use document.elementFromPoint(x,y), to me it is the fastest way to test if an element is nested or hidden by another. You can pass the offsets of the targetted element to the function. Here’s PPK test page on elementFromPoint. From MDN’s documentation: The elementFromPoint() … Read more
$(…)[index] // gives you the DOM element at index $(…).get(index) // gives you the DOM element at index $(…).eq(index) // gives you the jQuery object of element at index DOM objects don’t have css function, use the last… $(‘ul li’).eq(index).css({‘background-color’:’#343434′}); docs: .get(index) Returns: Element Description: Retrieve the DOM elements matched by the jQuery object. See: … Read more
The CSS box model is rather complicated, particularly when it comes to scrolling content. While the browser uses the values from your CSS to draw boxes, determining all the dimensions using JS is not straight-forward if you only have the CSS. That’s why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, … Read more