Overview of objects built into the environment (Browser & node)

Overview of objects built into the environment (Browser & node)

 |  JavaScript

Introduction

js this

JavaScript is a scripting language “placed” in a container that allows it to work (read more about JS environment in the article JS environment). That container (browser or node.js) contains objects that enable JavaScript to communicate with the outside world. These objects are known as “external API” or “Web API”. You can see a list of all Web APIs at https://developer.mozilla.org/en-US/docs/Web/API. In the following part, I tried to gather in one place the most frequently used objects and their methods and properties.

“window” object

Window object is the highest ranked object (it contains other objects: “document”, “history”…) and represents the browser window.

Window object properties

Object Property Description closed Returns a Boolean value indicating whether a window has been closed or not defaultStatus Sets or returns the default text in the status bar of a window document Returns the Document object for the window (See Document object) frameElement Returns the <iframe> element in which the current window is inserted frames Returns all <iframe> elements in the current window history Returns the History object for the window (See History object) innerHeight Returns the inner height of a window’s content area innerWidth Returns the inner width of a window’s content area length Returns the number of <iframe> elements in the current window location Returns the Location object for the window (See Location object) name Sets or returns the name of a window navigator Returns the Navigator object for the window (See Navigator object) opener Returns a reference to the window that created the window outerHeight Returns the outer height of a window, including toolbars/scrollbars outerWidth Returns the outer width of a window, including toolbars/scrollbars pageXOffset Returns the pixels the current document has been scrolled (horizontally) from the upper left
corner of the window pageYOffset Returns the pixels the current document has been scrolled (vertically) from the upper left corner
of the window parent Returns the parent window of the current window screen Returns the Screen object for the window (See
Screen object) screenLeft Returns the horizontal coordinate of the window relative to the screen screenTop Returns the vertical coordinate of the window relative to the screen screenX Returns the horizontal coordinate of the window relative to the screen screenY Returns the vertical coordinate of the window relative to the screen scrollX An alias of pageXOffset scrollY An alias of pageYOffset self Returns the current window status Sets or returns the text in the status bar of a window top Returns the topmost browser window

Methods of the Window object

Object method Description alert() Displays an alert box with a message and an OK button atob() Decodes a base-64encoded string blur() Removes focus from the current window btoa() Encodes a string in base-64 clearInterval() Clears a timer set with setInterval() clearTimeout() Clears a timer set with setTimeout() close() Closes the current window confirm() Displays a dialog box with a message and an OK and a Cancel button createPopup() Creates a pop-up window focus() Sets focus to the current window moveBy() Moves a window relative to its current position moveTo() Moves a window to the specified position open() Opens a new browser window print() Prints the content of the current window prompt() Displays a dialog box that prompts the visitor for input resizeBy() Resizes the window by the specified pixels resizeTo() Resizes the window to the specified width and height scrollBy() Scrolls the document by the specified number of pixels scrollTo() Scrolls the document to the specified coordinates setInterval() Calls a function or evaluates an expression at specified intervals (in milliseconds) setTimeout() Calls a function or evaluates an expression after a specified number of milliseconds stop() Stops the window from loading

“document” object

Document object is the container for HTML, it is the root of all other nodesHTML documents. When an empty window is opened in the browser, a window object is created, and after loading HTML into the window, a document object is created (which is otherwise a property of the Window object).

Document object properties

Property / Method Description document.anchors Returns a collection of all <a> elements in the document that have a name attribute document.applets Returns a collection of all <applet> elements in the document document.baseURI Returns the absolute base URI of a document document.body Sets or returns the document’s body (the <body> element) document.cookie Returns all name/value pairs of cookies in the document document.doctype Returns the Document Type Declaration associated with the document document.documentElement Returns the Document Element of the document (the <html> element) document.documentMode Returns the mode used by the browser to render the document document.documentURI Sets or returns the location of the document document.domain Returns the domain name of the server that loaded the document document.domConfig Obsolete. Returns the DOM configuration of the document document.embeds Returns a collection of all <embed> elements the document document.forms Returns a collection of all <form> elements in the document document.head Returns the <head> element of the document document.images Returns a collection of all <img> elements in the document document.implementation Returns the DOMImplementation object that handles this document document.inputEncoding Returns the encoding, character set, used for the document document.lastModified Returns the date and time the document was last modified document.links Returns a collection of all <a> and <area> elements in the document that have a href
attribute document.readyState Returns the (loading) status of the document document.referrer Returns the URL of the document that loaded the current document document.scripts Returns a collection of <script> elements in the document document.strictErrorChecking Sets or returns whether error-checking is enforced or not document.title Sets or returns the title of the document document.URL Returns the full URL of the HTML document

