Every node has a nodeType and nodeName property that is inherited from Node. For example Text nodes have a nodeType code of 3 and nodeName value of '#text'. As previously mentioned the numeric value 3 is a numeric code representing the type of underlying object the node represents (i.e. Node.TEXT_NODE === 3).
Below I detail the values returned for nodeType and nodeName for the node objects discussed in this book. It makes sense to simply memorize these numeric code's for the more common nodes given that we are only dealing with 5 numeric codes.
<a href="#">Hi</a>
<script>
//This is DOCUMENT_TYPE_NODE or nodeType 10 because Node.DOCUMENT_TYPE_NODE === 10
console.log(
document.doctype.nodeName, //logs 'html' also try document.doctype to get <!DOCTYPE html>
document.doctype.nodeType //logs 10 which maps to DOCUMENT_TYPE_NODE
);
//This is DOCUMENT_NODE or nodeType 9 because Node.DOCUMENT_NODE === 9
console.log(
document.nodeName, //logs '#document'
document.nodeType //logs 9 which maps to DOCUMENT_NODE
);
//This is DOCUMENT_FRAGMENT_NODE or nodeType 11 because Node.DOCUMENT_FRAGMENT_NODE === 11
console.log(
document.createDocumentFragment().nodeName, //logs '#document-fragment'
document.createDocumentFragment().nodeType //logs 11 which maps to DOCUMENT_FRAGMENT_NODE
);
//This is ELEMENT_NODE or nodeType 1 because Node. ELEMENT_NODE === 1
console.log(
document.querySelector('a').nodeName, //logs 'A'
document.querySelector('a').nodeType //logs 1 which maps to ELEMENT_NODE
);
//This is TEXT_NODE or nodeType 3 because Node.TEXT_NODE === 3
console.log(
document.querySelector('a').firstChild.nodeName, //logs '#text'
document.querySelector('a').firstChild.nodeType //logs 3 which maps to TEXT_NODE
);
</script>
If its not obvious the fastest way to determine if a node is of a certain type is too simply check its nodeTypeproperty. Below we check to see if the anchor element has a node number of 1. If it does than we can conclude that its an Element node because Node.ELEMENT_NODE === 1.
Determining the type of node that you might be scripting becomes very handy so that you might know which properties and methods are available to script the node.
The values returned by the nodeName property vary according to the node type.
Getting a nodes value
The nodeValue property returns null for most of the node types (except Text, and Comment). It's use is centered around extracting actual text strings from Text and Comment nodes. In the code below I demonstrate its use on all the nodes discussed in this book
<!DOCTYPE html>
<html lang="en">
<body>
<a href="#">Hi</a>
<script>
//logs null for DOCUMENT_TYPE_NODE, DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE, ELEMENT_NODE below
console.log(document.doctype.nodeValue);
console.log(document.nodeValue);
console.log(document.createDocumentFragment().nodeValue);
console.log(document.querySelector('a').nodeVale);
//logs string of text
console.log(document.querySelector('a').firstChild.nodeValue); //logs 'Hi'
</script>
</body>
</html>
Text or Comment node values can be set by providing new strings values for the nodeValue property(i.e. document.body.firstElementChild.nodeValue = 'hi').
Creating element and text nodes using JavaScript methods
When a browser parses an HTML document it constructs the nodes and tree based on the contents of the HTML file. The browser deals with the creation of nodes for the intial loading of the HTML document. However its possible to create your own nodes using JavaScript. The following two methods allow us to programatically create Element and Text nodes using JavaScript.
createElement()
createTextNode()
Other methods are avaliable but are not commonly used (e.g. createAttribute() and createComment()) . In the code below I show how simple it is to create element and text nodes.
<!DOCTYPE html>
<html lang="en">
<body>
<script>
var elementNode = document.createElement('div');
console.log(elementNode, elementNode.nodeType); //log <div> 1, and 1 indicates an element node
var textNode = document.createTextNode('Hi');
console.log(textNode, textNode.nodeType); //logs Text {} 3, and 3 indicates a text node
</script>
</body>
</html>
The createElement() method accepts one parameter which is a
string specifying the element to be created. The string is the same
string that is returned from the tagName property of an Element object.
The createAttribute() method is depricated and should not be used for creating
attribute nodes. Instead developers typically use getAttribute(), setAttribute(), and removeAttribute() methods.
Creating and adding element and text nodes to the DOM using JavaScript strings
The innerHTML, outerHTML, textContent and insertAdjacentHTML() properties and methods provide the functionality to create and add nodes to the DOM using JavaScript strings.
In the code below we are using the innerHTML, outerHTML, and textContent properties to create nodes from JavaScript strings that are then immediately added to the DOM.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="A"></div>
<span id="B"></span>
<div id="C"></div>
<div id="D"></div>
<div id="E"></div>
<script>
//create a strong element and text node and add it to the DOM
document.getElementById('A').innerHTML = '<strong>Hi</strong>';
//create a div element and text node to replace <span id="B"></div> (notice span#B is replaced)
document.getElementById('B').outerHTML = '<div id="B" class="new">Whats Shaking</div>'
//create a text node and update the div#C with the text node
document.getElementById('C').textContent = 'dude';
//NON standard extensions below i.e. innerText & outerText
//create a text node and update the div#D with the text node
document.getElementById('D').innerText = 'Keep it';
//create a text node and replace the div#E with the text node (notice div#E is gone)
document.getElementById('E').outerText = 'real!';
console.log(document.body.innerHTML);
/* logs
<div id="A"><strong>Hi</strong></div>
<div id="B" class="new">Whats Shaking</div>
<span id="C">dude</span>
<div id="D">Keep it</div>
real!
*/
</script>
</body>
</html>
The insertAdjacentHTML() method which only works on Element nodes is a good deal more precise than the previously mentioned methods. Using this method its possible to insert nodes before the beginning tag, after the beginning tag, before the end tag, and after the end tag. Below I construct a sentence using the insertAdjacentHTML() method.
The innerHTML property will convert html elements found in
the string to actual DOM nodes while the textContent can only be used to construct text nodes. If you
pass textContent a string containing html elements it will
simply spit it out as text.
document.write() can also be used to simultaneously create and add nodes to the DOM. However its typically not used anymore unless its usage is required to accomplish 3rd party scripting tasks. Basically the write() method will output the values passed to it into the page during page loading/parsing. You should be aware that using the write() method will stall/block the parsing of the html document being loaded.
innerHTML invokes a heavy & expensive HTML parser where as text node generation is trivial thus use the innerHTML & friends sparingly
The insertAdjacentHTML options "beforebegin" and "afterend" will only work if the node is in the DOM tree and has a parent
element.
Support for outerHTML was not available natively in Firefox until version 11. A
polyfill is avaliable.
textContent gets the content of all elements, including <script> and <style> elements, innerText does not
innerText is aware of style and will not return the text of hidden elements, whereas textContent will
Avaliable to all modern browser except Firefox is insertAdjacentElement() and insertAdjacentText()
Gettting a list/collection of all immediate child nodes
Using the childNodes property produces an array like list (i.e. NodeList) of the immediate child nodes. Below I select the <ul> element which I then use to create a list of all of the immediate child nodes contained inside of the <ul>.
<!DOCTYPE html>
<html lang="en">
<body>
<ul>
<li>Hi</li>
<li>there</li>
</ul>
<script>
var ulElementChildNodes = document.querySelector('ul').childNodes;
console.log(ulElementChildNodes); //logs an array like list of all nodes inside of the ul
/*Call forEach as if its a method of NodeLists so we can loop over the NodeList. Done because NodeLists are array like, but do not directly inherit from Array*/
Array.prototype.forEach.call(ulElementChildNodes,function(item){
console.log(item); //logs each item in the array
});
</script>
</body>
</html>
The NodeList returned by childNodes only contains immediate child nodes
Convert a NodeList or HTMLCollection to JavaScript Array
Node lists and html collections are array like but not a true JavaScript array which inherits array methods. In the code below we programtically confirm this using isArray().
<a href="#"></a>
<script>
console.log(Array.isArray(document.links)); //returns false, its an HTMLCollection not an Array
console.log(Array.isArray(document.querySelectorAll('a'))); //returns false, its an NodeList not an Array
console.log(Array.isArray(Array.prototype.slice.call(document.links))); //returns true
console.log(Array.isArray(Array.prototype.slice.call(document.querySelectorAll('a')))); //returns true
</script>
Traversing nodes in the DOM
<ul>
<!-- comment -->
<li id="A"></li>
<li id="B"></li>
<!-- comment -->
</ul>
<script>
//cache selection of the ul
var ul = document.querySelector('ul');
//What is the parentNode of the ul?
console.log(ul.parentNode.nodeName); //logs body
//What is the first child of the ul?
console.log(ul.firstChild.nodeName); //logs comment
//What is the last child of the ul?
console.log(ul.lastChild.nodeName); //logs text not comment, because there is a line break
//What is the nextSibling of the first li?
console.log(ul.querySelector('#A').nextSibling.nodeName); //logs text
//What is the previousSibling of the last li?
console.log(ul.querySelector('#B').previousSibling.nodeName); //logs text
//cache selection of the ul
var ul = document.querySelector('ul');
//What is the first child of the ul?
console.log(ul.firstElementChild.nodeName); //logs li
//What is the last child of the ul?
console.log(ul.lastElementChild.nodeName); //logs li
//What is the nextSibling of the first li?
console.log(ul.querySelector('#A').nextElementSibling.nodeName); //logs li
//What is the previousSibling of the last li?
console.log(ul.querySelector('#B').previousElementSibling.nodeName); //logs li
//What are the element only child nodes of the ul?
console.log(ul.children); //HTMLCollection, all child nodes including text nodes
</script>
Verify a node position in the DOM tree with contains() & compareDocumentPosition()
Its possible to know if a node is contained inside of another node by using the contains() Node method. In the code below I ask if <body> is contained inside of <html lang="en">.
// is <body> inside <html lang="en"> ?
var inside = document.querySelector('html').contains(document.querySelector('body'));
console.log(inside); //logs true
Getting a list/collection of element attributes and values
Getting, Setting, & Removing an element's attribute value
<a href='#' title="title" data-foo="dataFoo" style="margin:0;" class="yes" foo="boo" hidden="hidden">#link</a>
<script>
var atts = document.querySelector('a');
//remove attributes
atts.removeAttribute('href');
atts.removeAttribute('title');
atts.removeAttribute('style');
atts.removeAttribute('data-foo');
atts.removeAttribute('class');
atts.removeAttribute('foo'); //custom attribute
atts.removeAttribute('hidden'); //boolean attribute
//set (really re-set) attributes
atts.setAttribute('href','#');
atts.setAttribute('title','title');
atts.setAttribute('style','margin:0;');
atts.setAttribute('data-foo','dataFoo');
atts.setAttribute('class','yes');
atts.setAttribute('foo','boo');
atts.setAttribute('hidden','hidden'); //boolean attribute requires sending the attribute as the value too
//get attributes
console.log(atts.getAttribute('href'));
console.log(atts.getAttribute('title'));
console.log(atts.getAttribute('style'));
console.log(atts.getAttribute('data-foo'));
console.log(atts.getAttribute('class'));
console.log(atts.getAttribute('foo'));
console.log(atts.getAttribute('hidden'));
// Verifying an element has a specific attribute
var atts = document.querySelector('a');
console.log(
atts.hasAttribute('href'),
atts.hasAttribute('title'),
atts.hasAttribute('style'),
atts.hasAttribute('data-foo'),
atts.hasAttribute('class'),
atts.hasAttribute('goo') //Notice this is true regardless if a value is defined
)
var atts = document.querySelector('input');
console.log(atts.hasAttribute('checked')); //logs true (<input type="checkbox" checked></input>)
</script>
Getting a list of class attribute values
<div class="big brown bear"></div>
<script>
var elm = document.querySelector('div');
console.log(elm.classList); //big brown bear {0="big", 1="brown", 2="bear", length=3, ...}
console.log(elm.className); //logs 'big brown bear'
</script>
Given the classList is an array like collection it has a read only length property.
classList is read-only but can be modifyied using the add(), remove(), contains(), and toggle() methods
IE9 does not support classList
Adding & removing sub-values to a class attribute
Using the classList.add() and classList.remove() methods its extremely simple to edit the value of a class attribute
<div class="dog"></div>
Lt;script>
var elm = document.querySelector('div');
elm.classList.add('cat');
elm.classList.remove('dog');
console.log(elm.className); //'cat'
</script>
Toggling a class attribute value
Using the classList.toggle() method we can toggle a sub-value of the class attribute.
<div class="visible"></div>
<script>
var elm = document.querySelector('div');
elm.classList.toggle('visible');
elm.classList.toggle('grow');
console.log(elm.className); //'grow'
</script>
Determining if a class attribute value contains a specific value
Using the classList.contains() method its possible to determine (boolean) if a class attribute value contains a specific sub-value.
<div class="big brown bear"></div>
<script>
var elm = document.querySelector('div');
console.log(elm.classList.contains('brown')); //logs true
</script>
Getting & Setting data-* attributes
The dataset property of a element node provides an object containing all of the attributes of an element that starts with data-*. Because its a simply a JavaScript object we can manipulate dataset and have the element in the DOM reflect those changes
<div data-foo-foo="foo" data-bar-bar="bar"></div>
<script>
var elm = document.querySelector('div');
//get
console.log(elm.dataset.fooFoo); //logs 'foo'
console.log(elm.dataset.barBar); //logs 'bar'
//set
elm.dataset.gooGoo = 'goo';
console.log(elm.dataset); //logs DOMStringMap {fooFoo="foo", barBar="bar", gooGoo="goo"}
//what the element looks like in the DOM
console.log(elm); //logs <div data-foo-foo="foo" data-bar-bar="bar" data-goo-goo="goo">
</script>
dataset contains camel case versions of data attributes. Meaning data-foo-foo will be listed as the property fooFoo in the dataset DOMStringMap object. The- is replaced by camel casing.
Removing a data-* attribute from the DOM is as simple using the delete operator on a property of the datset (e.g. delete dataset.fooFoo)
dataset is not supported in IE9. A polyfill is avaliable. However, you can always just use getAttribute('data-foo'), removeAttribute('data-foo'), setAttribute('data-foo'), hasAttribute('data-foo').
Creating & Injecting Text Nodes
<div></div>
<script>
var elementNode = document.createElement('p');
var textNode = document.createTextNode('Hi');
elementNode.appendChild(textNode);
document.querySelector('div').appendChild(elementNode);
console.log(document.querySelector('div').innerHTML); //logs
Typically, immediate sibling Text nodes do not occur because DOM trees created by browsers intelligently combines text nodes, however two cases exist that make sibling text nodes possible. The first case is rather obvious. If a text node contains an Element node (e.g. <p>Hi, <strong>cody</strong> welcome!</p>) than the text will be split into the proper node groupings. Its best to look at a code example as this might sound more complicted than it really is. In the code below the contents of the <p> element is not a single Text node it is in fact 3 nodes, a Text node, Element node, and another Text node.
<p>Hi, <strong>cody</strong> welcome!</p>
<script>
var pElement = document.querySelector('p');
console.log(pElement.childNodes.length); //logs 3
console.log(pElement.firstChild.data); // is text node or 'Hi, '
console.log(pElement.firstChild.nextSibling); // is Element node or <strong>
console.log(pElement.lastChild.data); // is text node or ' welcome!'
</script>
The attributes array
The basic idea behind the attributes array is simple- it's an object containing the name/value pair of all of a given element's attributes. Let's first list the object's four primary properties.
Primary properties of the attributes array
Property Name
Description
nodeName
The name portion of an attribute
nodeValue
The value portion of an attribute
length
The total number of attributes inside
an element. In IE, the property combines BOTH user and
browser defined attributes.
specified
A boolean variable specifying whether
an attribute is user defined or not.
Below demonstrates invoking the attributes array and its properties:
var el=document.getElementById("myelement")
el.attributes[0].nodeName //returns the name of the first attribute of el
el.attributes[0].nodeValue //returns the value of the first attribute of el
el.attributes.length //returns the number of attributes inside "el"
If we assign something to elem.className, it replaces the whole strings of classes. Sometimes that’s what we need, but often we want to add/remove a single class.
There’s another property for that: elem.classList.
The elem.classList is a special object with methods to add/remove/toggle classes.
<body class="main page">
<script>
// add a class
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
Methods of classList:
elem.classList.add/remove("class") – adds/removes the class.
elem.classList.toggle("class") – if the class exists, then removes it, otherwise adds it.
elem.classList.contains("class") – returns true/false, checks for the given class.
classList is iterable, so we can list all classes like this:
<body class="main page">
<script>
for (let name of document.body.classList) {
alert(name); // main, and then page
}
</script>
</body>
Element style
The property elem.style is an object that corresponds to what’s written in the "style" attribute. Setting elem.style.width="100px" works as if we had in the attribute style="width:100px".
Sometimes we want to assign a style property, and later remove it.
For instance, to hide an element, we can set elem.style.display = "none".
Then later we may want to remove the style.display as if it were not set. Instead of delete elem.style.display we should assign an empty line to it: elem.style.display = "".
// if we run this code, the "blinks"
document.body.style.display = "none"; // hide
setTimeout(() => document.body.style.display = "", 1000); // back to normal
If we set display to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such display property at all.
Full rewrite with style.cssText
Normally, we use style.* to assign individual style properties. We can’t set the full style like div.style="color: red; width: 100px", because div.style is an object, and it’s read-only.
To set the full style as a string, there’s a special property style.cssText
<div id="div">Button</div>
<script> // we can set special style flags like "important" here
div.style.cssText=`color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
alert(div.style.cssText);
</script>
We rarely use it, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But still can be done for new elements when we know we won’t delete something important.
The same can be accomplished by setting an attribute: div.setAttribute('style', 'color: red...').
<body>
<script>
// doesn't work!
document.body.style.margin = 20;
alert(document.body.style.margin); // '' (empty string, the assignment is ignored)
// now add the CSS unit (px) - and it works
document.body.style.margin = '20px';
alert(document.body.style.margin); // 20px
alert(document.body.style.marginTop); // 20px
alert(document.body.style.marginLeft); // 20px
</script>
</body>
For instance, we want to know the size, margins, the color of an element. How to do it?
The style property operates only on the value of the "style" attribute, without any CSS cascade.
So we can’t read anything that comes from CSS classes using elem.style.
For instance, here style doesn’t see the margin:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
The red text
<script>
alert(document.body.style.color); // empty
alert(document.body.style.marginTop); // empty
</script>
</body>
…But what if we need, say, to increase the margin by 20px? We want the current value for the start.
There’s another method for that: getComputedStyle.
The syntax is:
getComputedStyle(element[, pseudo])
element
Element to read the value for.
pseudo
A pseudo-element if required, for instance ::before. An empty string or no argument means the element itself.
The result is an object with style properties, like elem.style, but now with respect to all CSS classes.
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Get all of a DOM element's css properties from Javascript
<button id="target">
Click me to see my css properties
</button>
<pre id="dump"></pre>
<script>
function dumpComputedStyles(elem) {
const cs = window.getComputedStyle(elem, null);
const output = Array.from(cs).sort().map(style => `${style}: ${cs.getPropertyValue(style)}`);
document.getElementById("dump").innerText = output.join("\n");
}
const button = document.getElementById("target");
button.addEventListener("click", ev => {
dumpComputedStyles(ev.target);
});
</script>
we can use offsetParent to get the nearest CSS-positioned ancestor.
offsetLeft/Top
offsetLeft/offsetTop provide x/y coordinates relative to it’s upper-left corner.
CSS-positioned (position is absolute, relative, fixed or sticky),
or <td>, <th>, <table>,
or <body>.
<main style="position: relative" id="main">
<article>
<div id="example" style="position: absolute; left: 180px; top: 180px">...</div>
</article>
</main>
<script>
alert(example.offsetParent.id); // main
alert(example.offsetLeft); // 180 (note: a number, not a string "180px")
alert(example.offsetTop); // 180
</script>
offsetWidth:
The offsetWidth property returns the viewable width of an element in pixels, including padding, border and scrollbar, but not the margin.
The reason why the "viewable" word is specified, is because if the element's content is wider than the actual width of the element, this property will only return the width that is visible
The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.
The reason why the "viewable" word is specified, is because if the element's content is taller than the actual height of the element, this property will only return the height that is visible.
The clientTop property returns the width of the top border of an element, in pixels.
The clientLeft property returns the width of the left border of an element, in pixels.
This property does not include the element's top/left padding or top/left margin.
let top = element.clientTop;
let left = element.clientLeft;
<style>
#myDIV {
height: 250px;width: 400px;padding: 10px;margin: 15px;
border-top: 15px solid black;
border-left: 10px solid red;
}
</style>
<div id="myDIV"> </div>
<script>
let elmnt = document.getElementById("myDIV");
let client_top = "Border top width: " + elmnt.clientTop + "px";
let client_left = "Border left width: " + elmnt.clientLeft + "px";
alert(client_top); // Border top width: 15px
alert(client_left); // Border left width: 10px
</script>
the two locations (offsetTop and client area top) is the element's border. This is because the offsetTop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes padding.)
If the computed "border-top-width" is zero, then clientTop is also zero.
clientWidth/Height
These properties provide the size of the area inside the element borders.
They include the content width together with paddings, but without the scrollbar:
On the picture above let’s first consider clientHeight: it’s easier to evaluate. There’s no horizontal scrollbar, so it’s exactly the sum of what’s inside the borders: CSS-height 200px plus top and bottom paddings (2 * 20px) total 240px.
Now clientWidth – here the content width is not 300px, but 284px, because 16px are occupied by the scrollbar. So the sum is 284px plus left and right paddings, total 324px.
If there are no paddings, then clientWidth/Height is exactly the content area, inside the borders and the scrollbar (if any).
<style>
#myDIV { height: 250px;width: 400px;padding: 10px;margin: 15px;border:10px; }
</style>
<div id="myDIV"> </div>
<script>
let elmnt = document.getElementById("myDIV");
let client_width = "Width including padding: " + elmnt.clientWidth + "px";
let client_height = "Height including padding: " + elmnt.clientHeight + "px";
alert(client_width);// Width including padding: 420px
alert(client_height); // Height including padding: 270px
</script>
scrollWidth/Height
Properties clientWidth/clientHeight only account for the visible part of the element.
Properties scrollWidth/scrollHeight also include the scrolled out (hidden) parts:
<style>
#myDIV {margin-top: 10px;height: 250px;width: 250px;overflow: auto;}
#content { height: 600px;width: 800px;padding: 10px;}
</style>
<div id="myDIV">
<div id="content">Some content..</div>
</div>
<script>
var elmnt = document.getElementById("content");
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
alert(x); // 820
alert(y); // 620
</script>
scrollLeft/Top:
PropertiesscrollLeft/scrollTop are the width/height of the hidden, scrolled out part of the element.
On the picture below we can see scrollHeight and scrollTop for a block with a vertical scroll.
In other words,scrollTop is “how much is scrolled up”.
Properties clientWidth/clientHeight of document.documentElement is exactly what we want here:
alert( window.innerWidth ); // full window width
alert( document.documentElement.clientWidth ); // window width minus the scrollbar
A cross-browser solution (using clientWidth and clientHeight for IE8 and earlier):
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
alert(w);
alert(h);
outerHeight Returns the height of the browser window, including toolbars/scrollbars
outerWidth Returns the width of the browser window, including toolbars/scrollbars
var w = window.outerWidth;
var h = window.outerHeight;
Width/height of the document
Theoretically, as the root document element is documentElement.clientWidth/Height, and it encloses all the content, we could measure its full size as documentElement.scrollWidth/scrollHeight.
These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there’s no scroll, then documentElement.scrollHeight may be even less than documentElement.clientHeight! For regular elements that’s a nonsense.
To have a reliable full window size, we should take the maximum of these properties:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
alert('Full document height, with scrolled out part: ' + scrollHeight);
Get the current scroll
The pageXOffset and pageYOffset properties returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally and vertically.
The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties.
These properties are read-only.
alert('Current scroll from the top: ' + window.pageYOffset);
alert('Current scroll from the left: ' + window.pageXOffset);
A cross-browser solution (using scrollLeft and scrollTop for IE8 and earlier):
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
alert(window.pageXOffset + window.pageYOffset);
} else { // IE9 and earlier
alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
}
Create a sticky navigation bar:
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Use this property to check that the document hasn't already been scrolled when using relative scroll functions such as:
scrollBy()-
The Window.scrollBy() method scrolls the document in the window by the given amount.
scrollByLines() - The Window.scrollByLines() method scrolls the document by the specified number of lines.
scrollByPages()- The Window.scrollByPages() method scrolls the current document by the specified number of pages.
Scrolling: scrollTo, scrollBy, scrollIntoView
To scroll the page from JavaScript, its DOM must be fully built.
For instance, if we try to scroll the page from the script in <head>, it won’t work.
Regular elements can be scrolled by changing scrollTop/scrollLeft.
We can do the same for the page:
For all browsers except Chrome/Safari/Opera: modify document.documentElement.scrollTop/Left.
In Chrome/Safari/Opera: use document.body.scrollTop/Left instead.
It should work, but smells like cross-browser incompatibilities. Not good. Fortunately, there’s a simpler, more universal solution: special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY).
The method scrollBy(x,y) scrolls the page relative to its current position. For instance, scrollBy(0,10)scrolls the page 10px down.
The button below demonstrates this:
The method scrollTo(pageX,pageY) scrolls the page relative to the document top-left corner. It’s like setting scrollLeft/scrollTop.
To scroll to the very beginning, we can use scrollTo(0,0).
The call to elem.scrollIntoView(top) scrolls the page to make elem visible. It has one argument:
if top=true (that’s the default), then the page will be scrolled to make elem appear on the top of the window. The upper edge of the element is aligned with the window top.
if top=false, then the page scrolls to make elem appear at the bottom. The bottom edge of the element is aligned with the window bottom.
The button below scrolls the page to make itself show at the window top:
And this button scrolls the page to show it at the bottom:
Forbid the scrolling
Sometimes we need to make the document “unscrollable”. For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
To make the document unscrollable, its enough to set document.body.style.overflow = "hidden". The page will freeze on its current scroll.
Try it:
The first button freezes the scroll, the second one resumes it.
We can use the same technique to “freeze” the scroll for other elements, not just for document.body.
The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content “jumps” to fill it.
That looks a bit odd, but can be worked around if we compare clientWidth before and after the freeze, and if it increased (the scrollbar disappeared) then add padding to document.body in place of the scrollbar, to keep the content width same.
If you want to get the number of pixels by which the contents of an element are scrolled to the left, use the scrollLeft property of the element.
If you want to scroll the contents of the document, use the scrollTo or scrollBy method.
If you want to scroll the contents of an element, use the scrollLeft and scrollTop properties.
If you want to scroll an element into the visible area, use the scrollIntoView method.
window coordinates (clientX,clientY) and document coordinates (pageX,pageY).
When the page is not scrolled, then window coordinate and document coordinates are actually the same. Their zero points match too
And if we scroll it, then (clientX,clientY) change, because they are relative to the window, but (pageX,pageY) remain the same.
pageY = clientY + height of the scrolled-out vertical part of the document.
pageX = clientX + width of the scrolled-out horizontal part of the document.
HTML DOM getBoundingClientRect() Method
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
This method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
var domRect = element.getBoundingClientRect();
Note: The amount of scrolling that has been done of the viewport area is taken into account when computing the bounding rectangle. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.
<script>
function myFunction() {
var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
x = rect.left;
y = rect.top;
w = rect.width;
h = rect.height;
alert ("Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h);
}
</script>
<div style="height:200px; width:300px; overflow:auto;">
<div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
Return the top-left corner of this element relative to the top left corner of the viewport with the button below.<br>
Also try to use the scrollbars to test the method for different positions.
</div>
<div style="width:1000px; height:1000px;"></div>
</div>
<br>
<button onclick="myFunction()">Get top-left corner + witdth and height of the element with red border</button>
