{"id":1168,"date":"2012-11-19T12:04:19","date_gmt":"2012-11-19T11:04:19","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=1168"},"modified":"2013-03-18T16:22:36","modified_gmt":"2013-03-18T15:22:36","slug":"javascript-apis-youve-never-heard-of-and-some-you-have","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2012\/11\/19\/javascript-apis-youve-never-heard-of-and-some-you-have\/","title":{"rendered":"JavaScript APIs you’ve never heard of (And some you have)"},"content":{"rendered":"

From this video<\/a> I’ve discovered several JS API I didn’t know. Let’s list them:<\/p>\n

1) Use children<\/code> instead of childNodes<\/code> to list the children nodes of a DOM element:<\/p>\n

\r\n<ul>\r\n  <li>Hello<\/li>\r\n  <li>world<\/li>\r\n  <li>!<\/li>\r\n<\/ul>\r\n<\/pre>\n
\r\n<script>\r\ndocument.getElementById('test').childNodes.length; \/\/ 7 -> because it also returns the text nodes\r\ndocument.getElementById('test').children.length; \/\/ 3\r\n<\/script>\r\n<\/pre>\n
Support<\/strong>: all browsers, but from IE6 to IE8 it will also return the comments nodes <!-- --><\/code><\/p>\n
2) Use nextElementSibling \/ previousElementSibling \/ firstElementChild \/ lastElementChild<\/code> instead of nextSibling \/ previousSibling \/ firstChild \/ lastChild<\/code>, because the second one will return the text nodes, but no the first one:<\/p>\n
\r\n<script>\r\ndocument.getElementById('test').firstChild; \/\/ #textNode\r\ndocument.getElementById('test').firstElementChild; \/\/ LI\r\n<\/script>\r\n<\/pre>\n
Support<\/strong>: IE9+, FF3.5+, Chrome.<\/p>\n
3) Use contains()<\/code> to indicates whether a node is a descendent of a given node:<\/p>\n
\r\n<body>\r\n<ul>\r\n  <li>\r\n  <li id=\"test\">\r\n  <li>\r\n<\/ul>\r\n<\/body>\r\n<\/pre>\n
\r\n<script>\r\ndocument.body.contains(document.getElementById('test')); \/\/ TRUE\r\n<\/script>\r\n<\/pre>\n
Support<\/strong>: all browsers.<\/p>\n
4) Insert an HTML element with insertAdjacentHTML<\/code> (see on MDN<\/a>):<\/p>\n
\r\n<div id=\"one\">one<\/div>\r\n<\/pre>\n
\r\n<script>\r\n\/\/ the first param of insertAdjacentHTML can be :\r\n\/\/ <!-- beforebegin --><div id=\"one\"><!-- afterbegin -->one<!--beforeend --><\/div><!-- afterend -->\r\ndocument.getElementById('one').insertAdjacentHTML('afterend', '
two<\/div>');\r\n\r\n\/\/ At this point, the new structure is:\r\n\/\/ 
one<\/div>
two<\/div>\r\n<\/script>\r\n<\/pre>\n
Support<\/strong>: all browsers.<\/p>\n
5) If you want to replace a node you can either use replaceChild<\/code> or outerHTML<\/code>. See outerHTML on MDN<\/a>.<\/p>\n
Support<\/strong>: all browsers.<\/p>\n
6) Input.setSelection()<\/code> 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<\/a>):<\/p>\n
\r\nvar textbox=document.getElementById('my-input');\r\ntextbox.setSelectionRange(textbox.value.length,textbox.value.length); \/\/ the caret will be at the end of the input text\r\n<\/pre>\n
Support<\/strong>: All browsers, except for IE (only from IE9).<\/p>\n
7) The document.activeElement<\/code> returns the currently focused element (see details on MDN<\/a>):<\/p>\n
\r\ndocument.getElementById('my-input').focus();\r\ndocument.activeElement; \/\/ #my-input\r\n<\/pre>\n
Support<\/strong>: all browsers.<\/p>\n
8) The new FormData<\/code> 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()<\/code> command (see more on MDN<\/a>):<\/p>\n
\r\nvar data=new FormData();\r\ndata.append(\"name\",\"Paul\");\r\ndata.append(\"age\",15);\r\nvar xhr = new XMLHttpRequest();\r\nxhr.open(\"post\", \"\/submit\", true);\r\nxhr.send(data);\r\n<\/pre>\n
Support<\/strong>: it’s quite well supported, except from IE from version 10 only<\/p>\n
Note: the video<\/a> gives more functions regarding the XMLHttpRequest Level 2<\/p>\n
9) Element.matchesSelector()<\/code> permits to test a CSS selector over an element. It’s prefixed so we’ll create a function:<\/p>\n
\r\n<div><span class=\"title\" id=\"test\">Hello world!<\/span><\/div>\r\n<\/pre>\n
\r\nif (!Element.prototype.matchesSelector) {\r\n  Element.prototype.matchesSelector = function(css) {\r\n    if (this.webkitMatchesSelector) return this.webkitMatchesSelector(css)\r\n    if (this.mozMatchesSelector) return this.mozMatchesSelector(css)\r\n    if (this.msMatchesSelector) return this.msMatchesSelector(css)\r\n    if (this.oMatchesSelector) return this.oMatchesSelector(css)\r\n  } \r\n}\r\n\r\nvar span=document.getElementById('test');\r\nspan.matchesSelector('#test'); \/\/ true\r\nspan.matchesSelector('.title'); \/\/ true\r\nspan.matchesSelector('div > span'); \/\/ true\r\n<\/pre>\n
Support<\/strong>: all browsers, except for IE starting from IE9.<\/p>\n
10) getBoundingClientRect<\/code> permits to know the size and the position of an element in the viewport:<\/p>\n
\r\nvar div=document.getElementById('test');\r\nvar rect=div.getBoundingClientRect();\r\n\/\/ in pixels, relative to the viewport\r\nrect.left;\r\nrect.top;\r\nrect.right; \/\/ relative to left\r\nrect.bottom; \/\/ relative to top\r\nrect.width;\r\nrect.height;\r\n<\/pre>\n
Support<\/strong>: all browsers, however with IE<8 there is a bug that adds 2 to the different positions.<\/p>\n
11) document.elementFromPoint(x,y)<\/code> returns the element that is in the (x,y) coordinates. For example, this is useful to know over which element the mouse is.<\/p>\n
Support<\/strong>: all browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33],"tags":[24,152,158],"class_list":["post-1168","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","tag-javascript","tag-niveau-intermediaire","tag-programmation"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":14,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1168\/revisions"}],"predecessor-version":[{"id":1201,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1168\/revisions\/1201"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}