Methods of the document object

Property / Method Description document.addEventListener() Attaches an event handler to the document document.adoptNode() Adopts a node from another document document.close() Closes the output stream previously opened with document.open() document.createAttribute() Creates an attribute node document.createComment() Creates a Comment node with the specified text document.createDocumentFragment() Creates an empty DocumentFragment node document.createElement() Creates an Element node document.createTextNode() Creates a Text node document.getElementById() Returns the element that has the ID attribute with the specified value document.getElementsByClassName() Returns a NodeList containing all elements with the specified class name document.getElementsByName() Returns a NodeList containing all elements with a specified name document.getElementsByTagName() Returns a NodeList containing all elements with the specified tag name document.importNode() Imports a node from another document document.normalize() Removes empty Text nodes, and joins adjacent nodes document.normalizeDocument() Removes empty Text nodes, and joins adjacent nodes document.open() Opens an HTML output stream to collect output from document.write() document.querySelector() Returns the first element that matches a specified CSS selector(s) in the document document.querySelectorAll() Returns a static NodeList containing all elements that match a specified CSS selector(s) in the
document document.removeEventListener() Removes an event handler from the document (that has been attached with the addEventListener()
method) document.renameNode() Renames the specified node document.write() Writes HTML expressions or JavaScript code to a document document.writeln() Same as write(), but adds a newline character after each statement

“element” object

Each targeted HTML element is also an object that has its own properties and methods

Properties of the object element

Properties HTML element object Description element.accessKey Sets or returns the accesskey attribute of an element element.attributes Returns a NamedNodeMap of an element’s attributes element.childElementCount Returns the number of child elements an element has element.childNodes Returns a collection of an element’s child nodes (including text and comment nodes) element.children Returns a collection of an element’s child element (excluding text and comment nodes) element.classList Returns the class name(s) of an element element.className Sets or returns the value of the class attribute of an element element.clientHeight Returns the height of an element, including padding element.clientLeft Returns the width of the left border of an element element.clientTop Returns the width of the top border of an element element.clientWidth Returns the width of an element, including padding element.cloneNode() Clones an element element.compareDocumentPosition() Compares the document position of two elements element.contains() Returns true if a node is a descendant of a node, otherwise false element.contentEditable Sets or returns whether the content of an element is editable or not element.dir Sets or returns the value of the dir attribute of an element element.firstChild Returns the first child node of an element element.firstElementChild Returns the first child element of an element element.id Sets or returns the value of the id attribute of an element element.innerHTML Sets or returns the content of an element element.isContentEditable Returns true if the content of an element is editable, otherwise false element.lang Sets or returns the value of the lang attribute of an element element.lastChild Returns the last child node of an element element.lastElementChild Returns the last child element of an element element.namespaceURI Returns the namespace URI of an element element.nextSibling Returns the next node at the same node tree level element.nextElementSibling Returns the next element at the same node tree level element.nodeName Returns the name of a node element.nodeType Returns the node type of a node element.nodeValue Sets or returns the value of a node element.offsetHeight Returns the height of an element, including padding, border and scrollbar element.offsetWidth Returns the width of an element, including padding, border and scrollbar element.offsetLeft Returns the horizontal offset position of an element element.offsetParent Returns the offset container of an element element.offsetTop Returns the vertical offset position of an element element.ownerDocument Returns the root element (document object) for an element element.parentNode Returns the parent node of an element element.parentElement Returns the parent element node of an element element.previousSibling Returns the previous node at the same node tree level element.previousElementSibling Returns the previous element at the same node tree level element.scrollHeight Returns the entire height of an element, including padding element.scrollLeft Sets or returns the number of pixels an element’s content is scrolled horizontally element.scrollTop Sets or returns the number of pixels an element’s content is scrolled vertically element.scrollWidth Returns the entire width of an element, including padding element.style Sets or returns the value of the style attribute of an element element.tabIndex Sets or returns the value of the tabindex attribute of an element element.tagName Returns the tag name of an element element.textContent Sets or returns the textual content of a node and its descendants element.title Sets or returns the value of the title attribute of an element element.toString() Converts an element to a string nodelist.length Returns the number of nodes in a NodeList

