Getting an html element by id, class, tag, name, query
-
Get element by id:
document.getElementById("idname"); -
Get element by class:
document.getElementsByClassName("classname");
Check support in different browsers. To use getElementsByClassName in IE 6,7,8 you need to use the getElementsByClassName polyfill for IE:
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
}
if (d.evaluate) { // IE6, IE7
pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
elements = d.evaluate(pattern, d, null, 0, null);
while ((i = elements.iterateNext())) {
results.push(i);
}
} else {
elements = d.getElementsByTagName("*");
pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
for (i = 0; i < elements.length; i++) {
if ( pattern.test(elements[i].className) ) {
results.push(elements[i]);
}
}
}
return results;
}
}
-
Get element by tag:
document.getElementsByTagName("div"); -
Get element by name:
document.getElementsByName("name"); -
Get element by query (CSS selector):
document.querySelector("div#main>p"); // Returns <p></p> which is inside <div id="main">document.querySelector("div#main+p"); // Returns <p></p> which goes after <div id="main"> -
Get elements by query extracting multiple elements:
document.querySelectorAll("p.message"); // Returns all p which have class="message"
Accessing child and parent elements in js
document.body.firstChild // Returns the first child element
document.body.lastChild // Returns the last child element
document.body.parentNode // Access to the parent element (for body it's html)
document.body.nextSibling // Access to the next sibling element - head
document.head.previousSibling // Access to the previous sibling element - if there is a line break after html, it returns it, if not - it returns null
Correct access to elements (ignoring line breaks, comments, text not wrapped in html tags), but not supported by older versions of IE
document.body.firstElementChild // Returns the first child html element
document.body.lastElementChild // Returns the last child html element
document.body.parentElementNode // Returns the parent html element
document.body.nextElementSibling // Returns the next sibling html element
document.head.previousElementSibling // Returns the previous sibling html element
Accessing all page elements and getting the element type in javascript
document.body.childNodes // Returns all child nodes regardless of their type
document.body.children // Returns an array with all child html nodes
document.body.nodeType // Returns 1 - if the node is an html element, 3 - if the node is text or space or line break, 8 - comment node
Getting tag name and node name
.tagName // Used only for tags
.nodeName // Used for all elements
Getting and overwriting the content of tags on the page using js
div.innerHTML // Returns a string with all elements contained in the node (in this case in div)
div.innerHTML = "<p>Hello!</p>" // You can also overwrite them, which will change the page content
input.value = "blabla" // The same, but for an input form