From this video I’ve discovered several JS API I didn’t know. Let’s list them:
1) Use children instead of childNodes to list the children nodes of a DOM element:
<ul> <li>Hello</li> <li>world</li> <li>!</li> </ul>
<script>
document.getElementById('test').childNodes.length; // 7 -> because it also returns the text nodes
document.getElementById('test').children.length; // 3
</script>
Support: all browsers, but from IE6 to IE8 it will also return the comments nodes <!-- -->
2) Use nextElementSibling / previousElementSibling / firstElementChild / lastElementChild instead of nextSibling / previousSibling / firstChild / lastChild, because the second one will return the text nodes, but no the first one:
<script>
document.getElementById('test').firstChild; // #textNode
document.getElementById('test').firstElementChild; // LI
</script>
Support: IE9+, FF3.5+, Chrome.
3) Use contains() to indicates whether a node is a descendent of a given node:
<body> <ul> <li> <li id="test"> <li> </ul> </body>
<script>
document.body.contains(document.getElementById('test')); // TRUE
</script>
Support: all browsers.
4) Insert an HTML element with insertAdjacentHTML (see on MDN):
<div id="one">one</div>
<script>
// the first param of insertAdjacentHTML can be :
// <!-- beforebegin --><div id="one"><!-- afterbegin -->one<!--beforeend --></div><!-- afterend -->
document.getElementById('one').insertAdjacentHTML('afterend', 'two');
// At this point, the new structure is:
// onetwo
</script>
Support: all browsers.
5) If you want to replace a node you can either use replaceChild or outerHTML. See outerHTML on MDN.
Support: all browsers.
6) Input.setSelection() sets the start and end positions of the current text selection in an <input> element. That could be useful to put the caret in a particular place (see on MDN):
var textbox=document.getElementById('my-input');
textbox.setSelectionRange(textbox.value.length,textbox.value.length); // the caret will be at the end of the input text
Support: All browsers, except for IE (only from IE9).
7) The document.activeElement returns the currently focused element (see details on MDN):
document.getElementById('my-input').focus();
document.activeElement; // #my-input
Support: all browsers.
8) The new FormData is part of the XMLHttpRequest Level 2 and permits to easily construct a set of key/value pairs representing form fields and their values and then send them with the send() command (see more on MDN):
var data=new FormData();
data.append("name","Paul");
data.append("age",15);
var xhr = new XMLHttpRequest();
xhr.open("post", "/submit", true);
xhr.send(data);
Support: it’s quite well supported, except from IE from version 10 only
Note: the video gives more functions regarding the XMLHttpRequest Level 2
9) Element.matchesSelector() permits to test a CSS selector over an element. It’s prefixed so we’ll create a function:
<div><span class="title" id="test">Hello world!</span></div>
if (!Element.prototype.matchesSelector) {
Element.prototype.matchesSelector = function(css) {
if (this.webkitMatchesSelector) return this.webkitMatchesSelector(css)
if (this.mozMatchesSelector) return this.mozMatchesSelector(css)
if (this.msMatchesSelector) return this.msMatchesSelector(css)
if (this.oMatchesSelector) return this.oMatchesSelector(css)
}
}
var span=document.getElementById('test');
span.matchesSelector('#test'); // true
span.matchesSelector('.title'); // true
span.matchesSelector('div > span'); // true
Support: all browsers, except for IE starting from IE9.
10) getBoundingClientRect permits to know the size and the position of an element in the viewport:
var div=document.getElementById('test');
var rect=div.getBoundingClientRect();
// in pixels, relative to the viewport
rect.left;
rect.top;
rect.right; // relative to left
rect.bottom; // relative to top
rect.width;
rect.height;
Support: all browsers, however with IE<8 there is a bug that adds 2 to the different positions.
11) document.elementFromPoint(x,y) returns the element that is in the (x,y) coordinates. For example, this is useful to know over which element the mouse is.
Support: all browsers.