Methods of the element object

Method Description element.addEventListener() Attaches an event handler to the specified element element.appendChild() Adds a new child node, to an element, as the last child node element.cloneNode() Clones an element element.compareDocumentPosition() Compares the document position of two elements element.contains() Returns true if a node is a descendant of a node, otherwise false element.getAttribute() Returns the specified attribute value of an element node element.getAttributeNode() Returns the specified attribute node element.getElementsByClassName() Returns a collection of all child elements with the specified class name element.getElementsByTagName() Returns a collection of all child elements with the specified tag name element.getFeature() Returns an object which implements the APIs of a specified feature element.hasAttribute() Returns true if an element has the specified attribute, otherwise false element.hasAttributes() Returns true if an element has any attributes, otherwise false element.hasChildNodes() Returns true if an element has any child nodes, otherwise false element.insertBefore() Inserts a new child node before a specified, existing, child node element.isDefaultNamespace() Returns true if a specified namespaceURI is the default, otherwise false element.isEqualNode() Checks if two elements are equal element.isSameNode() Checks if two elements are the same node element.isSupported() Returns true if a specified feature is supported on the element element.querySelector() Returns the first child element that matches a specified CSS selector(s) of an element element.querySelectorAll() Returns all child elements that match a specified CSS selector(s) of an element element.removeAttribute() Removes a specified attribute from an element element.removeAttributeNode() Removes a specified attribute node, and returns the removed node element.removeChild() Removes a child node from an element element.replaceChild() Replaces a child node in an element element.removeEventListener() Removes an event handler that has been attached with the addEventListener() method element.setAttribute() Sets or changes the specified attribute, to the specified value element.setAttributeNode() Sets or changes the specified attribute node nodelist.item() Returns the node at the specified index in a NodeList

“style” object

It can be noted that the style object property names are derived from CSS property names. The camelCale rule is applied to the names, so the CSS property “background-color” changes to the style property of the “backgroundColor” object.

Properties of the “style” object

Property Description CSS alignContent Sets or returns the alignment between the lines inside a flexible
container when the items do not use all available space 3 alignItems Sets or returns the alignment for items inside a flexible container 3 alignSelf Sets or returns the alignment for selected items inside a flexible
container 3 animation A shorthand property for all the animation properties below, except the animationPlayState property 3 animationDelay Sets or returns when the animation will start 3 animationDirection Sets or returns whether or not the animation should play in reverse on alternate cycles 3 animationDuration Sets or returns how many seconds or milliseconds an animation takes to complete one cycle 3 animationFillMode Sets or returns what values are applied by the animation outside the time it
is executing 3 animationIterationCount Sets or returns the number of times an animation should be played 3 animationName Sets or returns a name for the @keyframes animation 3 animationTimingFunction Sets or returns the speed curve of the animation 3 animationPlayState Sets or returns whether the animation is running or paused 3 background Sets or returns all the background properties in one declaration 1 backgroundAttachment Sets or returns whether a background-image is fixed or scrolls with the page 1 backgroundColor Sets or returns the background-color of an element 1 backgroundImage Sets or returns the background-image for an element 1 backgroundPosition Sets or returns the starting position of a background-image 1 backgroundRepeat Sets or returns how to repeat (tile) a background-image 1 backgroundClip Sets or returns the painting area of the background 3 backgroundOrigin Sets or returns the positioning area of the background images 3 backgroundSize Sets or returns the size of the background image 3 backfaceVisibility Sets or returns whether or not an element should be visible when not facing the screen 3 border Sets or returns borderWidth, borderStyle, and borderColor in one declaration 1 borderBottom Sets or returns all the borderBottom* properties in one declaration 1 borderBottomColor Sets or returns the color of the bottom border 1  borderBottomLeftRadius Sets or returns the shape of the border of the bottom-left corner 3 borderBottomRightRadius Sets or returns the shape of the border of the bottom-right corner 3 borderBottomStyle Sets or returns the style of the bottom border 1 borderBottomWidth Sets or returns the width of the bottom border 1 borderCollapse Sets or returns whether the table border should be collapsed into a single border, or not 2 borderColor Sets or returns the color of an element’s border (can have up to four
values) 1 borderImage A shorthand property for setting or returning all the borderImage* properties 3 borderImageOutset Sets or returns the amount by which the border image area extends beyond the border box 3 borderImageRepeat Sets or returns whether the image-border should be repeated, rounded or stretched 3 borderImageSlice Sets or returns the inward offsets of the image-border 3 borderImageSource Sets or returns the image to be used as a border 3 borderImageWidth Sets or returns the widths of the image-border 3 borderLeft Sets or returns all the borderLeft* properties in one declaration 1 borderLeftColor Sets or returns the color of the left border 1 borderLeftStyle Sets or returns the style of the left border 1 borderLeftWidth Sets or returns the width of the left border 1 borderRadius A shorthand propertyfor setting or returning all the four border*Radius properties 3 borderRight Sets or returns all the borderRight* properties in one declaration 1 borderRightColor Sets or returns the color of the right border 1 borderRightStyle Sets or returns the style of the right border 1 borderRightWidth Sets or returns the width of the right border 1 borderSpacing Sets or returns the space between cells in a table 2 borderStyle Sets or returns the style of an element’s border (can have up to four
values) 1 borderTop Sets or returns all the borderTop* properties in one declaration 1 borderTopColor Sets or returns the color of the top border 1 borderTopLeftRadius Sets or returns the shape of the border of the top-left corner 3 borderTopRightRadius Sets or returns the shape of the border of the top-right corner 3 borderTopStyle Sets or returns the style of the top border 1 borderTopWidth Sets or returns the width of the top border 1 borderWidth Sets or returns the width of an element’s border (can have up to four
values) 1 bottom Sets or returns the bottom position of a positioned element 2 boxDecorationBreak Sets or returns the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. 3 boxShadow Attaches one or more drop-shadows to the box 3 boxSizing Allows you to define certain elements to fit an area in a certain way 3 captionSide Sets or returns the position of the table caption 2 clear Sets or returns the position of the element relative to floating objects 1 clip Sets or returns which part of a positioned element is visible 2 color Sets or returns the color of the text 1 columnCount Sets or returns the number of columns an element should be divided into 3 columnFill Sets or returns how to fill columns 3 columnGap Sets or returns the gap between the columns 3 columnRule A shorthand property for setting or returning all the columnRule* properties 3 columnRuleColor Sets or returns the color of the rule between columns 3 columnRuleStyle Sets or returns the style of the rule between columns 3 columnRuleWidth Sets or returns the width of the rule between columns 3 columns A shorthand property for setting or returning columnWidth and columnCount 3 columnSpan Sets or returns how many columns an element should span across 3 columnWidth Sets or returns the width of the columns 3 content Used with the :before and :after pseudo-elements, to insert generated content 2 counterIncrement Increments one or more counters 2 counterReset Creates or resets one or more counters 2 cursor Sets or returns the type of cursor to display for the mouse pointer 2 direction Sets or returns the text direction 2 display Sets or returns an element’s display type 1 emptyCells Sets or returns whether to show the border and background of empty cells, or not 2 filter Sets or returns image filters (visual effects, like blur and saturation) 3 flex Sets or returns the length of the item, relative to the rest 3 flexBasis Sets or returns the initial length of a flexible item 3 flexDirection Sets or returns the direction of the flexible items 3 flexFlow A shorthand property for the flexDirection and the flexWrap properties 3 flexGrow Sets or returns how much the item will grow relative to the rest 3 flexShrink Sets or returns how the item will shrink relative to the rest 3 flexWrap Sets or returns whether the flexible items should wrap or not 3 cssFloat Sets or returns the horizontal alignment of an element 1 font Sets or returns fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration 1 fontFamily Sets or returns the font family for text 1 fontSize Sets or returns the font size of the text 1 fontStyle Sets or returns whether the style of the font is normal, italic or
oblique 1 fontVariant Sets or returns whether the font should be displayed in small capital
letters 1 fontWeight Sets or returns the boldness of the font 1 fontSizeAdjust Preserves the readability of text when font fallback occurs 3 fontStretch Selects a normal, condensed, or expanded face from a font family 3 hangingPunctuation Specifies whether a punctuation character may be placed outside the line box 3 height Sets or returns the height of an element 1 hyphens Sets how to split words to improve the layout of paragraphs 3 icon Provides the author the ability to style an element with an iconic equivalent 3 imageOrientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image 3 justifyContent Sets or returns the alignment between the items inside a flexible container when the items do not use all available space. 3 left Sets or returns the left position of a positioned element 2 letterSpacing Sets or returns the space between characters in a text 1 lineHeight Sets or returns the distance between lines in a text 1 listStyle Sets or returns listStyleImage, listStylePosition, and listStyleType in one declaration 1 listStyleImage Sets or returns an image as the list-item marker 1 listStylePosition Sets or returns the position of the list-item marker 1 listStyleType Sets or returns the list-item marker type 1 margin Sets or returns the margins of an element (can have up to four values) 1 marginBottom Sets or returns the bottom margin of an element 1 marginLeft Sets or returns the left margin of an element 1 marginRight Sets or returns the right margin of an element 1 marginTop Sets or returns the top margin of an element 1 maxHeight Sets or returns the maximum height of an element 2 maxWidth Sets or returns the maximum width of an element 2 minHeight Sets or returns the minimum height of an element 2 minWidth Sets or returns the minimum width of an element 2 navDown Sets or returns where to navigate when using the arrow-down navigation key 3 navIndex Sets or returns thetabbing order for an element 3 navLeft Sets or returns where to navigate when using the arrow-left navigation key 3 navRight Sets or returns where to navigate when using the arrow-right navigation key 3 navUp Sets or returns where to navigate when using the arrow-up navigation key 3 opacity Sets or returns the opacity level for an element 3 order Sets or returns the order of the flexible item, relative to the rest 3 orphans Sets or returns the minimum number of lines for an element that must be left at the bottom of a page when a page break occurs inside an element 2 outline Sets or returns all the outline properties in one declaration 2 outlineColor Sets or returns the color of the outline around an element 2 outlineOffset Offsets an outline, and draws it beyond the border edge 3 outlineStyle Sets or returns the style of the outline around an element 2 outlineWidth Sets or returns the width of the outline around an element 2 overflow Sets or returns what to do with content that renders outside the element box 2 overflowX Specifies what to do with the left/right edges of the content, if it overflows the element’s content area 3 overflowY Specifies what to do with the top/bottom edges of the content, if it overflows the element’s content area 3 padding Sets or returns the padding of an element (can have up to four values) 1 paddingBottom Sets or returns the bottom padding of an element 1 paddingLeft Sets or returns the left padding of an element 1 paddingRight Sets or returns the right padding of an element 1 paddingTop Sets or returns the top padding of an element 1 pageBreakAfter Sets or returns the page-break behavior after an element 2 pageBreakBefore Sets or returns the page-break behavior before an element 2 pageBreakInside Sets or returns the page-break behavior inside an element 2 perspective Sets or returns the perspective on how 3D elements are viewed 3 perspectiveOrigin Sets or returns the bottom position of 3D elements 3 position Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed) 2 quotes Sets or returns the type of quotation marks for embedded quotations 2 resize Sets or returns whether or not an element is resizable by the user 3 right Sets or returns the right position of a positioned element 2 tableLayout Sets or returns the way to lay out table cells, rows, and columns 2 tabSize Sets or returns the length of the tab-character 3 textAlign Sets or returns the horizontal alignment of text 1 textAlignLast Sets or returns how the last line of a block or a line right before a forced line break is aligned when text-align is “justify” 3 textDecoration Sets or returns the decoration of a text 1 textDecorationColor Sets or returns the color of the text-decoration 3 textDecorationLine Sets or returns the type of line in a text-decoration 3 textDecorationStyle Sets or returns the style of the line in a text decoration 3 textIndent Sets or returns the indentation of the first line of text 1 textJustify Sets or returns the justification method used when text-align is “justify” 3 textOverflow Sets or returns what should happen when text overflows the containing element 3 textShadow Sets or returns the shadow effect of a text 3 textTransform Sets or returns the capitalization of a text 1 top Sets or returns the top position of a positioned element 2 transform Applies a 2D or 3D transformation to an element 3 transformOrigin Sets or returns the position of transformed elements 3 transformStyle Sets or returns how nested elements are rendered in 3D space 3 transition A shorthand property for setting or returning the four transition properties 3 transitionProperty Sets or returns the CSS property that the transition effect is for 3 transitionDuration Sets or returns how many seconds or milliseconds a transition effect takes to
complete 3 transitionTimingFunction Sets or returns the speed curve of the transition effect 3 transitionDelay Sets or returns when the transition effect will start 3 unicodeBidi Sets or returns whether the text should be overridden to support multiple languages at the same timedocument 2 verticalAlign Sets or returns the vertical alignment of the content in an element 1 visibility Sets or returns whether an element should be visible 2 whiteSpace Sets or returns how to handle tabs, line breaks and whitespace in a text 1 width Sets or returns the width of an element 1 wordBreak Sets or returns line breaking rules for non-CJK scripts 3 wordSpacing Sets or returns the spacing between words in a text 1 wordWrap Allows long, unbreakable words to be broken and wrap to the next line 3 widows Sets or returns the minimum number of lines for an element that must be
visible at the top of a page 2 zIndex Sets or returns the stack order of a positioned element 2

“navigator” object

The

Navigator object contains information about the browser. The Navigator object is named after the Netscape Navigator web browser, but is supported by all other browsers.

Properties of the “navigator” object

Object Property Description appCodeName Returns the code name of the browser appName Returns the name of the browser appVersion Returns the version information of the browser cookieEnabled Determines whether cookies are enabled in the browser geolocation Returns a Geolocation object that can be used to locate the user’s position language Returns the language of the browser onLine Determines whether the browser is online platform Returns for which platform the browser is compiled product Returns the engine name of the browser userAgent Returns the user-agent header sent by the browser to the server

“screen” object

Screen object stores data about the client’s screen.

Properties of the “screen object”

Object Property Description availHeight Returns the height of the screen (excluding the Windows Taskbar) availWidth Returns the width of the screen (excluding the Windows Taskbar) colorDepth Returns the bit depth of the color palette for displaying images height Returns the total height of the screen pixelDepth Returns the color resolution (in bits per pixel) of the screen width Returns the total width of the screen

“history” object

The

History object stores information about previously visited URLs and about addresses visited after visiting the current page, and it contains navigation methods.

Properties of the History object

Property Description length Returns the number of URLs in the history list

Methods of the History object

Method Description back() Loads the previous URL in the history list forward() Loadsthe next URL in the history list go() Loads a specific URL from the history list

“location” object

The Location object is part of the Window object and represents the URL address of the document currently displayed in that window.

Location object properties

Property Description hash Sets or returns the anchor part (#) of a URL host Sets or returns the hostname and port number of a URL hostname Sets or returns the hostname of a URL href Sets or returns the entire URL origin Returns the protocol, hostname and port number of a URL pathname Sets or returns the path name of a URL port Sets or returns the port number of a URL protocol Sets or returns the protocol of a URL search Sets or returns the querystring part of a URL

Methods of the Location object

Method Description assign() Loads a new document reload() Reloads the current document replace() Replaces the current document with a new one

“event” object

Properties of the Event object

Property Description HOME bubbles Returns whether or not a specific event is a bubbling event 2 cancelable Returns whether or not an event can have its default action prevented 2 currentTarget Returns the element whose event listeners triggered the event 2 defaultPrevented Returns whether or not the preventDefault() method was called for
the event 3 eventPhase Returns which phase of the event flow is currently being evaluated 2 isTrusted Returns whether or not an event is trusted 3 target Returns the element that triggered the event 2 timeStamp Returns the time (in milliseconds relative to the epoch) at which
the event was created 2 type Returns the name of the event 2 view Returns a reference to the Window object where the event occurred 2

Methods

Method Description HOME preventDefault() Cancels the event if it is cancelable, meaning that the default
action that belongs to the event will not occur 2 stopImmediatePropagation() Prevents other listeners of the same event from being called 3 stopPropagation() Prevents further propagation of an event during event flow 2