| Property/Method | Belongs To | Description |
|---|---|---|
abs() | Math | Returns the absolute (positive) value of a number, removing any negative sign. For example, Math.abs(-5) returns 5, and Math.abs(3) returns 3. Useful when you only care about the magnitude of a number, not its direction. Introduced in: |
accessKey | Element | A property that gets or sets a keyboard shortcut to activate or focus an element. For example, element.accessKey="h" lets users press Alt+H (or a similar combination depending on the browser) to interact with that element. |
acos() | Math | Returns the arccosine (inverse cosine) of a number in radians. For example, Math.acos(1) returns 0 because the cosine of 0 is 1. The input must be between -1 and 1. Used in trigonometry and geometry calculations. |
acosh() | Math | Returns the hyperbolic arccosine of a number. For example, Math.acosh(1) returns 0. This is the inverse of the hyperbolic cosine function. The input must be greater than or equal to 1. Used in advanced mathematics. |
activeElement | Document | Returns the currently focused element on the page. For example, document.activeElement might return a text input box if the user is typing in it, or a button if it was just clicked. Useful for tracking user focus. Introduced in: |
add() | Set / DOMTokenList | Adds a new item to a Set or adds CSS classes to an element's classList. For example, mySet.add(5) adds the number 5 to a Set, or element.classList.add("highlight") adds the "highlight" class to an element. Introduced in: |
addEventListener() | EventTarget | Attaches an event handler to an element so code runs when something happens (like a click or keypress). For example, button.addEventListener("click", myFunction) makes myFunction run whenever the button is clicked. This doesn't overwrite other event handlers. |
adoptNode() | Document | Transfers a node from another document into the current document, making it part of your page. For example, if you have an element from an iframe, document.adoptNode(nodeFromIframe) allows you to move it into your main document. |
after() | Element | Inserts new content immediately after an element as a sibling. For example, element.after("New text") or element.after(newElement) places content right after the element in the DOM tree, not inside it. Introduced in: |
alert() | Window | Displays a popup dialog box with a message and an OK button, pausing code execution until dismissed. For example, alert("Hello!") shows a popup saying "Hello!". Useful for simple notifications but considered intrusive for modern web design. |
all() | Promise | A Promise method that waits for all promises in an array to complete successfully. For example, Promise.all([promise1, promise2]) returns a new promise that resolves only when both promises finish. If any promise fails, the whole thing fails. Introduced in: |
allSettled() | Promise | A Promise method that waits for all promises to finish, whether they succeed or fail. Unlike all(), this doesn't reject if one promise fails. For example, Promise.allSettled([promise1, promise2]) returns results for all promises regardless of outcome. Introduced in: |
altKey | KeyboardEvent / MouseEvent | A boolean property of keyboard or mouse events that indicates whether the Alt key was pressed during the event. For example, event.altKey returns true if Alt was held down when the user clicked, allowing you to detect Alt+Click combinations. |
anchors | Document | Returns a collection of all <a> elements in the document that have a name attribute (older way of creating page anchors). For example, document.anchors gives you all named anchors. Note: This is mostly obsolete; modern code uses id attributes instead. |
animationName | AnimationEvent | A property of animation events that contains the name of the CSS animation that triggered the event. For example, when an animation finishes, event.animationName tells you which animation it was (like "slideIn" or "fadeOut"). |
any() | Promise | A Promise method that resolves as soon as any one promise in an array succeeds. For example, Promise.any([promise1, promise2]) completes when the first promise finishes successfully. If all promises fail, it rejects. Useful for "fastest wins" scenarios. Introduced in: |
appCodeName | Navigator | Returns the code name of the browser. For example, navigator.appCodeName typically returns "Mozilla" for most browsers (a historical quirk). Note: This is deprecated and not reliable for browser detection. |
append() | Element | Adds one or more nodes or text strings to the end of an element's children. For example, element.append("text", anotherElement) adds both text and an element inside. Unlike appendChild(), this can add multiple items and text at once. Introduced in: |
appendChild() | Node | Adds a single child node to the end of an element's children. For example, parent.appendChild(newChild) places newChild as the last child inside parent. If the child already exists elsewhere, it's moved to this new location. Introduced in: |
applets | Document | Returns a collection of all <applet> elements in the document (Java applets). For example, document.applets would list them. Note: This is completely obsolete as Java applets are no longer supported in modern browsers. |
appName | Navigator | Returns the name of the browser. For example, navigator.appName might return "Netscape" (another historical quirk - most browsers report this). Note: This is deprecated and unreliable; don't use it for browser detection. |
appVersion | Navigator | Returns version information about the browser. For example, navigator.appVersion might return a string like "5.0 (Windows)". Note: This is deprecated and often misleading; modern browser detection uses feature detection instead. |
Array[] | Array | The bracket notation for accessing or setting array elements by index position. For example, myArray[0] gets the first item, myArray[2] gets the third item. Arrays are zero-indexed, so counting starts at 0. You can also set values: myArray[1] = "new value". |
Array() | Array | A constructor that creates a new array. For example, new Array() creates an empty array, new Array(3) creates an array with 3 empty slots, and new Array(1, 2, 3) creates an array with those values. Most developers use [] instead as it's simpler. Introduced in: |
asin() | Math | Returns the arcsine (inverse sine) of a number in radians. For example, Math.asin(0) returns 0 because the sine of 0 is 0. The input must be between -1 and 1. Used in trigonometry calculations. |
asinh() | Math | Returns the hyperbolic arcsine of a number. For example, Math.asinh(0) returns 0. This is the inverse of the hyperbolic sine function. Used in advanced mathematical and physics calculations. |
assert() | Console | A console method that writes an error message if an assertion is false (a test condition fails). For example, console.assert(x > 0, "x must be positive") only logs an error if x is not greater than 0. Useful for debugging and catching logical errors. Introduced in: |
assign() | Object / Location | Copies properties from one or more source objects to a target object. For example, Object.assign(target, source1, source2) adds all properties from source1 and source2 to target. Also used with location.assign(url) to navigate to a new URL. Introduced in: |
at() | Array | Returns the element at a specific index in an array or string, supporting negative indices. For example, [array.at](http://array.at)(0) gets the first item, [array.at](http://array.at)(-1) gets the last item (counting from the end). More convenient than bracket notation for accessing from the end. Introduced in: |
atan() | Math | Returns the arctangent (inverse tangent) of a number in radians. For example, Math.atan(1) returns approximately 0.785 (π/4 radians or 45 degrees). Used in trigonometry to find angles from ratios. |
atan2() | Math | Returns the arctangent of the quotient of its arguments (the angle from the X axis to a point). For example, Math.atan2(y, x) gives the angle to point (x,y). Better than atan() because it handles all quadrants correctly and avoids division by zero. |
atanh() | Math | Returns the hyperbolic arctangent of a number. For example, Math.atanh(0) returns 0. This is the inverse of the hyperbolic tangent function. The input must be between -1 and 1. Used in advanced mathematics. |
atob() | Window | Decodes a base64-encoded string back to normal text. For example, atob("SGVsbG8=") returns "Hello". The opposite of btoa(). Base64 encoding is used to transmit binary data as text. "atob" stands for "ASCII to Binary". |
attributes | Element | Returns a collection of all attributes on an element. For example, element.attributes gives you access to all the class="", id="", style="", etc. attributes. You can loop through them or access specific ones by name. Introduced in: |
availHeight | Screen | Returns the height of the screen available for windows (excluding taskbars/OS UI). For example, screen.availHeight might return 1040 if your screen is 1080 pixels tall but the taskbar takes 40 pixels. Useful for sizing popup windows. |
availWidth | Screen | Returns the width of the screen available for windows (excluding taskbars/OS UI). For example, screen.availWidth gives you the usable horizontal space. Similar to availHeight but for width. |
back() | History | Makes the browser navigate back one page in the history, like clicking the back button. For example, history.back() takes the user to the previous page they visited. Equivalent to history.go(-1). |
baseURI | Document | Returns the absolute base URL of a document or element. For example, document.baseURI might return "<<<https://example.com/page.html>>>". If a <base> tag is present, it affects this value. Useful for resolving relative URLs. |
before() | Element | Inserts new content immediately before an element as a sibling. For example, element.before("New text") or element.before(newElement) places content right before the element in the DOM tree, not inside it. Introduced in: |
BigInt64Array | BigInt64Array | Creates a typed array for 64-bit signed integers (very large whole numbers from -9,223,372,036,854,775,808 to 9,223,372,036,854,775,807). For example, new BigInt64Array(5) creates an array that can hold 5 very large integers. Used for efficient numeric data processing. |
BigUint64Array | BigUint64Array | Creates a typed array for 64-bit unsigned integers (very large positive whole numbers from 0 to 18,446,744,073,709,551,615). For example, new BigUint64Array(5) creates an array for 5 very large positive integers. Used in high-performance computing. |
blur() | Element | Removes focus from an element, essentially "unfocusing" it. For example, element.blur() takes focus away from a text input, stopping the cursor from blinking there. The opposite of focus(). Also works on windows: window.blur() moves focus away from the current window. Introduced in: |
body | Document | Returns the <body> element of the document. For example, document.body gives you access to the body element so you can manipulate it directly: document.body.style.backgroundColor = "blue"; changes the page background color. Introduced in: |
break | JavaScript | A statement that immediately exits a loop or switch statement. For example, in a loop, when the code hits break;, it stops looping and continues with code after the loop. Useful for stopping early when you've found what you're looking for. Introduced in: |
btoa() | Window | Encodes a string into base64 format. For example, btoa("Hello") returns "SGVsbG8=". Base64 encoding converts text or binary data into a text format safe for transmission. "btoa" stands for "Binary to ASCII". The opposite of atob(). |
bubbles | Event | A boolean property of events indicating whether the event bubbles up through the DOM tree. For example, event.bubbles returns true if the event will trigger handlers on parent elements too. Most events bubble, but some (like focus) don't. Introduced in: |
button | MouseEvent | A property of mouse events that indicates which mouse button was pressed. For example, event.button returns 0 for left button, 1 for middle button, 2 for right button. Useful for detecting right-clicks or middle-clicks. Introduced in: |
buttons | MouseEvent | A property of mouse events that indicates which mouse button(s) are currently pressed, represented as a number. For example, event.buttons returns 1 for left button, 2 for right, 4 for middle, or combinations added together. Different from button which shows which button triggered the event. Introduced in: |
cancelable | Event | A boolean property of events indicating whether the default action can be prevented. For example, event.cancelable returns true if you can call preventDefault() to stop the normal behavior. Some events (like click on a link) are cancelable, others aren't. Introduced in: |
catch() | Promise | A Promise method that handles rejection (errors) in a promise chain. For example, promise.then(success).catch(error) lets you handle errors. The catch function receives the error reason and can do error handling without breaking the whole chain. Introduced in: |
cbrt() | Math | Returns the cube root of a number (the number that when multiplied by itself three times gives the original). For example, Math.cbrt(27) returns 3 because 3 × 3 × 3 = 27. Also works with negative numbers. |
ceil() | Math | Rounds a number up to the nearest integer. For example, Math.ceil(4.2) returns 5, and Math.ceil(4.9) also returns 5. Always rounds up, never down. Math.ceil(-4.2) returns -4 (up on the number line). Introduced in: |
changeTouches | TouchEvent | A property of touch events that returns a list of all touch points that changed between the previous touch event and this one. For example, in a touchmove event, event.changeTouches tells you which fingers moved. Used in touch screen interactions. |
characterSet | Document | Returns the character encoding of the document, usually "UTF-8". For example, document.characterSet tells you how text characters are encoded. UTF-8 can represent almost all characters from all languages. Important for internationalization. |
charAt() | String | Returns the character at a specific position in a string. For example, "Hello".charAt(0) returns "H", and "Hello".charAt(1) returns "e". Position counting starts at 0. If the position doesn't exist, it returns an empty string. Introduced in: |
charCode | KeyboardEvent | A deprecated property of keyboard events that returns the Unicode value of the character pressed. For example, event.charCode might return 97 for the lowercase 'a'. Note: Use event.key or event.code in modern code instead. Introduced in: |
charCodeAt() | String | Returns the Unicode value (number code) of the character at a specific position in a string. For example, "Hello".charCodeAt(0) returns 72 (the code for 'H'). Useful for working with character codes or doing string comparisons. Introduced in: |
charset | Document | Returns or sets the character encoding of a document or script. For example, document.charset tells you the encoding. Note: This is deprecated; use characterSet instead. Also used as an attribute on <script> tags. |
childElementCount | Element | Returns the number of child elements an element has, counting only elements (not text nodes or comments). For example, if a <div> contains 3 <p> elements, div.childElementCount returns 3. Useful for checking if an element has children. Introduced in: |
childNodes | Node | Returns a live collection of all child nodes of an element, including elements, text nodes, and comments. For example, element.childNodes gives you everything inside. childNodes[0] accesses the first child. This includes whitespace text nodes. Introduced in: |
children | Element | Returns a live collection of only the child elements (not text nodes or comments). For example, element.children gives you just the HTML elements inside, ignoring text and whitespace. Usually more useful than childNodes for DOM manipulation. Introduced in: |
classList | Element | Returns a special object representing an element's CSS classes, with methods to add, remove, or toggle classes. For example, element.classList.add("active") adds a class, element.classList.remove("hidden") removes one, and element.classList.toggle("show") adds or removes it. Introduced in: |
class | JavaScript | A keyword for defining a class (a template for creating objects). For example, class Dog { constructor(name) { this.name = name; } } creates a Dog class. You can then create instances: let myDog = new Dog("Buddy"). Classes are syntactic sugar over JavaScript's prototype system. Introduced in: |
className | Element | Gets or sets all the CSS classes of an element as a single string. For example, element.className = "highlight active" sets classes, or element.className returns something like "menu main". Unlike classList, this replaces all classes at once. Introduced in: |
clear() | Set / Map / Console | Removes all items from a Map or Set, or clears the console output. For example, mySet.clear() empties a Set of all values, myMap.clear() empties a Map, and console.clear() clears the browser console. Fast way to reset a collection. Introduced in: |
clearInterval() | Window | Stops a repeating timer created by setInterval(). For example, let id = setInterval(myFunction, 1000); clearInterval(id); stops the function from running every second. You must pass the interval ID that was returned when you created it. Introduced in: |
clearTimeout() | Window | Cancels a delayed timer created by setTimeout(). For example, let id = setTimeout(myFunction, 5000); clearTimeout(id); prevents the function from running. Must be called before the timeout completes, using the ID that was returned. Introduced in: |
clearWatch() | Geolocation | Stops watching the device's geographic position after calling watchPosition(). For example, let id = navigator.geolocation.watchPosition(success); navigator.geolocation.clearWatch(id); stops tracking location updates. Useful for saving battery when location tracking is no longer needed. |
click() | Element | Programmatically simulates a click on an element. For example, button.click() makes the button act as if it was clicked, triggering any click event handlers. Useful for testing or programmatic form submission. Introduced in: |
clientHeight | Element | Returns the inner height of an element in pixels, including padding but excluding borders, margins, and scrollbars. For example, element.clientHeight tells you how much vertical space is available inside. Useful for calculating visible content area. |
clientLeft | Element | Returns the width of the left border of an element in pixels. For example, if an element has a 5px left border, element.clientLeft returns 5. Usually not very useful except for precise layout calculations. |
clientTop | Element | Returns the width of the top border of an element in pixels. For example, if an element has a 3px top border, element.clientTop returns 3. Similar to clientLeft but for the top border. |
clientWidth | Element | Returns the inner width of an element in pixels, including padding but excluding borders, margins, and scrollbars. For example, element.clientWidth tells you the horizontal space available inside. Very useful for responsive designs and calculations. |
clientX | MouseEvent | Returns the horizontal coordinate of a mouse or touch event relative to the visible viewport (browser window). For example, event.clientX might return 200, meaning the click was 200 pixels from the left edge of the visible window. Doesn't change when you scroll. |
clientY | MouseEvent | Returns the vertical coordinate of a mouse or touch event relative to the visible viewport. For example, event.clientY might return 150, meaning the click was 150 pixels from the top of the visible window. Stays consistent even when scrolling. |
clipboardData | ClipboardEvent | An object available in clipboard events (copy, cut, paste) that contains data being transferred. For example, event.clipboardData.getData("text") retrieves text being pasted. You can also set data with setData(). Useful for customizing copy/paste behavior. |
cloneNode() | Node | Creates a duplicate copy of a node. For example, let copy = element.cloneNode(true) creates a deep copy including all children, while element.cloneNode(false) copies only the element itself without children. The copy is not in the document until you append it. Introduced in: |
closed | Window | A boolean property that indicates whether a window has been closed. For example, after let win = window.open("page.html"), you can check win.closed to see if that window is still open (false) or has been closed (true). Introduced in: |
close() | Window | Closes a window or dialog. For example, window.close() tries to close the current browser window (only works for windows opened by JavaScript). Also used with dialogs and other closeable objects. Some browsers restrict this for security. Introduced in: |
closest() | Element | Searches up the DOM tree from an element, returning the first ancestor (or the element itself) that matches a selector. For example, element.closest(".container") finds the nearest parent with class "container". Returns null if no match is found. Introduced in: |
clz32() | Math | Counts the number of leading zero bits in the 32-bit binary representation of a number. For example, Math.clz32(1) returns 31 (since 1 in binary is 00000000000000000000000000000001). Used in low-level programming and bit manipulation. |
code | KeyboardEvent | A property of keyboard events that returns a string representing the physical key pressed. For example, event.code returns "KeyA" for the A key regardless of keyboard layout or modifiers. Better than keyCode for detecting physical keys. Introduced in: |
codePointAt() | String | Returns the Unicode code point value at a position in a string, properly handling emoji and special characters. For example, "😀".codePointAt(0) returns 128512. Better than charCodeAt() for characters outside the basic range. Introduced in: |
colorDepth | Screen | Returns the number of bits used for color display on the screen. For example, screen.colorDepth might return 24 for 24-bit color (16.7 million colors). Modern screens typically return 24 or 32. Useful for graphics programming. |
compareDocumentPosition() | Node | Compares the position of two nodes in the document tree. For example, node1.compareDocumentPosition(node2) returns a number indicating whether node2 comes before/after node1, contains it, is contained by it, etc. Returns a bitmask value used for detailed position comparisons. |
compile() | RegExp | An obsolete method that compiled a regular expression. For example, regex.compile("pattern") was used to change a regex pattern. Note: This is deprecated and removed from modern JavaScript. Regular expressions are automatically compiled now. |
composed | Event | A boolean property of events indicating whether the event will cross from the shadow DOM into the regular DOM. For example, event.composed returns true if the event can bubble out of shadow roots. Important for Web Components. Introduced in: |
concat() | Array | Combines two or more arrays or strings into a new one without modifying the originals. For example, [1, 2].concat([3, 4]) returns [1, 2, 3, 4], and "Hello ".concat("World") returns "Hello World". Doesn't change the original arrays/strings. Introduced in: |
confirm() | Window | Displays a dialog box with OK and Cancel buttons, returning true if OK is clicked, false if Cancel. For example, if (confirm("Delete this?")) { deleteItem(); } asks for confirmation before proceeding. Blocks code execution until answered. |
const | JavaScript | Declares a constant variable that cannot be reassigned. For example, const PI = 3.14159; creates a constant. Attempting to change it later (PI = 3;) causes an error. Note: For objects and arrays, the contents can still be modified, just not the variable itself. Introduced in: |
constructor() | Class | A special method in a class that runs when creating a new instance. For example, class Dog { constructor(name) { this.name = name; } } lets you pass a name when creating: new Dog("Buddy"). Used to initialize object properties. Introduced in: |
constructor | Object | A property that references the constructor function that created an object. For example, myArray.constructor returns the Array function. Can be used to identify object types: obj.constructor === Object. Useful for checking what kind of object something is. Introduced in: |
contains() | Node | Checks if one element is a descendant of (inside) another element. For example, parent.contains(child) returns true if child is anywhere inside parent, even nested deep. Returns true if you check an element against itself. Introduced in: |
contentEditable | Element | Gets or sets whether an element's content can be edited by the user. For example, element.contentEditable = "true" makes the element editable like a text box. Users can click and type directly into it. Set to "false" to disable editing. Introduced in: |
continue | JavaScript | Skips the rest of the current loop iteration and jumps to the next iteration. For example, in a loop, when code hits continue;, it immediately starts the next loop cycle without running the remaining code. Useful for skipping certain items. Introduced in: |
console | Console | An object providing access to the browser's debugging console with methods for logging information. For example, console.log("message") prints to the console, console.error("error") shows errors in red, console.warn("warning") shows warnings in yellow. Essential for debugging. Introduced in: |
cookie | Document | Gets or sets the cookies associated with the document. For example, document.cookie = "username=John" creates a cookie, and document.cookie returns all cookies as a string. Cookies are small pieces of data stored in the browser. Introduced in: |
cookieEnabled | Navigator | Returns a boolean indicating whether cookies are enabled in the browser. For example, navigator.cookieEnabled returns true if cookies work, false if they're disabled. Useful for checking if you can store cookies before trying. Introduced in: |
coordinates | GeolocationPosition | A property of geolocation position objects containing latitude, longitude, accuracy, and other location data. For example, position.coords.latitude and position.coords.longitude give you the device's location. Used with geolocation API. |
copyWithin() | Array | Copies part of an array to another location in the same array, overwriting existing values. For example, [1, 2, 3, 4].copyWithin(0, 2) copies elements starting at index 2 to index 0, resulting in [3, 4, 3, 4]. Modifies the array in place. Introduced in: |
cos() | Math | Returns the cosine of an angle (in radians). For example, Math.cos(0) returns 1, and Math.cos(Math.PI) returns -1. Used in trigonometry, physics simulations, and game development. Remember: JavaScript uses radians, not degrees. |
cosh() | Math | Returns the hyperbolic cosine of a number. For example, Math.cosh(0) returns 1. This is related to the exponential function and used in advanced mathematics, physics, and engineering calculations. |
count() | Console | A console method that logs how many times it has been called with a specific label. For example, console.count("clicks") increments and displays the count each time. Useful for tracking how many times a section of code runs during debugging. Introduced in: |
create() | Object | Creates a new object with a specified prototype. For example, Object.create(proto) creates an object that inherits from proto. Used for inheritance: let child = Object.create(parent) makes child inherit parent's properties. More explicit than constructor functions. Introduced in: |
createAttribute() | Document | Creates a new attribute node that can be added to an element. For example, let attr = document.createAttribute("class"); attr.value = "highlight"; creates a class attribute. Then use element.setAttributeNode(attr) to add it. Rarely used; setAttribute() is simpler. Introduced in: |
createComment() | Document | Creates a new HTML comment node. For example, let comment = document.createComment("This is a note") creates a comment. You can then insert it into the document with appendChild(). Useful for programmatically adding comments to the DOM. |
createDocumentFragment() | Document | Creates a lightweight container for holding nodes temporarily. For example, let fragment = document.createDocumentFragment() creates an empty fragment. You can add multiple elements to it, then append the fragment to the document once. Much more efficient than appending elements one by one. Introduced in: |
createElement() | Document | Creates a new HTML element of a specified type. For example, let div = document.createElement("div") creates a new <div> element. It's not in the document yet; you need to append it somewhere. The most common way to create elements programmatically. Introduced in: |
createEvent() | Document | Creates a new event object that can be customized and dispatched. For example, let event = document.createEvent("MouseEvent") creates a mouse event. Then you configure it and use dispatchEvent() to trigger it. Modern code uses new Event() constructor instead. |
createTextNode() | Document | Creates a new text node containing text. For example, let text = document.createTextNode("Hello") creates text that can be appended to elements. Safer than using innerHTML when inserting user-provided text because it can't execute scripts. Introduced in: |
ctrlKey | KeyboardEvent / MouseEvent | A boolean property of keyboard or mouse events indicating whether the Control key (Ctrl) was pressed during the event. For example, event.ctrlKey returns true for Ctrl+Click combinations. Useful for detecting keyboard shortcuts. Introduced in: |
currentTarget | Event | Returns the element that has the event listener attached, which may be different from the element that triggered the event. For example, if you click a button inside a div with a listener, event.currentTarget is the div (where the listener is), while event.target is the button (what was clicked). Introduced in: |
data | Text | A property that holds the actual data associated with a text node or data transfer. For example, textNode.data contains the text content, and event.dataTransfer.data contains drag-and-drop data. Can be read or modified. Introduced in: |
dataTransfer | DragEvent | An object available in drag-and-drop events that holds the data being dragged and information about the drag operation. For example, event.dataTransfer.setData("text", "Hello") stores text, and event.dataTransfer.getData("text") retrieves it during drop. |
debugger | JavaScript | A statement that acts as a breakpoint, pausing code execution if developer tools are open. For example, when JavaScript hits debugger;, the browser's debugger will pause there, letting you inspect variables and step through code. Only works when dev tools are open. |
decodeURI() | Window | Decodes a URI that was encoded with encodeURI(), converting special encoded characters back to normal. For example, decodeURI("Hello%20World") returns "Hello World" (space back from %20). Doesn't decode characters like ? or & that are part of URI structure. |
decodeURIComponent() | Window | Decodes a URI component that was encoded with encodeURIComponent(), converting all encoded characters back. For example, decodeURIComponent("Hello%20World%3F") returns "Hello World?" (decoding both space and question mark). More comprehensive than decodeURI(). |
defaultPrevented | Event | A boolean property of events indicating whether preventDefault() was called. For example, event.defaultPrevented returns true if the default action was cancelled. Useful for checking if another handler already prevented the default behavior. Introduced in: |
defaultStatus | Window | Gets or sets the default message in the browser's status bar. For example, window.defaultStatus = "Ready" would show "Ready" in the status bar. Note: This is obsolete and doesn't work in modern browsers for security reasons. |
defaultView | Document | Returns the window object associated with a document. For example, document.defaultView returns the window containing the document. Usually just window, but useful when working with iframes or other documents. |
defineProperties() | Object | Defines multiple new properties or modifies existing ones on an object with detailed control. For example, Object.defineProperties(obj, { prop1: {value: 42, writable: false}, prop2: {value: "hi"} }) adds properties with specific characteristics like being read-only. Introduced in: |
defineProperty() | Object | Creates or modifies a property on an object with special settings like making it read-only or hidden. For example, Object.defineProperty(myObj, 'name', {value: 'John', writable: false}) creates a property called 'name' that cannot be changed. It's like adding a new feature to an object with specific rules. Introduced in: |
delete | Global | A keyword that removes a property from an object. For example, if you have person.age = 25, using delete person.age completely removes the age property from the person object. It's like erasing a field from a form. Introduced in: |
delete() | Map, Set | A method used with Maps and Sets to remove a specific item. For example, myMap.delete('key1') removes the entry with key 'key1' from a Map, and mySet.delete(5) removes the value 5 from a Set. Returns true if something was deleted, false if the item wasn't found. Introduced in: |
deltaX | WheelEvent | A property of wheel and mouse events that tells you how much the mouse wheel scrolled horizontally (left or right). Positive numbers mean scrolling right, negative means left. For example, when a user scrolls sideways on a trackpad, deltaX captures that movement. Introduced in: |
deltaY | WheelEvent | A property of wheel and mouse events that tells you how much the mouse wheel scrolled vertically (up or down). Positive numbers mean scrolling down, negative means up. This is what you get when someone uses their mouse wheel or two-finger scroll. Introduced in: |
deltaZ | WheelEvent | A property of wheel events that captures scrolling along the Z-axis (in/out depth). This is rarely used and mainly for 3D input devices or special mouse wheels that support depth scrolling. Introduced in: |
deltaMode | WheelEvent | Tells you the unit of measurement for the scroll amount in wheel events: pixels (0), lines (1), or pages (2). For example, if deltaMode is 1, deltaY of 3 means scrolling 3 lines of text. Introduced in: |
designMode | Document | Controls whether you can edit the entire webpage content directly in the browser. Setting document.designMode = 'on' makes every element on the page editable, like turning a webpage into a text editor. Setting it to 'off' returns to normal mode. |
detail | UIEvent | Provides extra information about certain events. For example, for click events, it counts how many times you clicked (1 for single-click, 2 for double-click). Different event types use detail for different purposes. Introduced in: |
dir | HTMLElement | Specifies the text direction of an element's content. Values can be 'ltr' (left-to-right like English), 'rtl' (right-to-left like Arabic), or 'auto' (browser decides). For example, element.dir = 'rtl' makes text flow from right to left. Introduced in: |
do…while | Global | A loop that runs code at least once, then keeps repeating as long as a condition is true. For example: do { console.log("Hello"); } while (count < 5); prints "Hello" and then checks if it should continue. Unlike a regular while loop, this always executes at least once. |
doctype | Document | Returns the document's doctype declaration, which tells the browser what version of HTML is being used. For example, document.doctype typically returns information about <!DOCTYPE html>. It's like checking the format specifications of a document. |
document | Global | The main object representing the entire webpage. Everything on the page (text, images, forms) is part of this object. You use it to access and manipulate content: document.getElementById(), document.title, etc. It's like the master file containing your entire webpage. Introduced in: |
documentElement | Document | Returns the root element of the document, which is always the <html> element. For example, document.documentElement gives you access to the outermost HTML tag. You can use it to get or change things about the entire HTML document. Introduced in: |
documentMode | Document | An Internet Explorer-specific property that tells you which document mode (compatibility version) IE is using to render the page. Modern browsers don't use this property. |
documentURI | Document | Returns the web address (URL) of the current document as a string. For example, document.documentURI might return "https://example.com/page.html". It's essentially the same as document.URL. |
domain | Document | Returns the domain name of the server that loaded the document. For example, if you're on "https://www.example.com/page", then document.domain returns "www.example.com". It can be used for security checks. |
elapsedTime | AnimationEvent | A property used in animation and transition events that tells you how many seconds have passed since the animation or transition started. For example, if an animation took 2.5 seconds to complete, elapsedTime would be 2.5. |
embeds | Document | Returns a collection of all <embed> elements in the document (elements that embed external content like Flash or PDFs). For example, document.embeds[0] accesses the first embedded object. It's like a list of all embedded items on your page. |
encodeURI() | Global | Converts a complete URL into a safe format for transmitting over the internet by encoding special characters. For example, encodeURI('https://site.com/my page.html') becomes "https://site.com/my%20page.html" (space becomes %20). Use this for entire URLs. |
encodeURIComponent() | Global | Encodes a piece of a URL (like a query parameter value) by converting special characters. For example, encodeURIComponent('hello world') becomes "hello%20world". More aggressive than encodeURI—it even encodes characters like / and :, so use it for URL parts, not complete URLs. |
E | Math | A mathematical constant representing Euler's number (approximately 2.718), which is the base of natural logarithms. Access it as Math.E. Used in exponential growth calculations, compound interest, and natural logarithm functions. Introduced in: |
endsWith() | String | Checks if a string ends with specific characters. Returns true or false. For example, 'hello.txt'.endsWith('.txt') returns true because the string ends with '.txt'. You can also specify where to stop checking: 'hello'.endsWith('ll', 4) checks only the first 4 characters. Introduced in: |
entries() | Array, Map, Object | Returns an iterator containing key-value pairs from an array, Map, or object. For arrays: ['a','b'].entries() gives pairs like [0,'a'], [1,'b'] where 0 and 1 are indices. For Maps, it gives the actual key-value pairs. Useful for looping through both positions and values. Introduced in: |
EPSILON | Number | The smallest positive number that JavaScript can represent the difference between two numbers. Access as Number.EPSILON (approximately 0.0000000000000002220446049250313). Used to compare floating-point numbers safely, since decimal math can have tiny rounding errors. Introduced in: |
error() | Console | Outputs an error message to the browser's console. For example, console.error('Something went wrong!') displays the message in red with an error icon. Useful for logging problems while debugging your code. Introduced in: |
escape() | Global | An old function that encodes a string for use in URLs (deprecated—use encodeURI or encodeURIComponent instead). For example, escape('hello world') becomes "hello%20world". This function is outdated and shouldn't be used in modern code. |
eval() | Global | Executes JavaScript code that's written as a string. For example, eval('2 + 2') returns 4. While powerful, it's dangerous and slow—it can run malicious code and is considered bad practice. Almost always, there's a better, safer way to accomplish what you need. |
eventPhase | Event | Tells you which phase an event is currently in: 0 (none), 1 (capturing phase—going down the DOM tree), 2 (at target—on the actual element), or 3 (bubbling phase—going up the tree). Helps you understand how an event is traveling through your HTML structure. |
every() | Array | Tests whether all elements in an array pass a condition. Returns true if every item passes, false if any item fails. For example, [2, 4, 6].every(num => num % 2 === 0) returns true because all numbers are even. Stops checking as soon as it finds one that fails. Introduced in: |
exec() | RegExp | A method for regular expressions that searches a string and returns detailed information about the first match, including the matched text and its position. For example, /\\d+/.exec('abc123') returns an array with details about '123'. Returns null if no match is found. Introduced in: |
execCommand() | Document | An old method that executes commands to manipulate editable content (like making text bold or inserting HTML). For example, document.execCommand('bold') makes selected text bold. This is deprecated—modern code should use other approaches. |
exitFullscreen() | Document | Exits fullscreen mode if the document is currently displayed fullscreen. For example, document.exitFullscreen() returns the browser to normal window mode. Used to give users a way to exit fullscreen programmatically. |
exp() | Math | Returns e (Euler's number) raised to the power of a given number. For example, Math.exp(2) calculates e² (approximately 7.389). Used in exponential growth calculations, statistics, and scientific formulas. |
expm1() | Math | Calculates e raised to a power minus 1 (eˣ - 1), but more accurately for very small numbers. For example, Math.expm1(0.001) gives a more precise result than Math.exp(0.001) - 1. Useful in financial and scientific calculations requiring high precision. |
export | Global | A keyword that makes variables, functions, or classes available to other JavaScript files. For example, export const name = 'John'; in one file lets other files import and use that variable. It's like publishing content for other files to use. |
extends | Global | A keyword used in classes to create a child class that inherits from a parent class. For example, class Dog extends Animal makes Dog inherit all properties and methods from Animal. The child class gets everything the parent has, plus you can add more. Introduced in: |
fill() | Array | Fills all or part of an array with a specific value. For example, [1,2,3,4].fill(0) changes the array to [0,0,0,0]. You can specify start and end positions: arr.fill('x', 2, 4) fills only positions 2 and 3. Modifies the original array. Introduced in: |
filter() | Array | Creates a new array containing only the elements that pass a test. For example, [1,2,3,4,5].filter(num => num > 2) returns [3,4,5]. The original array remains unchanged. It's like using a strainer to keep only what you want. Introduced in: |
finally() | Promise | Used with Promises to run code after a promise completes, regardless of whether it succeeded or failed. For example, fetch(url).then().catch().finally(() => hideLoader()) hides a loading spinner whether the request succeeded or failed. Also used in try-catch blocks. Introduced in: |
find() | Array | Returns the first element in an array that passes a test. For example, [1,2,3,4].find(num => num > 2) returns 3 (the first number greater than 2). Returns undefined if no element passes. Unlike filter(), this returns just one item, not an array. Introduced in: |
findIndex() | Array | Returns the position (index) of the first element that passes a test. For example, [10,20,30].findIndex(num => num > 15) returns 1 (because 20 is at position 1). Returns -1 if no element passes the test. Introduced in: |
findLast() | Array | Like find(), but searches from the end of the array backwards. Returns the last element that passes a test. For example, [1,2,3,4,3,2,1].findLast(num => num > 2) returns 3 (the last 3 in the array, not the first). Introduced in: |
findLastIndex() | Array | Like findIndex(), but searches backwards from the end. Returns the position of the last element that passes a test. For example, [1,3,2,4].findLastIndex(num => num > 2) returns 3 (position of the 4). Introduced in: |
firstChild | Node | Returns the first child node of an element, which could be an element, text (including whitespace), or comment. For example, if a <div> contains text and other elements, div.firstChild gets the very first node inside. Note: whitespace between tags counts as text nodes. Introduced in: |
firstElementChild | ParentNode | Returns the first child element (ignoring text and comments) of an element. For example, div.firstElementChild gets the first actual HTML tag inside the div, skipping any text or whitespace. Cleaner than firstChild when you want only elements. Introduced in: |
flat() | Array | Flattens nested arrays by one or more levels. For example, [1, [2, [3, 4]]].flat() returns [1, 2, [3, 4]] (flattens one level). Use flat(2) to flatten two levels deep, or flat(Infinity) to completely flatten any depth. Introduced in: |
flatMap() | Array | Maps each element using a function, then flattens the result by one level. It's like doing map() then flat() in one step. For example, [1,2,3].flatMap(x => [x, x*2]) returns [1,2,2,4,3,6]. Useful when mapping produces arrays that you want to merge. Introduced in: |
Float16Array | Global | Creates a typed array of 16-bit floating-point numbers (half-precision). Uses less memory than Float32Array but with less precision. For example, new Float16Array([1.5, 2.7, 3.9]) creates an array optimized for graphics and scientific calculations where memory matters more than precision. |
Float32Array | Global | Creates a typed array of 32-bit floating-point numbers (single-precision). For example, new Float32Array([1.5, 2.7, 3.9]) creates an array that's more memory-efficient than regular arrays for numerical data. Used in graphics, audio processing, and scientific computing. |
Float64Array | Global | Creates a typed array of 64-bit floating-point numbers (double-precision). For example, new Float64Array([1.5, 2.7]) creates an array with the same precision as regular JavaScript numbers but in a more efficient structure for numerical operations. |
floor() | Math | Rounds a number down to the nearest whole number. For example, Math.floor(4.9) returns 4, and Math.floor(-2.3) returns -3 (rounds toward negative infinity). Useful when you need to discard decimal parts. Introduced in: |
focus() | Element | Puts the cursor in a specific element, making it active for user input. For example, document.getElementById('username').focus() automatically places the cursor in a username input field. Useful for improving user experience by guiding where they should type. Introduced in: |
for | Global | A loop that repeats code a specific number of times. For example, for (let i = 0; i < 5; i++) { console.log(i); } prints numbers 0 through 4. It has three parts: initialization (i=0), condition (i<5), and increment (i++). Introduced in: |
for...in | Global | Loops through the properties (keys) of an object. For example, for (let key in person) { console.log(key); } prints all property names in the person object. For arrays, it loops through indices. Best used with objects, not arrays. |
forEach() | Array | Executes a function once for each element in an array. For example, [1,2,3].forEach(num => console.log(num)) prints each number. Unlike map(), it doesn't return anything—it's just for performing actions. You can't break out of a forEach loop early. Introduced in: |
forms | Document | Returns a collection of all <form> elements in the document. For example, document.forms[0] accesses the first form on the page, and document.forms.loginForm accesses a form with name="loginForm". It's like a list of all forms on your webpage. |
forward() | History | Moves forward one page in the browser's history, like clicking the forward button. For example, history.forward() goes to the next page if the user previously went back. Does nothing if there's no forward history. |
frameElement | Window | Returns the <iframe>, <object>, or <embed> element that contains the current window, if any. Returns null if the page isn't embedded. For example, if your page is loaded in an iframe, window.frameElement gives you access to that iframe element. |
frames | Window | Returns a collection of all <iframe> elements (frames) in the current window. For example, window.frames[0] accesses the first iframe's window object. You can use it to communicate between the main page and embedded iframes. |
freeze() | Object | Makes an object completely unchangeable—you can't add, delete, or modify properties. For example, Object.freeze(myObj) locks the object permanently. Any attempt to change it will fail silently (or throw an error in strict mode). It's like sealing something in ice. Introduced in: |
from() | Array | Creates a new array from an array-like or iterable object. For example, Array.from('hello') creates ['h','e','l','l','o'], and Array.from([1,2,3], x => x*2) creates [2,4,6] by also applying a transformation function. Very useful for converting things into arrays. Introduced in: |
fromCharCode() | String | Creates a string from Unicode character codes. For example, String.fromCharCode(72, 101, 108, 108, 111) returns "Hello" (72 is 'H', 101 is 'e', etc.). Each number represents a character in the Unicode table. |
fromEntries() | Object | Converts an array of key-value pairs into an object. For example, Object.fromEntries([['name','John'],['age',30]]) creates {name: 'John', age: 30}. It's the opposite of Object.entries(). Useful for transforming data structures. Introduced in: |
fround() | Math | Rounds a number to the nearest 32-bit floating-point representation. For example, Math.fround(1.337) might return 1.3370000123977661 due to 32-bit precision limits. Used when you need to simulate lower-precision calculations. |
fullscreenElement | Document | Returns the element currently displayed in fullscreen mode, or null if nothing is fullscreen. For example, document.fullscreenElement tells you which video or div is currently taking up the whole screen. Useful for checking fullscreen state. Introduced in: |
fullscreenEnabled() | Document | Checks whether fullscreen mode is available in the current browser and document. Returns true or false. For example, document.fullscreenEnabled tells you if you can request fullscreen mode. Some browsers or iframe restrictions prevent fullscreen. |
function | Global | A keyword that defines a reusable block of code. For example, function greet(name) { return 'Hello ' + name; } creates a function that you can call multiple times: greet('John'). Functions are like recipes—write once, use many times. Introduced in: |
geolocation | Navigator | Provides access to the user's location through their device's GPS or other positioning methods. For example, navigator.geolocation.getCurrentPosition() asks the user for permission then returns their coordinates. Used for maps, location-based services, and weather apps. Introduced in: |
get() | Map | Retrieves a value from a Map or Set using a key. For example, myMap.get('username') returns the value associated with the key 'username'. Returns undefined if the key doesn't exist. Different from accessing object properties, this is specifically for Map data structures. Introduced in: |
getDate() | Date | Returns the day of the month (1-31) from a Date object. For example, if the date is March 15, date.getDate() returns 15. Not to be confused with getDay() which returns the day of the week. Introduced in: |
getDay() | Date | Returns the day of the week (0-6) from a Date object, where 0 is Sunday, 1 is Monday, etc. For example, date.getDay() returns 0 for Sunday, 6 for Saturday. Useful for checking if a date falls on a weekend. Introduced in: |
getAttribute() | Element | Gets the value of a specific attribute from an HTML element. For example, element.getAttribute('href') returns the URL from a link, or element.getAttribute('data-id') gets a custom data attribute. Returns null if the attribute doesn't exist. Introduced in: |
getAttributeNode() | Element | Gets the full attribute node (not just the value) of an HTML element. For example, element.getAttributeNode('class') returns an Attr object with name and value properties. This is rarely used—getAttribute() is usually simpler. Introduced in: |
getBoundingClientRect() | Element | Returns the size and position of an element relative to the viewport. For example, element.getBoundingClientRect() gives you an object with properties like top, left, right, bottom, width, and height in pixels. Useful for positioning tooltips or checking if elements are visible on screen. Introduced in: |
getComputedStyle() | Window | Returns all the actual CSS styles applied to an element, including inherited and default styles. For example, window.getComputedStyle(element).color tells you the element's computed text color, even if it was inherited from a parent. Returns the final calculated values. Introduced in: |
getCurrentPosition() | Geolocation | Gets the user's current geographic location. For example, navigator.geolocation.getCurrentPosition(success, error) asks for permission, then calls the success function with coordinates. Used in mapping and location-based apps. |
getElementById() | Document | Finds and returns an HTML element by its id attribute. For example, document.getElementById('header') returns the element with id="header". Returns null if no element with that id exists. IDs should be unique on a page. Introduced in: |
getElementsByClassName() | Document | Returns a live collection of all elements that have a specific class name. For example, document.getElementsByClassName('button') finds all elements with class="button". Returns an HTMLCollection (array-like) that automatically updates if elements are added or removed. Introduced in: |
getElementsByName() | Document | Returns a collection of all elements with a specific name attribute. For example, document.getElementsByName('email') finds all inputs with name="email". Mainly used with form elements. Returns a live NodeList. Introduced in: |
getElementsByTagName() | Document | Returns a live collection of all elements with a specific tag name. For example, document.getElementsByTagName('p') finds all <p> (paragraph) elements. Returns an HTMLCollection. Using '*' returns all elements. Introduced in: |
getFullYear() | Date | Returns the 4-digit year from a Date object. For example, date.getFullYear() returns 2024. Always use this instead of the deprecated getYear() which returns weird 2-digit values. Introduced in: |
getHours() | Date | Returns the hour (0-23) from a Date object in local time. For example, date.getHours() returns 14 for 2 PM. Uses 24-hour format, so midnight is 0, noon is 12, and 11 PM is 23. Introduced in: |
getItem() | Storage | Retrieves a value from localStorage or sessionStorage using a key. For example, localStorage.getItem('username') returns the saved username value. Returns null if the key doesn't exist. Used for browser storage. Introduced in: |
getMilliseconds() | Date | Returns the milliseconds (0-999) from a Date object. For example, date.getMilliseconds() returns 456 if the time is exactly X seconds and 456 milliseconds. Introduced in: |
getMinutes() | Date | Returns the minutes (0-59) from a Date object. For example, if the time is 2:45 PM, date.getMinutes() returns 45. Introduced in: |
getModifierState() | MouseEvent | Checks if a modifier key (Shift, Ctrl, Alt, Meta/Command, CapsLock, etc.) was pressed during a keyboard or mouse event. For example, event.getModifierState('Shift') returns true if Shift was held down. Useful for detecting keyboard shortcuts. Introduced in: |
getMonth() | Date | Returns the month (0-11) from a Date object, where 0 is January, 1 is February, through 11 for December. For example, date.getMonth() returns 2 for March. Remember to add 1 when displaying to users! Introduced in: |
getNamedItem() | NamedNodeMap | Gets an attribute from an element's attribute collection by name. For example, element.attributes.getNamedItem('href') returns the href attribute object. Similar to getAttribute() but returns an Attr node instead of just the value. |
getOwnPropertyDescriptor() | Object | Returns detailed information about a specific property of an object, including whether it's writable, enumerable, or configurable. For example, Object.getOwnPropertyDescriptor(obj, 'name') tells you everything about the 'name' property's settings. Introduced in: |
getOwnPropertyDescriptors() | Object | Returns all property descriptors for an object at once. For example, Object.getOwnPropertyDescriptors(obj) gives you detailed information about all properties. Useful when cloning objects with all their configuration settings. Introduced in: |
getOwnPropertyNames() | Object | Returns an array of all property names (including non-enumerable ones) directly on an object. For example, Object.getOwnPropertyNames(obj) lists all properties, even those that don't show up in for...in loops. Doesn't include inherited properties. Introduced in: |
getSeconds() | Date | Returns the seconds (0-59) from a Date object. For example, if the time is 3:45:23 PM, date.getSeconds() returns 23. Introduced in: |
getSelection() | Window | Returns information about the text the user has currently selected/highlighted on the page. For example, window.getSelection().toString() gives you the selected text as a string. Useful for copy/paste features or text manipulation tools. |
getTargetRanges() | InputEvent | Returns the ranges (selected text portions) that will be affected by an input event. This is advanced functionality used in text editors to understand what content is about to change before the change actually happens. Introduced in: |
getTime() | Date | Returns the number of milliseconds since January 1, 1970 (Unix timestamp) for a Date object. For example, date.getTime() might return 1609459200000. Useful for comparing dates or calculating time differences. Introduced in: |
getTimezoneOffset() | Date | Returns the difference in minutes between UTC time and local time. For example, date.getTimezoneOffset() returns -300 if you're 5 hours ahead of UTC (300 minutes, negative because you're ahead). Used for timezone conversions. Introduced in: |
getUTCDate() | Date | Returns the day of the month (1-31) in UTC (Universal Time), regardless of your local timezone. Similar to getDate() but uses UTC instead of local time. Introduced in: |
getUTCDay() | Date | Returns the day of the week (0-6) in UTC time. Like getDay() but in UTC, so the day might be different from your local day if you're near midnight. Introduced in: |
getUTCFullYear() | Date | Returns the 4-digit year in UTC time. Like getFullYear() but in UTC timezone. Introduced in: |
getUTCHours() | Date | Returns the hour (0-23) in UTC time. Like getHours() but in UTC, so if it's 3 AM locally, UTC might show a different hour. Introduced in: |
getUTCMilliseconds() | Date | Returns the milliseconds (0-999) in UTC time. Introduced in: |
getUTCMinutes() | Date | Returns the minutes (0-59) in UTC time. Introduced in: |
getUTCMonth() | Date | Returns the month (0-11) in UTC time. Introduced in: |
getUTCSeconds() | Date | Returns the seconds (0-59) in UTC time. Introduced in: |
getYear() | Date | An old, deprecated method that returns the year minus 1900. For example, for year 2024, it returns 124. Don't use this—use getFullYear() instead, which gives you the actual 4-digit year. |
global | RegExp | A property of regular expressions that determines if the pattern should match all occurrences in a string (true) or just the first one (false). For example, /a/g has global=true and finds all 'a's, while /a/ finds only the first. Introduced in: |
go() | History | Moves to a specific page in the browser's history. For example, history.go(-1) goes back one page (like the back button), history.go(1) goes forward, and history.go(-2) goes back two pages. history.go(0) reloads the current page. |
group() | Array | Groups elements of an array based on a function, returning an object where keys are group names and values are arrays of items. For example, grouping numbers by even/odd. This is a newer method not fully supported in all browsers yet. Introduced in: |
groupBy() | Object | A static method that groups array elements based on a callback function. For example, Object.groupBy(students, s => s.grade) groups students by their grade level. Returns an object with categories as keys and arrays of matching items as values. Introduced in: |
groupCollapsed() | Console | Creates a collapsed group in the browser console. Everything logged after this is indented and hidden under a collapsed group until groupEnd(). For example, console.groupCollapsed('Details') creates a collapsible section. Click to expand and see the details. Introduced in: |
groupEnd() | Console | Closes the most recent [console.group](http://console.group)() or console.groupCollapsed(), returning to normal logging. Always pair this with group/groupCollapsed to properly organize your console output. Introduced in: |
has() | Map, Set | Checks if a Map or Set contains a specific key or value. For example, myMap.has('username') returns true if that key exists, false otherwise. For Sets, mySet.has(5) checks if the value 5 is in the set. Introduced in: |
hasAttribute() | Element | Checks if an element has a specific attribute. Returns true or false. For example, element.hasAttribute('disabled') tells you if a button has the disabled attribute, even if the attribute has no value. Introduced in: |
hasAttributes() | Element | Checks if an element has any attributes at all. Returns true if it has at least one attribute, false if it has none. For example, element.hasAttributes() on <div class="box"> returns true. Introduced in: |
hasChildNodes() | Node | Checks if an element has any child nodes (elements, text, or comments). Returns true or false. For example, element.hasChildNodes() returns true if there's anything inside the element, even just whitespace text. Introduced in: |
hasFocus() | Document | Checks if the document or a specific element currently has focus (is active/selected). For example, document.hasFocus() returns true if the browser window is active. Useful for pausing games or animations when users switch tabs. Introduced in: |
hash | Location | Returns or sets the anchor part of a URL (the part after #). For example, if the URL is "page.html#section2", location.hash returns "#section2". Useful for reading or creating in-page navigation links. Introduced in: |
head | Document | Returns the <head> element of the document. For example, document.head gives you access to the head section where meta tags, links, and scripts are typically placed. Useful for dynamically adding stylesheets or meta tags. Introduced in: |
height | Element, Window | Returns the height of an element or window in pixels. For example, element.height for an image returns its display height, and window.innerHeight returns the viewport height. Can also be used to set height in some cases. Introduced in: |
history | Window | Provides access to the browser's session history (the list of pages visited in this tab). For example, history.back() goes to the previous page, history.forward() goes forward, and history.length tells you how many pages are in the history. Introduced in: |
host | Location | Returns the hostname and port of a URL. For example, if the URL is "https://example.com:8080/page", location.host returns "example.com:8080". If there's no port specified, it just returns the hostname. |
hostname | Location | Returns just the domain name of a URL without the port. For example, "example.com" from "https://example.com:8080/page". Use location.hostname to get the server name of the current page. |
href | Location | Returns or sets the complete URL. For example, location.href gives you the full current URL like "https://example.com/page.html?id=5", and setting location.href = 'newpage.html' navigates to that page. Most direct way to read or change the URL. Introduced in: |
id | Element | A property that gets or sets the unique identifier of an HTML element. For example, if you have <div id="header">, you can access it with document.getElementById('header') and get or change its id property. Every id should be unique on the page. Introduced in: |
if...else | Statements | A control structure that executes different code based on whether a condition is true or false. For example, if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); } checks age and prints different messages. You can chain multiple conditions with else if. Introduced in: |
ignoreCase | RegExp | A property of regular expressions that indicates whether the pattern should match regardless of letter case. When true, the regex treats 'A' and 'a' as the same. For example, /hello/i has ignoreCase true (the 'i' flag). Introduced in: |
images | Document | A property of the document object that returns a collection of all <img> elements on the page. For example, document.images[0] gets the first image, and document.images.length tells you how many images exist. |
implementation | Document | A property of the document object that provides access to methods for creating new documents and checking feature support. It's rarely used in modern web development but can check if certain DOM features are available. |
importNode() | Document | A document method that creates a copy of a node from another document so it can be inserted into the current document. For example, let copy = document.importNode(externalNode, true); copies a node (the true means copy its children too). |
in | Operators | An operator that checks if a property exists in an object or if an index exists in an array. For example, 'name' in person returns true if the person object has a 'name' property, 2 in myArray checks if index 2 exists. Introduced in: |
includes() | Array, String | A method for arrays and strings that checks if a value is present. For arrays: [1, 2, 3].includes(2) returns true. For strings: "hello".includes("ell") returns true because "ell" is inside "hello". Returns false if not found. Introduced in: |
indexOf() | Array, String | A method for arrays and strings that finds the position (index) of a value. Returns the index if found, or -1 if not found. For example, "hello".indexOf("l") returns 2 (the first 'l' position), [10, 20, 30].indexOf(20) returns 1. Introduced in: |
Infinity | Global | A global value representing mathematical infinity, larger than any other number. For example, 1/0 returns Infinity, and you can compare numbers: x > Infinity is always false. There's also -Infinity for negative infinity. Introduced in: |
info() | Console | A console method that outputs informational messages to the browser's console. For example, [console.info](http://console.info)("User logged in") displays a message, usually with an info icon. In most browsers, it works the same as console.log(). Introduced in: |
innerHeight | Window | A window property that gives the height of the browser window's content area (in pixels), excluding toolbars and scrollbars. For example, window.innerHeight might return 800 if the viewable area is 800 pixels tall. Changes when window is resized. Introduced in: |
innerHTML | Element | A property that gets or sets the HTML content inside an element, including all tags. For example, element.innerHTML = "<p>Hello</p>" replaces content with a paragraph. Reading it gives you the HTML as a string. Be careful: it can execute scripts if you insert user content. Introduced in: |
innerText | Element | A property that gets or sets only the visible text content of an element, excluding HTML tags and hidden elements. For example, element.innerText = "Hello" sets text (HTML tags would be displayed as text, not rendered). It respects CSS styling and line breaks. Introduced in: |
innerWidth | Window | A window property that gives the width of the browser window's content area (in pixels), excluding toolbars and scrollbars. For example, window.innerWidth might return 1200 for a 1200-pixel-wide viewport. Useful for responsive JavaScript. Introduced in: |
inputEncoding | Document | A document property that returns the character encoding (like "UTF-8") used for the document. This tells you how characters are represented in the file, ensuring special characters display correctly. |
inputType | InputEvent | A property of input events that specifies what kind of input change occurred. For example, when typing in a text field, event.inputType might be "insertText" for regular typing or "deleteContentBackward" for backspace. Introduced in: |
insertAdjacentElement() | Element | A method that inserts an element at a specific position relative to another element. Takes two parameters: position ('beforebegin', 'afterbegin', 'beforeend', 'afterend') and the element. For example, div.insertAdjacentElement('beforeend', newElement) adds it as the last child. Introduced in: |
insertAdjacentHTML() | Element | A method that inserts HTML text at a specific position relative to an element. For example, div.insertAdjacentHTML('afterbegin', '<p>First</p>') adds a paragraph as the first child. Faster than innerHTML for adding small pieces of HTML. |
insertAdjacentText() | Element | A method that inserts plain text at a specific position relative to an element. Unlike insertAdjacentHTML, it treats everything as text (HTML tags won't be rendered). For example, div.insertAdjacentText('beforeend', 'Hello') adds text at the end. Introduced in: |
insertBefore() | Node | A method that inserts a new child node before an existing child node. For example, parent.insertBefore(newNode, existingNode) places newNode right before existingNode. If the second parameter is null, it adds to the end. Introduced in: |
instanceof | Operators | An operator that checks if an object is an instance of a specific class or constructor. For example, myArray instanceof Array returns true, myDate instanceof Date returns true. Useful for type checking. Introduced in: |
Int8Array | Typed Array | A typed array that holds 8-bit signed integers (numbers from -128 to 127). For example, let nums = new Int8Array([10, -20, 50]) creates an array for small integers. More memory-efficient than regular arrays for specific number ranges. |
Int16Array | Typed Array | A typed array that holds 16-bit signed integers (numbers from -32,768 to 32,767). For example, new Int16Array(10) creates an array with space for 10 integers in this range. |
Int32Array | Typed Array | A typed array that holds 32-bit signed integers (numbers from -2,147,483,648 to 2,147,483,647). For example, new Int32Array([1000000, -500000]) stores large integers efficiently. |
isArray() | Array | A static method of Array that checks if a value is an array. For example, Array.isArray([1, 2, 3]) returns true, Array.isArray("hello") returns false. The most reliable way to check for arrays. |
isComposing | KeyboardEvent | A property of keyboard events that indicates whether the user is composing text using an input method editor (IME), common for Asian languages. When true, you should usually ignore the key event to avoid interfering with text composition. Introduced in: |
isContentEditable | Element | A property that returns true if an element's content can be edited by the user (like having contenteditable="true" attribute). For example, checking element.isContentEditable before allowing editing operations. Introduced in: |
isDefaultNamespace() | Node | A node method that checks if the specified namespace URI is the default namespace. Returns true or false. Mainly used in XML and SVG documents where namespace management matters. |
isEqualNode() | Node | A node method that checks if two nodes are equal in content and attributes. For example, node1.isEqualNode(node2) returns true if both have the same tag, attributes, and children, even if they're different objects. |
isExtensible() | Object | An Object static method that checks if new properties can be added to an object. For example, Object.isExtensible(myObj) returns true unless the object has been sealed or frozen. |
isFinite() | Global | A global function that checks if a value is a finite number (not Infinity, -Infinity, or NaN). For example, isFinite(100) returns true, isFinite(1/0) returns false. Use Number.isFinite() for stricter checking that doesn't convert types. Introduced in: |
isFrozen() | Object | An Object static method that checks if an object is frozen (cannot be modified at all - no adding, deleting, or changing properties). For example, Object.isFrozen(myObj) returns true if the object was frozen with Object.freeze(). Introduced in: |
isId | Attr | An attribute node property indicating whether the attribute represents an ID-type attribute. Rarely used in modern JavaScript, as you typically access ids through the element's id property directly. |
isInteger() | Number | A Number static method that checks if a value is an integer (whole number). For example, Number.isInteger(5) returns true, Number.isInteger(5.5) returns false. More reliable than checking with % operator. Introduced in: |
isNaN() | Global | A global function that checks if a value is NaN (Not-a-Number). For example, isNaN("hello") returns true after converting to number. Better to use Number.isNaN() which doesn't convert types first: Number.isNaN("hello") returns false, Number.isNaN(NaN) returns true. Introduced in: |
isSafeInteger() | Number | A Number static method that checks if a value is a safe integer (an integer that can be exactly represented in JavaScript, between -(2⁵³ - 1) and 2⁵³ - 1). For example, Number.isSafeInteger(9007199254740991) returns true. Introduced in: |
isSameNode() | Node | A node method that checks if two node references point to the exact same node object. For example, node1.isSameNode(node2) returns true only if they're literally the same object, not just equal content. Now you can usually just use ===. |
isSealed() | Object | An Object static method that checks if an object is sealed (cannot add or delete properties, but can modify existing ones). For example, Object.isSealed(myObj) returns true if sealed with Object.seal(). Introduced in: |
isSupported() | Node | A deprecated node method that checked if a DOM feature was supported. It's no longer recommended; use feature detection (checking if a property/method exists) instead. |
isTrusted | Event | An event property that indicates whether the event was triggered by a real user action (true) or by JavaScript code (false). For example, a click from an actual mouse click has event.isTrusted = true, but element.click() in code has it as false. Introduced in: |
item() | HTMLCollection | A method on collections (like NodeList or HTMLCollection) that returns the element at a specific index. For example, document.images.item(0) gets the first image. Usually, bracket notation is simpler: document.images[0]. |
join() | Array | An array method that combines all elements into a single string, with a separator between each element. For example, [1, 2, 3].join('-') returns "1-2-3", ['a', 'b'].join('') returns "ab". Default separator is comma. Introduced in: |
key | Global | In objects: represents a property name. In localStorage/sessionStorage: the name of the stored item. In keyboard events: the actual key pressed (like "a", "Enter", "ArrowUp"). In Maps: one half of the key-value pair used for lookups. Introduced in: |
key() | Storage | A Storage method (localStorage/sessionStorage) that returns the name of a key at a specific index. For example, localStorage.key(0) returns the name of the first stored item. Useful for iterating through all stored keys. Introduced in: |
keyCode | KeyboardEvent | A deprecated keyboard event property that returned a numeric code for the pressed key. For example, 'Enter' was 13, 'A' was 65. Use event.key or event.code instead in modern code - they give more readable values like "Enter" or "KeyA"。 |
keys() | Object | For objects: Object.keys(obj) returns an array of the object's property names. For arrays: array.keys() returns an iterator of index numbers. For Maps: map.keys() returns an iterator of keys. For example, Object.keys({a: 1, b: 2}) returns ['a', 'b']. Introduced in: |
lang | Element | A property that gets or sets the language code of an element's content. For example, element.lang = 'es' marks content as Spanish, helping screen readers and search engines. Can be set in HTML as <div lang="fr">. Introduced in: |
language | Navigator | A navigator property that returns the user's preferred language setting (like "en-US" for American English or "es-ES" for Spanish from Spain). For example, navigator.language helps you display content in the user's language. Introduced in: |
lastChild | Node | A node property that returns the last child node (including text nodes and comments). For example, parent.lastChild might be a text node with whitespace. To get only element nodes, use lastElementChild instead. Introduced in: |
lastElementChild | Element | A property that returns the last child element (ignoring text nodes and comments). For example, if a <div> contains paragraphs, div.lastElementChild returns the last <p> element, skipping any trailing whitespace text nodes. Introduced in: |
lastIndex | RegExp | A property of regular expressions that stores the index where the next search should start, used with global or sticky flags. For example, when using /a/g.exec() repeatedly, lastIndex advances after each match. |
lastIndexOf() | Array, String | A method for arrays and strings that finds the last occurrence of a value, searching backwards. For example, "hello".lastIndexOf("l") returns 3 (the last 'l'), [1, 2, 1].lastIndexOf(1) returns 2 (the last 1 is at index 2). Returns -1 if not found. Introduced in: |
lastModified | Document | A document property that returns the date and time when the current document was last modified. For example, document.lastModified might return "12/15/2023 10:30:45". Useful for showing "last updated" information. Introduced in: |
length | Global | For arrays: the number of elements. For strings: the number of characters. For functions: the number of parameters. For NodeLists: the number of nodes. For example, [1,2,3].length is 3, "hello".length is 5. Introduced in: |
lengthComputable | ProgressEvent | A property of progress events that indicates whether the total size is known. When true, you can calculate percentage progress. For example, during file uploads, if event.lengthComputable is true, you can show a percentage bar. |
loaded | ProgressEvent | A property of progress events showing how much data has been transferred so far (in bytes). For example, during a file download, event.loaded tells you how many bytes have been downloaded. Used with total to calculate progress. |
localeCompare() | String | A string method that compares two strings according to local language rules, returning -1, 0, or 1 for less than, equal, or greater than. For example, "ä".localeCompare("z", "de") considers German alphabetical order. Better for sorting text than < or >. Introduced in: |
localStorage | Window | A browser storage object that saves data permanently (survives browser restarts) with no expiration. For example, localStorage.setItem('username', 'John') saves data, localStorage.getItem('username') retrieves it. Data is stored as strings and specific to the domain. Introduced in: |
location | Window | A window/document property that represents the current URL. You can read parts: location.href (full URL), location.pathname (path), [location.search](http://location.search) (query string). Setting it navigates to a new page: location.href = '[https://example.com'. Introduced in: |
log() | Console | A console method that outputs messages to the browser's developer console. For example, console.log("Hello", x, myObject) displays multiple values. Essential for debugging - shows what's happening in your code. You can log variables, objects, and messages. Introduced in: |
log10() | Math | A Math method that calculates the base-10 logarithm of a number. For example, Math.log10(100) returns 2 (because 10² = 100), Math.log10(1000) returns 3. Useful for scientific calculations and understanding number magnitude. |
log1p() | Math | A Math method that calculates the natural logarithm of (1 + x) more accurately than Math.log(1 + x) for very small values. For example, Math.log1p(0.0001) gives precise results. Used in specialized mathematical calculations. |
log2() | Math | A Math method that calculates the base-2 logarithm of a number. For example, Math.log2(8) returns 3 (because 2³ = 8), Math.log2(16) returns 4. Useful in computer science for understanding binary scales. |
LOG2E | Math | A Math constant equal to the base-2 logarithm of e (approximately 1.443). For example, Math.LOG2E is used to convert natural logarithms to base-2. Rarely needed outside specialized mathematical code. |
LOG10E | Math | A Math constant equal to the base-10 logarithm of e (approximately 0.434). For example, Math.LOG10E converts natural logarithms to base-10. Used in scientific and statistical calculations. |
map() | Array | An array method that creates a new array by transforming each element with a function. For example, [1, 2, 3].map(x => x * 2) returns [2, 4, 6], ['a', 'b'].map(s => s.toUpperCase()) returns ['A', 'B']. Original array is unchanged. Introduced in: |
match() | String | A string method that searches for matches using a regular expression. For example, "hello world".match(/o/g) returns ['o', 'o'] (all 'o' characters), "hello".match(/x/) returns null if no match. Returns an array of matches or null. Introduced in: |
matches() | Element | An element method that checks if the element matches a CSS selector. For example, element.matches('.active') returns true if the element has class "active", element.matches('div > p') checks if it's a <p> inside a <div>. Introduced in: |
matchMedia() | Window | A window method that creates a MediaQueryList object for testing CSS media queries. For example, window.matchMedia('(max-width: 600px)') creates an object you can check with .matches to see if the viewport is 600px or less. Useful for responsive JavaScript. Introduced in: |
max() | Math | A Math method that returns the largest of the given numbers. For example, Math.max(5, 10, 3) returns 10, Math.max(...[1, 5, 3]) with spread operator finds the max in an array. Returns -Infinity if no arguments. Introduced in: |
MAX_SAFE_INTEGER | Number | A Number constant representing the largest integer that can be safely represented in JavaScript (2⁵³ - 1, which is 9,007,199,254,740,991). For example, Number.MAX_SAFE_INTEGER + 1 is still safe, but larger integers may lose precision. Introduced in: |
MIN_SAFE_INTEGER | Number | A Number constant representing the smallest integer that can be safely represented (-(2⁵³ - 1), which is -9,007,199,254,740,991). Numbers smaller than this may not be represented accurately. Introduced in: |
MAX_VALUE | Number | A Number constant representing the largest positive number JavaScript can represent (approximately 1.79 × 10³⁰⁸). For example, any calculation larger than Number.MAX_VALUE returns Infinity. |
MIN_VALUE | Number | A Number constant representing the smallest positive number greater than zero JavaScript can represent (approximately 5 × 10⁻³²⁴). Not the most negative number - that's -Number.MAX_VALUE. |
message | Error | A property of Error objects containing the error description. For example, when you catch an error: catch(error) { console.log(error.message); } shows what went wrong. You set it when creating errors: throw new Error("Something failed"). Introduced in: |
metaKey | KeyboardEvent, MouseEvent | A keyboard/mouse event property that is true if the Meta key (⌘ Command on Mac, ⊞ Windows key on PC) was pressed during the event. For example, checking event.metaKey detects Cmd+Click shortcuts. Introduced in: |
min() | Math | A Math method that returns the smallest of the given numbers. For example, Math.min(5, 10, 3) returns 3, Math.min(...[1, 5, 3]) finds the minimum in an array. Returns Infinity if no arguments. Introduced in: |
multiline | RegExp | A property of regular expressions indicating whether the multiline flag is set. When true (using /pattern/m flag), ^ and $ match the start/end of each line, not just the whole string. |
moveBy() | Window | A window method that moves the browser window by a specified number of pixels. For example, window.moveBy(50, 100) moves the window 50 pixels right and 100 pixels down from its current position. Often blocked by browsers for security. |
moveTo() | Window | A window method that moves the browser window to specific screen coordinates. For example, window.moveTo(100, 200) moves the window so its top-left corner is at screen position (100, 200). Often blocked in modern browsers. |
movementX | MouseEvent | A mouse event property showing how many pixels the mouse moved horizontally since the last mousemove event. For example, event.movementX might be 5 if the mouse moved 5 pixels right. Useful for tracking mouse velocity or creating custom drag interactions. |
movementY | MouseEvent | A mouse event property showing how many pixels the mouse moved vertically since the last mousemove event. Negative values mean upward movement, positive means downward. |
name | Global | Can mean different things: for elements, the name attribute value; for functions, the function's name; for errors, the error type (like "TypeError"); for windows, the window name. For example, function myFunc() {} has [myFunc.name](http://myFunc.name) === "myFunc". Introduced in: |
namedItem() | HTMLCollection | A method on HTMLCollections that returns the element with the specified name or id. For example, document.forms.namedItem('loginForm') gets the form with name or id "loginForm". Usually you can just use document.forms['loginForm']. |
namespaceURI | Node | A node property that returns the namespace URI of the element, mainly relevant for XML and SVG. For example, SVG elements have namespace "http://www.w3.org/2000/svg". Regular HTML elements return "http://www.w3.org/1999/xhtml". |
new | Operators | A keyword that creates a new instance of an object from a constructor function or class. For example, new Date() creates a date object, new Array(5) creates an array with 5 empty slots. Calls the constructor and returns the new object. Introduced in: |
new Array() | Array | Creates a new array. For example, new Array(1, 2, 3) creates [1, 2, 3], new Array(5) creates an empty array with length 5. Usually simpler to use literal syntax: [] or [1, 2, 3]. Introduced in: |
new Date() | Date | Creates a new Date object representing a specific date and time. For example, new Date() creates the current moment, new Date('2024-01-15') creates that specific date, new Date(2024, 0, 15) creates January 15, 2024 (months start at 0). Introduced in: |
new Map() | Map | Creates a new Map object that stores key-value pairs where keys can be any type (unlike regular objects where keys are strings). For example, let map = new Map(); map.set('name', 'John'); stores values that can be retrieved with map.get('name'). Introduced in: |
new Promise() | Promise | Creates a Promise object for handling asynchronous operations. For example, new Promise((resolve, reject) => { setTimeout(() => resolve('done'), 1000); }) creates a promise that resolves after 1 second. Use .then() to handle the result. Introduced in: |
new Set() | Set | Creates a Set object that stores unique values (no duplicates). For example, let s = new Set([1, 2, 2, 3]) creates a set with only {1, 2, 3}, automatically removing the duplicate 2. Use .add(), .has(), and .delete() to work with it. Introduced in: |
newURL | HashChangeEvent | A property of HashChangeEvent that provides the new URL after the hash (the part after #) changes. For example, when navigating from page.html#old to page.html#new, event.newURL contains the full new URL. |
newValue | StorageEvent | A property of StorageEvent that contains the new value after a localStorage or sessionStorage item was changed. For example, if localStorage.setItem('user', 'Jane') changed 'John' to 'Jane', event.newValue would be 'Jane'. |
nextSibling | Node | A node property that returns the next sibling node (the node immediately after this one with the same parent), including text nodes. For example, in <div><p></p> <span></span></div>, the paragraph's nextSibling might be a text node (the space). Use nextElementSibling to skip text nodes. Introduced in: |
nextElementSibling | Element | A property that returns the next sibling element, skipping text nodes and comments. For example, in <div><p></p> <span></span></div>, the paragraph's nextElementSibling is the span element, ignoring the whitespace between them. Introduced in: |
nodeName | Node | A node property that returns the name of the node. For elements, it's the uppercase tag name (like "DIV", "P"). For text nodes, it's "#text". For documents, it's "#document". For example, myParagraph.nodeName returns "P". Introduced in: |
nodeType | Node | A node property that returns a number indicating the node type. For example, 1 means element node, 3 means text node, 8 means comment, 9 means document. Useful for checking what kind of node you're dealing with: if (node.nodeType === 1) checks for elements. Introduced in: |
nodeValue | Node | A node property that contains the text content of text nodes and comments, but null for element nodes. For example, in <p>Hello</p>, the text node's nodeValue is "Hello". For elements, use textContent or innerHTML instead. Introduced in: |
normalize() | Node | A node method that combines adjacent text nodes into one and removes empty text nodes. For example, if DOM manipulation created multiple text nodes next to each other, element.normalize() merges them into a single text node. Cleans up the DOM structure. |
normalizeDocument() | Document | A deprecated document method that was supposed to normalize the entire document structure. No longer recommended - use normalize() on specific nodes instead if needed. |
now() | Date | A Date static method that returns the current timestamp (milliseconds since January 1, 1970). For example, Date.now() might return 1704067200000. Useful for measuring time elapsed: let start = Date.now(); /* do something */ let elapsed = Date.now() - start;Introduced in: |
Number() | Number | A function that converts values to numbers. For example, Number("42") returns 42, Number("3.14") returns 3.14, Number("hello") returns NaN. More strict than parseInt() - the whole string must be a valid number. Introduced in: |
of() | Array | A static method for creating arrays or typed arrays from arguments. For example, Array.of(1, 2, 3) creates [1, 2, 3], Array.of(7) creates [7] (not an empty array of length 7 like new Array(7)). More predictable than the Array constructor. Introduced in: |
offsetHeight | Element | A property that returns the visible height of an element in pixels, including padding and border, but not margin. For example, if a div has 100px content height, 10px padding on each side, and 5px border, div.offsetHeight returns 130. Introduced in: |
offsetWidth | Element | A property that returns the visible width of an element in pixels, including padding and border, but not margin. Useful for getting the total rendered width of an element. Introduced in: |
offsetLeft | Element | A property that returns the number of pixels the element is offset from the left edge of its offsetParent (usually the nearest positioned ancestor). For example, element.offsetLeft might return 50 if it's 50 pixels from its parent's left edge. Introduced in: |
offsetParent | Element | A property that returns the nearest ancestor element that is positioned (has position: relative, absolute, or fixed). This is the reference point for offsetLeft and offsetTop. Returns null if the element is hidden or has position: fixed. Introduced in: |
offsetTop | Element | A property that returns the number of pixels the element is offset from the top edge of its offsetParent. For example, element.offsetTop tells you how far down the element is positioned from its reference point. Introduced in: |
offsetX | MouseEvent | A mouse event property giving the X coordinate of the mouse pointer relative to the target element's padding edge. For example, event.offsetX might be 20 if you clicked 20 pixels from the element's left side. Introduced in: |
offsetY | MouseEvent | A mouse event property giving the Y coordinate of the mouse pointer relative to the target element's padding edge. For example, event.offsetY tells how far down from the element's top you clicked. Introduced in: |
oldURL | HashChangeEvent | A property of HashChangeEvent that provides the old URL before the hash changed. For example, when navigating from page.html#section1 to page.html#section2, event.oldURL contains the first URL. |
oldValue | StorageEvent | A property of StorageEvent that contains the previous value before a localStorage or sessionStorage item was changed. null if the item was newly created. |
onabort | GlobalEventHandlers | An event handler property that triggers when loading of a resource is aborted. For example, img.onabort = function() { alert("Image loading cancelled"); } runs if image loading stops. Modern code usually uses addEventListener('abort', handler). Introduced in: |
onafterprint | Window | An event handler property that runs after the print dialog is closed or printing is complete. For example, window.onafterprint = function() { console.log("Finished printing"); } executes code after printing. Useful for cleaning up print-specific styling. Modern code uses addEventListener('afterprint', handler). Introduced in: |
onanimationend | Element | An event handler that triggers when a CSS animation finishes playing. For example, element.onanimationend = function() { alert("Animation done!"); } runs when the animation completes. Useful for chaining actions after animations. Introduced in: |
onanimationiteration | Element | An event handler that fires each time a CSS animation completes one cycle and starts repeating. For example, if an animation repeats 3 times, this event fires at the end of cycles 1 and 2. Useful for tracking animation progress. Introduced in: |
onanimationstart | Element | An event handler that triggers when a CSS animation begins playing. For example, element.onanimationstart = function() { console.log("Animation started"); } runs at the start. Useful for initializing states when animations begin. Introduced in: |
onbeforeprint | Window | An event handler that runs just before the print dialog opens. For example, window.onbeforeprint = function() { document.body.classList.add('print-mode'); } can add special styles before printing. Useful for preparing print-friendly layouts. Introduced in: |
onbeforeunload | Window | An event handler that triggers when the user is about to leave the page (closing tab, navigating away, or refreshing). For example, window.onbeforeunload = function(e) { return "Unsaved changes will be lost"; } can warn users about unsaved work. The browser shows a confirmation dialog. Introduced in: |
onblur | Element | An event handler that fires when an element loses focus (user clicks away or tabs to another element). For example, input.onblur = function() { validateField(this); } can validate input when users leave a field. Useful for form validation. Introduced in: |
oncanplay | HTMLMediaElement | An event handler for media elements (video/audio) that triggers when enough data has loaded to start playing. For example, video.oncanplay = function() { console.log("Ready to play"); } runs when the media can begin, though it might buffer later. Introduced in: |
oncanplaythrough | HTMLMediaElement | An event handler for media elements that fires when the browser estimates it can play through the entire video/audio without stopping to buffer. For example, video.oncanplaythrough = function() { [video.play](http://video.play)(); } auto-plays when fully loaded. Introduced in: |
onchange | Element | An event handler that triggers when an input element's value changes AND the user moves focus away. For example, select.onchange = function() { console.log(this.value); } runs when you select a dropdown option. For real-time changes, use oninput instead. Introduced in: |
onclick | Element | An event handler that runs when an element is clicked. For example, button.onclick = function() { alert("Clicked!"); } shows an alert when the button is clicked. One of the most commonly used events. Works with mouse clicks and keyboard activation. Introduced in: |
oncontextmenu | Document | An event handler that fires when the user right-clicks (opens context menu). For example, document.oncontextmenu = function(e) { e.preventDefault(); return false; } can disable right-clicking. Useful for custom context menus or protecting content. Introduced in: |
oncopy | Document | An event handler that triggers when the user copies content (Ctrl+C or right-click copy). For example, document.oncopy = function(e) { e.preventDefault(); } can prevent copying. Useful for tracking or modifying copied content. Introduced in: |
oncut | Element | An event handler that fires when the user cuts content (Ctrl+X). For example, input.oncut = function(e) { console.log("Content cut"); } runs when text is cut from an input. Can be used to track or prevent cutting. Introduced in: |
ondblclick | Element | An event handler that triggers when an element is double-clicked. For example, div.ondblclick = function() { this.classList.toggle('expanded'); } can expand/collapse on double-click. Note: double-click also triggers two click events. Introduced in: |
ondrag | Element | An event handler that fires continuously while an element is being dragged. For example, element.ondrag = function(e) { console.log(e.clientX, e.clientY); } tracks the mouse position during drag. Part of the drag-and-drop API. Introduced in: |
ondragend | Element | An event handler that triggers when a drag operation ends (user releases the mouse). For example, element.ondragend = function() { console.log("Drag finished"); } runs when dragging stops, whether it was dropped or cancelled. Introduced in: |
ondragenter | Element | An event handler that fires when a dragged element enters a valid drop target. For example, dropzone.ondragenter = function() { this.classList.add('highlight'); } can highlight drop zones when items are dragged over them. Introduced in: |
ondragleave | Element | An event handler that triggers when a dragged element leaves a drop target. For example, dropzone.ondragleave = function() { this.classList.remove('highlight'); } removes highlighting when the dragged item leaves the drop zone. Introduced in: |
ondragover | Element | An event handler that fires continuously while a dragged element is over a drop target. For example, dropzone.ondragover = function(e) { e.preventDefault(); } must prevent default to allow dropping. Called repeatedly during hover. Introduced in: |
ondragstart | Element | An event handler that triggers when the user starts dragging an element. For example, element.ondragstart = function(e) { e.dataTransfer.setData('text', [this.id](http://this.id)); } sets the data being transferred. First event in the drag-and-drop sequence. Introduced in: |
ondrop | Element | An event handler that fires when a dragged element is dropped onto a valid drop target. For example, dropzone.ondrop = function(e) { let data = e.dataTransfer.getData('text'); } retrieves the dropped data. Must prevent default in ondragover for this to work. Introduced in: |
ondurationchange | HTMLMediaElement | An event handler for media elements that triggers when the duration of audio/video changes. For example, video.ondurationchange = function() { console.log(video.duration); } runs when duration metadata loads. Useful for updating progress bars. Introduced in: |
onemptied | HTMLMediaElement | An event handler for media elements that fires when media becomes unavailable (network failure, source removed). For example, video.onemptied = function() { console.log("Media lost"); } can handle errors. The media element becomes empty. Introduced in: |
onended | HTMLMediaElement | An event handler for media elements that triggers when playback reaches the end. For example, audio.onended = function() { console.log("Finished playing"); } runs when audio/video completes. Useful for playing next track or showing replay buttons. Introduced in: |
onerror | Element | An event handler that fires when an error occurs loading a resource (image, script, media) or during script execution. For example, img.onerror = function() { this.src = 'fallback.jpg'; } loads a fallback image if the original fails. Also catches JavaScript errors on window. Introduced in: |
onfocus | Element | An event handler that triggers when an element receives focus (user clicks into it or tabs to it). For example, input.onfocus = function() { [this.select](http://this.select)(); } can auto-select text when focusing. Useful for highlighting active fields. Introduced in: |
onfocusin | Element | An event handler that fires when an element or its descendants are about to receive focus. Unlike onfocus, this event bubbles (propagates to parent elements). For example, form.onfocusin = function(e) { console.log([e.target](http://e.target)); } can track focus on any form field. Introduced in: |
onfocusout | Element | An event handler that triggers when an element or its descendants are about to lose focus. Like onfocusin, this bubbles to parents. For example, form.onfocusout = function(e) { validateField([e.target](http://e.target)); } can validate fields as users tab through a form. Introduced in: |
onfullscreenchange | Document | An event handler that fires when an element enters or exits fullscreen mode. For example, document.onfullscreenchange = function() { console.log(document.fullscreenElement); } can detect fullscreen state changes. Useful for updating UI when fullscreen toggles. Introduced in: |
onfullscreenerror | Element | An event handler that triggers when entering fullscreen mode fails (due to permissions or technical issues). For example, element.onfullscreenerror = function() { alert("Fullscreen not available"); } can notify users of failures. Introduced in: |
onhashchange | Window | An event handler that fires when the URL hash (the part after #) changes. For example, window.onhashchange = function() { loadSection(location.hash); } can load content based on hash. Useful for single-page applications and navigation without page reloads. Introduced in: |
oninput | Element | An event handler that triggers immediately every time an input element's value changes. For example, input.oninput = function() { console.log(this.value); } runs with each keystroke. Better than onchange for real-time validation or search-as-you-type features. Introduced in: |
oninvalid | Element | An event handler that fires when a form field fails HTML5 validation (required, pattern, min/max, etc.). For example, input.oninvalid = function(e) { [e.target](http://e.target).setCustomValidity("Please enter a valid email"); } can show custom error messages. Introduced in: |
onkeydown | Document | An event handler that triggers when a key is pressed down. For example, document.onkeydown = function(e) { if(e.key === 'Escape') closeModal(); } can respond to keyboard shortcuts. Fires before the character appears and repeats if held. Introduced in: |
onkeypress | Element | A deprecated event handler that fired when a character key was pressed. For example, input.onkeypress = function(e) { console.log(e.key); } ran for letter/number keys but not modifier keys. Use onkeydown instead in modern code. Introduced in: |
onkeyup | Element | An event handler that triggers when a key is released. For example, input.onkeyup = function() { searchResults(this.value); } can perform searches after typing. Fires once per key release, after the character appears in the field. Introduced in: |
onLine | Navigator | A navigator property (not an event) that returns true if the browser has network connection, false if offline. For example, if(navigator.onLine) { fetchData(); } else { useCache(); } can check connectivity. Listen to online/offline events for changes. Introduced in: |
onload | Window | An event handler that fires when a resource has completely loaded. For window: runs when page and all resources (images, styles, scripts) finish loading. For images: when image loads. For example, window.onload = function() { initApp(); } runs after everything loads. Introduced in: |
onloadeddata | HTMLMediaElement | An event handler for media elements that triggers when the first frame of media is loaded. For example, video.onloadeddata = function() { console.log("First frame ready"); } runs when initial data arrives. Earlier than canplay. Introduced in: |
onloadedmetadata | HTMLMediaElement | An event handler for media elements that fires when metadata (duration, dimensions, etc.) has loaded. For example, video.onloadedmetadata = function() { console.log(video.duration); } can display total length. Happens before actual media data loads. Introduced in: |
onloadstart | HTMLMediaElement | An event handler for media elements or AJAX requests that triggers when loading begins. For example, video.onloadstart = function() { showLoadingSpinner(); } can show loading indicators when media starts downloading. Introduced in: |
onmessage | Window | An event handler that fires when a message is received via postMessage (for cross-window communication), WebSockets, or Server-Sent Events. For example, window.onmessage = function(e) { console.log(e.data); } receives messages from other windows or iframes. |
onmousedown | Element | An event handler that triggers when a mouse button is pressed down on an element. For example, element.onmousedown = function() { isDragging = true; } can start drag operations. Fires before onclick. Introduced in: |
onmouseenter | Element | An event handler that fires when the mouse pointer enters an element's boundaries. Unlike onmouseover, this does NOT bubble and doesn't trigger when moving over child elements. For example, div.onmouseenter = function() { this.style.background = 'blue'; } changes background on hover. Introduced in: |
onmouseleave | Element | An event handler that triggers when the mouse pointer leaves an element. Like onmouseenter, this doesn't bubble. For example, div.onmouseleave = function() { this.style.background = ''; } removes hover effects. Cleaner than onmouseout for most use cases. Introduced in: |
onmousemove | Element | An event handler that fires continuously as the mouse moves over an element. For example, canvas.onmousemove = function(e) { drawAt(e.clientX, e.clientY); } can create drawing apps. Fires very frequently, so use carefully for performance. Introduced in: |
onmouseover | Element | An event handler that triggers when the mouse enters an element or its children. Unlike onmouseenter, this bubbles and fires when hovering over child elements too. For example, useful for menus but can be tricky with nested elements. Introduced in: |
onmouseout | Element | An event handler that fires when the mouse leaves an element or enters a child element. Bubbles, unlike onmouseleave. For example, can trigger unexpectedly with nested HTML. Usually onmouseleave is simpler to work with. Introduced in: |
onmouseup | Element | An event handler that triggers when a mouse button is released. For example, element.onmouseup = function() { isDragging = false; } can end drag operations. Fires before onclick (which requires down AND up on same element). Introduced in: |
onmousewheel | Element | A deprecated event handler that fired when the mouse wheel scrolled. For example, element.onmousewheel = function(e) { console.log(e.wheelDelta); } tracked scrolling. Use the standard onwheel event instead in modern code. |
onoffline | Window | An event handler that triggers when the browser loses network connection. For example, window.onoffline = function() { showOfflineMessage(); } can notify users they're offline. Complements navigator.onLine property. |
ononline | Window | An event handler that fires when the browser regains network connection. For example, window.ononline = function() { syncData(); } can sync cached changes when connection returns. Useful for offline-capable apps. |
onopen | WebSocket | An event handler for WebSockets and Server-Sent Events that triggers when a connection is established. For example, websocket.onopen = function() { console.log("Connected"); } runs when the connection succeeds. Means you can start sending messages. |
onpagehide | Window | An event handler that fires when the user navigates away from the page or the page goes into the browser's back-forward cache. For example, window.onpagehide = function(e) { saveState(); } can save data before leaving. More reliable than onunload. Introduced in: |
onpageshow | Window | An event handler that triggers when the page loads or is restored from the back-forward cache. For example, window.onpageshow = function(e) { if(e.persisted) refreshData(); } can update stale cached data. The persisted property tells if from cache. Introduced in: |
onpaste | Element | An event handler that fires when the user pastes content (Ctrl+V or right-click paste). For example, input.onpaste = function(e) { e.preventDefault(); } can prevent pasting. Useful for validating or cleaning pasted content. Introduced in: |
onpause | HTMLMediaElement | An event handler for media elements that triggers when playback is paused. For example, video.onpause = function() { showPlayButton(); } can update UI when video pauses. Useful for custom media controls. Introduced in: |
onplay | HTMLMediaElement | An event handler for media elements that fires when playback starts (after being paused or stopped). For example, audio.onplay = function() { updatePlayButton(); } can update controls. Happens when play() is called or user clicks play. Introduced in: |
onplaying | HTMLMediaElement | An event handler for media elements that triggers when playback is ready to continue after being paused or delayed due to buffering. For example, video.onplaying = function() { hideLoadingSpinner(); } runs when actually playing resumes. Introduced in: |
onpopstate | Window | An event handler that fires when the browser's history changes (user clicks back/forward buttons). For example, window.onpopstate = function(e) { loadPage(e.state); } can update content without page reload. Used in single-page applications for navigation. Introduced in: |
onprogress | XMLHttpRequest | An event handler that triggers periodically while data is loading (for media elements, AJAX requests, file uploads). For example, xhr.upload.onprogress = function(e) { let percent = (e.loaded/e.total)*100; } calculates upload progress for progress bars. Introduced in: |
onratechange | HTMLMediaElement | An event handler for media elements that fires when playback speed changes. For example, video.onratechange = function() { console.log(video.playbackRate); } runs when playback rate is adjusted (normal speed, fast-forward, slow-motion). Introduced in: |
onresize | Window | An event handler that triggers when the browser window is resized. For example, window.onresize = function() { adjustLayout(); } can adapt layout to new dimensions. Fires continuously while resizing, so consider debouncing for performance. Introduced in: |
onreset | Element | An event handler that fires when a form is reset (user clicks reset button or form.reset() is called). For example, form.onreset = function() { clearErrors(); } can clean up validation messages. Can prevent reset by returning false. Introduced in: |
onscroll | Element | An event handler that triggers when an element's scroll position changes. For example, window.onscroll = function() { if(window.scrollY > 100) showBackToTop(); } can show/hide elements based on scroll position. Fires frequently, consider throttling. Introduced in: |
onsearch | Element | An event handler for search input fields (<input type="search">) that fires when the user initiates a search (presses Enter or clicks the search button). For example, searchInput.onsearch = function() { performSearch(this.value); } can trigger searches. Introduced in: |
onseeked | HTMLMediaElement | An event handler for media elements that triggers after a seeking operation completes (user finishes dragging the time slider). For example, video.onseeked = function() { console.log("Jumped to", video.currentTime); } runs when seeking ends. Introduced in: |
onseeking | HTMLMediaElement | An event handler for media elements that fires when a seeking operation begins (user starts dragging the time slider). For example, video.onseeking = function() { showLoadingSpinner(); } can show loading while finding the new position. Introduced in: |
onselect | Element | An event handler that triggers when text is selected in an input or textarea. For example, input.onselect = function() { console.log("Selected:", this.value.substring(this.selectionStart, this.selectionEnd)); } can detect text selection. Introduced in: |
onshow | Element | A rarely used event handler that was intended for context menus and other showing/hiding elements. For example, for showing context menus. Support is limited and inconsistent across browsers. |
onstalled | HTMLMediaElement | An event handler for media elements that fires when the browser is trying to fetch media data but it's not arriving. For example, video.onstalled = function() { showBufferingMessage(); } can indicate network problems. Different from waiting (which is expected buffering). Introduced in: |
onstorage | Window | An event handler that triggers when localStorage or sessionStorage is modified in another window/tab from the same origin. For example, window.onstorage = function(e) { if(e.key === 'theme') updateTheme(); } can sync data across tabs. Doesn't fire in the tab that made the change. Introduced in: |
onsubmit | Element | An event handler that fires when a form is submitted (user clicks submit button or presses Enter in a field). For example, form.onsubmit = function(e) { e.preventDefault(); validateForm(); } can validate before submission. Returning false prevents submission. Introduced in: |
onsuspend | HTMLMediaElement | An event handler for media elements that triggers when the browser intentionally stops fetching media data (enough is buffered or loading is deferred). For example, video.onsuspend = function() { console.log("Loading suspended"); } can track loading state. Introduced in: |
ontimeupdate | HTMLMediaElement | An event handler for media elements that fires repeatedly as playback position changes. For example, video.ontimeupdate = function() { updateProgressBar(video.currentTime); } can update custom progress bars. Fires multiple times per second during playback. Introduced in: |
ontoggle | Element | An event handler that triggers when a <details> element is opened or closed. For example, details.ontoggle = function() { console.log(this.open ? "Expanded" : "Collapsed"); } can track accordion state. Also used for dialog show/hide events. Introduced in: |
ontouchcancel | Element | An event handler for touch devices that fires when a touch event is interrupted (phone call, alert, etc.). For example, element.ontouchcancel = function() { resetTouchState(); } can clean up incomplete touch interactions. Means the touch won't complete normally. Introduced in: |
ontouchend | Element | An event handler for touch devices that triggers when the user lifts their finger from the screen. For example, button.ontouchend = function() { handleTap(); } detects tap completion. Similar to mouseup but for touch. Introduced in: |
ontouchmove | Element | An event handler for touch devices that fires continuously while a finger moves across the screen. For example, canvas.ontouchmove = function(e) { drawAt(e.touches[0].clientX, e.touches[0].clientY); } can create drawing apps. Fires frequently during dragging. Introduced in: |
ontouchstart | Element | An event handler for touch devices that triggers when a finger touches the screen. For example, element.ontouchstart = function(e) { e.preventDefault(); } can prevent default touch behaviors. Similar to mousedown but for touch. First event in touch sequence. Introduced in: |
ontransitionend | Element | An event handler that fires when a CSS transition completes. For example, element.ontransitionend = function() { this.classList.remove('transitioning'); } runs after animations finish. Useful for cleanup or chaining transitions. One event per transitioned property. Introduced in: |
onunload | Window | An event handler that triggers when the page is being unloaded (user navigates away or closes tab). For example, window.onunload = function() { saveData(); } can save state. Warning: unreliable in modern browsers, use onbeforeunload or onpagehide instead. Introduced in: |
onvolumechange | HTMLMediaElement | An event handler for media elements that fires when volume changes or audio is muted/unmuted. For example, video.onvolumechange = function() { updateVolumeIcon(); } can update UI to reflect volume changes. Introduced in: |
onwaiting | HTMLMediaElement | An event handler for media elements that triggers when playback stops because it needs to buffer more data. For example, video.onwaiting = function() { showLoadingSpinner(); } can show buffering indicators. Expected during normal streaming. Introduced in: |
onwheel | Element | An event handler that fires when the mouse wheel or trackpad is scrolled. For example, element.onwheel = function(e) { e.preventDefault(); customZoom(e.deltaY); } can create custom zoom behavior. Replaces the deprecated onmousewheel. Introduced in: |
open() | Window | A window method that opens a new browser window or tab. For example, window.open('https://example.com', '_blank') opens a URL in a new tab. Can specify size, position, and features. Also a method on dialogs, WebSockets, and databases to open/connect them. |
opener | Window | A window property that references the window that opened the current window (if opened via window.open()). For example, window.opener.location.reload() can refresh the parent window. null if not opened by another window. Security risk if not careful. |
origin | Location | A location property that returns the protocol, hostname, and port of a URL. For example, window.location.origin might be "https://example.com:8080". Read-only. Also an event property showing the origin of messages in cross-origin communication. Introduced in: |
outerHeight | Window | A window property giving the height of the entire browser window in pixels, including toolbars, address bar, and borders. For example, window.outerHeight might be 900 for the full window. Different from innerHeight which excludes browser UI. Introduced in: |
outerHTML | Element | A property that gets or sets an element's HTML including the element itself. For example, div.outerHTML = '<span>New</span>' replaces the div with a span. Reading it gives the element and all its contents as HTML string. Introduced in: |
outerText | Element | A deprecated property similar to outerHTML but for text only. Setting it replaces the element with text (no HTML rendering). For example, element.outerText = 'Hello' removes the element and puts plain text. Use textContent or outerHTML instead. |
outerWidth | Window | A window property giving the width of the entire browser window in pixels, including sidebars and borders. For example, window.outerWidth includes all browser chrome. Different from innerWidth which is just the viewport. Introduced in: |
ownerDocument | Node | A node property that returns the document object that contains the node. For example, element.ownerDocument returns the document. Useful when working with nodes from different documents or in iframes. Introduced in: |
padEnd() | String | A string method that pads the end of a string with another string until it reaches a target length. For example, "5".padEnd(3, "0") returns "500", "Hi".padEnd(5, ".") returns "Hi...". Useful for formatting fixed-width text. Introduced in: |
padStart() | String | A string method that pads the beginning of a string until it reaches a target length. For example, "5".padStart(3, "0") returns "005", useful for zero-padding numbers. "7".padStart(2, "0") returns "07". Introduced in: |
pageX | MouseEvent | A mouse event property giving the X coordinate (horizontal position) of the mouse relative to the entire document, including scrolled portions. For example, if the page is scrolled down 500px and you click 100px from left, pageX is 100. Introduced in: |
pageXOffset | Window | A window property (alias for scrollX) that returns how many pixels the document is scrolled horizontally. For example, window.pageXOffset might be 0 if not scrolled, or 200 if scrolled 200px right. Read-only. Introduced in: |
pageY | MouseEvent | A mouse event property giving the Y coordinate (vertical position) of the mouse relative to the entire document. For example, if you click 300px down the page, pageY is 300 regardless of scroll position. Introduced in: |
pageYOffset | Window | A window property (alias for scrollY) that returns how many pixels the document is scrolled vertically. For example, window.pageYOffset tells how far down the page has been scrolled. Useful for scroll-based effects. Introduced in: |
parent | Window | A window property that references the parent window. If the current window is in an iframe, parent references the outer window. For example, window.parent.document accesses the parent document. Equals self if not in a frame. Introduced in: |
parentNode | Node | A node property that returns the parent node of the current node. For example, if a paragraph is inside a div, paragraph.parentNode returns the div. Returns null for detached nodes or the document. Introduced in: |
parentElement | Element | A property similar to parentNode but only returns parent elements (not documents or fragments). For example, element.parentElement gets the parent element. Usually the same as parentNode but more specific type. Introduced in: |
parse() | JSON | A JSON static method that converts a JSON string into a JavaScript object. For example, JSON.parse('{"name":"John","age":30}') creates an object with name and age properties. Throws an error if the string isn't valid JSON. Introduced in: |
parseFloat() | Global | A global function that converts a string to a decimal number. For example, parseFloat("3.14") returns 3.14, parseFloat("10.5px") returns 10.5 (stops at first non-number). Returns NaN if it can't find a number at the start. Introduced in: |
parseInt() | Global | A global function that converts a string to an integer. For example, parseInt("42") returns 42, parseInt("10px") returns 10. Takes an optional radix (base): parseInt("1010", 2) returns 10 (binary). Ignores decimal parts. Introduced in: |
pathname | Location | A location property containing the path portion of a URL (everything after the domain, before the query string). For example, in "https://example.com/page/about/about.html?id=5", pathname is "/page/about.html". Can be set to navigate. |
persisted | PageTransitionEvent | A property of the pageshow event that indicates whether the page was loaded from the browser's back-forward cache. For example, event.persisted is true if the page was restored from cache (user clicked back). Useful for refreshing stale data. |
PI | Math | A Math constant equal to π (pi), approximately 3.14159. For example, Math.PI is used in circle calculations: let circumference = 2 * Math.PI * radius; or let area = Math.PI * radius * radius;. Introduced in: |
pixelDepth | Screen | A screen property that returns the color depth (bits per pixel) of the screen. For example, screen.pixelDepth might return 24 for 24-bit color (16.7 million colors). Same as colorDepth in modern browsers. |
platform | Navigator | A navigator property that returns a string identifying the operating system platform. For example, navigator.platform might be "Win32" (Windows), "MacIntel" (Mac), or "Linux x86_64". Deprecated in favor of userAgentData. |
pop() | Array | An array method that removes and returns the last element. For example, let arr = [1, 2, 3]; let last = arr.pop(); sets last to 3 and arr becomes [1, 2]. Modifies the original array. Returns undefined for empty arrays. Introduced in: |
port | Location | A location property containing the port number in the URL. For example, in "https://example.com:8080/page", port is "8080". Empty string if using default ports (80 for HTTP, 443 for HTTPS). Can be set to change the port. |
position | GeolocationPosition | In geolocation: an object containing coordinates (latitude, longitude, altitude) and accuracy information. In CSS: refers to element positioning (absolute, relative, fixed, sticky). Context-dependent property used in different APIs. |
positionError | GeolocationPositionError | An object passed to the geolocation error callback containing information about why getting location failed. For example, includes code (permission denied, position unavailable, timeout) and message properties explaining the error. |
positionOptions | Geolocation | An object used when requesting geolocation that specifies options like enableHighAccuracy (GPS vs network), timeout (max wait time in ms), and maximumAge (how old cached positions can be). For example, {enableHighAccuracy: true, timeout: 5000}. |
POSITIVE_INFINITY | Number | A Number constant representing positive infinity, larger than any other number. For example, 1/0 returns Number.POSITIVE_INFINITY, and Number.POSITIVE_INFINITY + 1000 still equals Number.POSITIVE_INFINITY. Introduced in: |
pow() | Math | A Math method that raises a number to a power (exponentiation). For example, Math.pow(2, 3) returns 8 (2³), Math.pow(10, 2) returns 100 (10²). Modern code can use the ** operator: 2**3 equals 8. Introduced in: |
preventDefault() | Event | An event method that prevents the default browser action for an event. For example, event.preventDefault() in a form submit handler stops the page from reloading, in a link click stops navigation, in a keydown handler stops the character from appearing. Introduced in: |
preventExtensions() | Object | An Object static method that prevents new properties from being added to an object. For example, Object.preventExtensions(obj) locks the object - you can modify or delete existing properties but not add new ones. Use isExtensible() to check. |
previousSibling | Node | A node property that returns the previous sibling node (the node immediately before this one with the same parent), including text nodes. For example, might return whitespace text nodes. Use previousElementSibling for elements only. Introduced in: |
previousElementSibling | Element | A property that returns the previous sibling element, skipping text nodes and comments. For example, in <div><p></p> <span></span></div>, the span's previousElementSibling is the paragraph, ignoring the whitespace between them. Returns null if there's no previous element. Introduced in: |
print() | window | A window method that opens the browser's print dialog to print the current page. For example, window.print() or just print() shows the print dialog. Often used with a "Print this page" button: <button onclick="window.print()">Print</button>. |
prompt() | window | A window method that displays a dialog box asking the user to enter text. For example, let name = prompt("What's your name?", "John"); shows a dialog with the question and default value "John". Returns the entered text or null if cancelled. Blocks code execution until user responds. |
prototype | Function | A property of constructor functions and classes that contains methods and properties shared by all instances. For example, Array.prototype.push is the push method that all arrays inherit. You can add custom methods: Array.prototype.myMethod = function() {...} makes it available to all arrays. Introduced in: |
product | navigator | A navigator property that returns the browser's engine name. For example, navigator.product usually returns "Gecko" for most browsers. Deprecated and not very useful since it returns "Gecko" even in non-Firefox browsers for compatibility reasons. |
propertyName | Event | A property of CSS transition and animation events that tells which CSS property triggered the event. For example, in a transitionend event, event.propertyName might be "opacity" or "transform", indicating which property finished transitioning. Useful when multiple properties animate simultaneously. |
protocol | Location | A location property containing the protocol scheme of the URL including the colon. For example, window.location.protocol returns "https:" or "http:" or "file:". Can be set to change protocol, though this reloads the page. |
pseudoElement | Event | A property of CSS transition and animation events that indicates which pseudo-element (like ::before or ::after) triggered the event. For example, event.pseudoElement might be "::before" if the transition happened on a ::before pseudo-element. Empty string for regular elements. |
push() | Array | An array method that adds one or more elements to the end of an array and returns the new length. For example, let arr = [1, 2]; arr.push(3, 4); makes arr equal [1, 2, 3, 4] and returns 4. Modifies the original array. Opposite of unshift() which adds to the beginning. Introduced in: |
querySelector() | Document | A method that returns the first element matching a CSS selector. For example, document.querySelector('.button') finds the first element with class "button", document.querySelector('#header') finds the element with id "header". Returns null if no match. More flexible than getElementById. Introduced in: |
querySelectorAll() | Document | A method that returns all elements matching a CSS selector as a NodeList. For example, document.querySelectorAll('.item') finds all elements with class "item". You can loop through results: querySelectorAll('p').forEach(p => {...}). Returns an empty NodeList if no matches. Introduced in: |
race() | Promise | A Promise static method that returns a promise that resolves or rejects as soon as any of the given promises resolves or rejects. For example, Promise.race([promise1, promise2]) settles with whichever finishes first. Useful for implementing timeouts or choosing the fastest response. Introduced in: |
random() | Math | A Math method that returns a random decimal number between 0 (inclusive) and 1 (exclusive). For example, Math.random() might return 0.742 or 0.039. To get a random integer from 0 to 9: Math.floor(Math.random() * 10). The 0 to 10: Math.floor(Math.random() * 10) + 1. Introduced in: |
readyState | Document | A property indicating the loading state of a document or XMLHttpRequest. For documents: "loading" (still loading), "interactive" (DOM ready but resources loading), or "complete" (fully loaded). For AJAX: values 0-4 indicate connection state. Check before running code that needs the DOM. Introduced in: |
reduce() | Array | An array method that reduces an array to a single value by executing a function on each element, accumulating the result. For example, [1, 2, 3, 4].reduce((sum, num) => sum + num, 0) returns 10 (the sum). The 0 is the starting value. Useful for summing, counting, or transforming arrays into objects. Introduced in: |
reduceRight() | Array | An array method like reduce() but processes elements from right to left (end to beginning). For example, [1, 2, 3].reduceRight((acc, num) => acc + num, '') with strings would concatenate in reverse order. Useful when order of processing matters. Introduced in: |
referrer | Document | A document property that returns the URL of the page that linked to the current page. For example, if a user clicks a link from Google to your site, your site, document.referrer contains the Google URL. Empty string if user typed URL directly or came from a bookmark. Introduced in: |
reject() | Promise | A Promise method that creates a rejected promise or rejects a pending promise. For example, Promise.reject('Error message') creates an immediately rejected promise. In promise constructors: new Promise((resolve, reject) => { reject('Failed'); }) rejects with an error. Used for error handling. Introduced in: |
reload() | location | A location method that reloads the current page, like clicking the browser's refresh button. For example, location.reload() refreshes the page. Takes optional parameter: location.reload(true) forces reload from server (bypassing cache), though this parameter is deprecated. |
remove() | Element | An element method that removes the element from the DOM. For example, element.remove() deletes the element entirely. Much simpler than the old method: element.parentNode.removeChild(element). The element can be re-inserted later if you saved a reference to it. Introduced in: |
removeAttribute() | Element | An element method that removes a specified attribute. For example, element.removeAttribute('disabled') removes the disabled attribute, element.removeAttribute('class') removes all classes. Different from setting to empty string, this completely removes the attribute from the HTML. Introduced in: |
removeAttributeNode() | Element | An element method that removes an attribute node object. For example, let attrNode = element.getAttributeNode('title'); element.removeAttributeNode(attrNode); removes the attribute. Rarely used; removeAttribute() is simpler for most cases. Introduced in: |
removeChild() | Node | A node method that removes a specified child node. For example, parent.removeChild(child) removes the child element. Returns the removed node so you can reinsert it elsewhere. Modern alternatives like child.remove() are often simpler. Introduced in: |
removeEventListener() | Element | A method that removes an event listener previously added with addEventListener(). For example, element.removeEventListener('click', myFunction) stops listening for clicks. Must use the exact same function reference - anonymous functions can't be removed. Important for preventing memory leaks. |
removeItem() | Storage | A Storage method (localStorage/sessionStorage) that deletes a stored item. For example, localStorage.removeItem('username') deletes the username key-value pair. Does nothing if the key doesn't exist. Useful for logout functionality or clearing cached data. Introduced in: |
removeNamedItem() | NamedNodeMap | A method on NamedNodeMap (attribute collections) that removes an attribute by name. For example, element.attributes.removeNamedItem('id') removes the id attribute. Similar to removeAttribute() but works on the attributes collection. Rarely used in modern code. |
repeat | RegExp | A RegExp property that indicates whether the repeat flag is set. Also exists as a string method - see repeat() below. In regex context, indicates global matching behavior. Introduced in: |
repeat() | String | A string method that returns a new string with the original repeated a specified number of times. For example, "ha".repeat(3) returns "hahaha", "*".repeat(5) returns "*****". Useful for creating padding, separators, or pattern strings. Returns empty string if count is 0. |
replace() | String | A string method that returns a new string with some matches replaced. For example, "hello world".replace("world", "there") returns "hello there". With regex: "aaa".replace(/a/g, "b") returns "bbb" (g flag replaces all). Original string unchanged. Also a location method that navigates without adding to history. Introduced in: |
replaceAll() | String | A string method that replaces all occurrences of a substring. For example, "aaa".replaceAll("a", "b") returns "bbb". Simpler than using replace() with a global regex. For example, "hello hello".replaceAll("hello", "hi") returns "hi hi". Introduced in: |
replaceChild() | Node | A node method that replaces a child node with a new node. For example, parent.replaceChild(newChild, oldChild) swaps oldChild for newChild. Returns the replaced node. Modern alternatives like replaceWith() are often simpler to use. Introduced in: |
requestAnimationFrame() | window | A window method that schedules a function to run before the next browser repaint, ideal for smooth animations. For example, requestAnimationFrame(animate) calls animate() at the optimal time (usually 60 times per second). Better than setTimeout for animations because it syncs with screen refresh and pauses when tab is hidden. Introduced in: |
requestFullscreen() | Element | An element method that makes an element display in fullscreen mode. For example, video.requestFullscreen() makes a video fill the screen. User must initiate (can't auto-fullscreen on page load). Returns a promise. Exit with document.exitFullscreen(). |
resizeBy() | window | A window method that resizes the window by a specified number of pixels. For example, window.resizeBy(100, 50) makes the window 100px wider and 50px taller. Often blocked by browsers for security/user experience reasons. |
resizeTo() | window | A window method that resizes the window to specific dimensions. For example, window.resizeTo(800, 600) makes the window 800px wide and 600px tall. Like resizeBy(), usually blocked by modern browsers for security. |
resolve() | Promise | A Promise method that creates a resolved promise or resolves a pending promise with a value. For example, Promise.resolve(42) creates an immediately resolved promise with value 42. In promise constructors: new Promise((resolve) => { resolve('Success'); }) completes successfully. Introduced in: |
return | Statements | A statement that exits a function and optionally sends a value back to the caller. For example, function add(a, b) { return a + b; } returns the sum. Code after return doesn't execute. Without return, functions return undefined. In generators, return ends the sequence. Introduced in: |
reverse() | Array | An array method that reverses the order of elements in place. For example, let arr = [1, 2, 3]; arr.reverse(); makes arr equal [3, 2, 1]. Modifies the original array and returns it. For non-destructive reversal, use toReversed() or spread with reverse: [...arr].reverse(). Introduced in: |
round() | Math | A Math method that rounds a number to the nearest integer. For example, Math.round(4.7) returns 5, Math.round(4.4) returns 4, Math.round(4.5) returns 5 (rounds .5 up). For decimal places, multiply and divide: Math.round(3.456 * 100) / 100 gives 3.46. Introduced in: |
relatedTarget | Event | An event property that references a secondary element involved in the event. For mouse events: the element the mouse came from (mouseenter) or went to (mouseleave). For focus events: the element losing or gaining focus. For example, in mouseenter, event.relatedTarget is where the mouse came from. Introduced in: |
renameNode() | Document | A deprecated document method that was supposed to rename a node. For example, changing a node's tag name. Never widely supported and now removed from specifications. To "rename" an element, create a new one and copy content instead. |
screen | window | A window property that provides information about the user's screen. For example, screen.width and screen.height give screen dimensions in pixels, screen.availWidth and screen.availHeight exclude taskbars. Useful for responsive design or positioning windows. Introduced in: |
screenLeft | window | A window property giving the X coordinate (horizontal position) of the browser window's left edge relative to the screen. For example, window.screenLeft might be 100 if the window starts 100 pixels from the left screen edge. Similar to screenX. |
screenTop | window | A window property giving the Y coordinate (vertical position) of the browser window's top edge relative to the screen. For example, window.screenTop might be 50 if the window is 50 pixels from the top of the screen. Similar to screenY. |
screenX | window | A mouse event property giving the X coordinate of the mouse relative to the entire screen (not just the browser window). For example, event.screenX tells the mouse's horizontal position on your monitor. Also a window property like screenLeft. |
screenY | window | A mouse event property giving the Y coordinate of the mouse relative to the entire screen. For example, event.screenY tells the mouse's vertical position on your monitor. Also a window property like screenTop for window position. |
scripts | Document | A document property that returns a collection of all <script> elements in the document. For example, document.scripts[0] gets the first script tag, document.scripts.length counts all scripts. Useful for analyzing or managing script loading. |
scroll() | window | A window/element method that scrolls to a specific position. For example, window.scroll(0, 500) scrolls to 500px from top. Can use options object: scroll({top: 100, behavior: 'smooth'}) for animated scrolling. For elements: element.scroll(x, y) scrolls element's content. Introduced in: |
scrollBy() | window | A window/element method that scrolls by a specified amount from the current position. For example, window.scrollBy(0, 100) scrolls down 100px more. scrollBy({top: 100, behavior: 'smooth'}) scrolls smoothly. Relative to current position, unlike scrollTo which is absolute. |
scrollHeight | Element | A read-only element property that returns the total height of an element's content, including overflow (content not visible due to scrolling). For example, if a div shows 200px but contains 500px of content, scrollHeight is 500. Useful for detecting if element is scrollable. |
scrollIntoView() | Element | An element method that scrolls the page so the element becomes visible. For example, element.scrollIntoView() scrolls to bring element into view. Options: scrollIntoView({behavior: 'smooth', block: 'center'}) for smooth centering. Useful for navigation to anchor links or form validation errors. |
scrollLeft | Element | A property that gets or sets how many pixels an element's content is scrolled horizontally. For example, element.scrollLeft = 100 scrolls the content 100px to the right. Reading it tells current horizontal scroll position. 0 means not scrolled horizontally. |
scrollTo() | window | A window/element method that scrolls to absolute coordinates. For example, window.scrollTo(0, 0) scrolls to the top of the page. scrollTo({top: 500, left: 0, behavior: 'smooth'}) scrolls smoothly to position. Similar to scroll() but clearer name. |
scrollTop | Element | A property that gets or sets how many pixels an element's content is scrolled vertically. For example, element.scrollTop = 200 scrolls content down 200px. Reading it tells current vertical scroll position. window.scrollY or document.documentElement.scrollTop for page scroll. |
scrollWidth | Element | A read-only element property that returns the total width of an element's content, including overflow. For example, if content is 800px wide but only 300px is visible, scrollWidth is 800. Useful for horizontal scrolling detection. |
scrollX | window | A window property (alias for pageXOffset) that returns how many pixels the document is scrolled horizontally. For example, window.scrollX tells horizontal scroll position. Read-only. Usually 0 since most pages don't scroll horizontally. Introduced in: |
scrollY | window | A window property (alias for pageYOffset) that returns how many pixels the document is scrolled vertically. For example, window.scrollY tells how far down the page is scrolled. Read-only. Useful for scroll-based effects like sticky headers. Introduced in: |
seal() | Object | An Object static method that seals an object, preventing addition or deletion of properties but allowing modification of existing ones. For example, Object.seal(obj) locks the object structure. Can still change values: obj.name = "New" works, but obj.age = 30 (new property) fails. Introduced in: |
search | location | A location property containing the query string portion of a URL (the part starting with ?). For example, in "https://example.com/page?id=5&name=John", search is "?id=5&name=John". Can be set to change query parameters. Often parsed with URLSearchParams. Introduced in: |
search() | String | A string method that searches for a match using a string or regex and returns the index of the first match. For example, "hello world".search("world") returns 6, "hello".search(/o/) returns 4. Returns -1 if no match. Similar to indexOf() but accepts regex. Introduced in: |
self | window | A window property that references the current window itself. For example, self === window is true. Useful in workers (where window doesn't exist) and for clarity in certain contexts. Can be used to avoid naming conflicts. Introduced in: |
sessionStorage | window | A browser storage object that saves data for the duration of the page session (until tab closes). For example, sessionStorage.setItem('temp', 'data') saves data that disappears when tab closes. Similar to localStorage but not persistent. Data is per-tab, not shared between tabs. Introduced in: |
set() | Map | A Map/Set method that adds or updates a key-value pair in a Map, or adds a value to a Set. For example, map.set('name', 'John') stores a value, mySet.set(value) adds to set (though Sets use add(), not set). Returns the collection for chaining. Introduced in: |
setAttribute() | Element | An element method that sets the value of an attribute. For example, element.setAttribute('class', 'active') sets the class, img.setAttribute('src', 'photo.jpg') changes the image. Creates the attribute if it doesn't exist. For data attributes: setAttribute('data-id', '123'). Introduced in: |
setAttributeNode() | Element | An element method that adds an attribute node object to an element. For example, let attr = document.createAttribute('title'); attr.value = 'Hello'; element.setAttributeNode(attr); sets an attribute. Rarely used; setAttribute() is simpler. Introduced in: |
setDate() | Date | A Date method that sets the day of the month (1-31). For example, date.setDate(15) changes the date to the 15th. Can use values outside range: setDate(0) goes to last day of previous month, setDate(32) rolls into next month. |
setFullYear() | Date | A Date method that sets the year, and optionally month and day. For example, date.setFullYear(2025) changes to 2025, date.setFullYear(2025, 11, 25) sets to December 25, 2025. Takes 4-digit years (2025, not 25). |
setHours() | Date | A Date method that sets the hour (0-23), and optionally minutes, seconds, and milliseconds. For example, date.setHours(14) sets to 2 PM, date.setHours(14, 30, 0) sets to 2:30:00 PM. Uses 24-hour format. |
setInterval() | window | A window method that repeatedly calls a function with a fixed time delay between calls. For example, setInterval(updateClock, 1000) calls updateClock every 1000ms (1 second). Returns an ID that can be used with clearInterval() to stop. Unlike setTimeout, repeats indefinitely. Introduced in: |
setItem() | Storage | A Storage method (localStorage/sessionStorage) that saves a key-value pair. For example, localStorage.setItem('username', 'John') stores "John" under key "username". Both key and value must be strings. Use JSON.stringify() for objects: setItem('user', JSON.stringify(userObj)). Introduced in: |
setMilliseconds() | Date | A Date method that sets the milliseconds (0-999). For example, date.setMilliseconds(500) sets to 500ms. Useful for precise timing. Most common use cases don't need millisecond precision. |
setMinutes() | Date | A Date method that sets the minutes (0-59), and optionally seconds and milliseconds. For example, date.setMinutes(45) sets minutes to 45, date.setMinutes(30, 0) sets to half past with 0 seconds. |
setMonth() | Date | A Date method that sets the month (0-11) and optionally the day. For example, date.setMonth(0) sets to January, date.setMonth(11, 25) sets to December 25. Remember months are 0-indexed! |
setNamedItem() | NamedNodeMap | A method on NamedNodeMap (attribute collections) that adds or replaces an attribute node. For example, element.attributes.setNamedItem(attrNode) adds an attribute. Rarely used; setAttribute() is the modern approach. |
setSeconds() | Date | A Date method that sets the seconds (0-59), and optionally milliseconds. For example, date.setSeconds(30) sets seconds to 30, date.setSeconds(45, 500) sets 45.5 seconds. |
setTime() | Date | A Date method that sets the date to a timestamp (milliseconds since January 1, 1970). For example, date.setTime(1704067200000) sets to a specific moment. Opposite of getTime(). Useful for copying dates: newDate.setTime(oldDate.getTime()). |
setTimeout() | window | A window method that calls a function once after a specified delay. For example, setTimeout(showMessage, 3000) calls showMessage after 3 seconds (3000ms). Returns an ID that can be used with clearTimeout() to cancel. Can pass parameters: setTimeout(greet, 1000, 'John'). Introduced in: |
setUTCDate() | Date | A Date method that sets the day of the month in UTC (Coordinated Universal Time). For example, date.setUTCDate(15) sets the 15th in UTC, which might be a different local date depending on timezone. Useful for working with dates independent of timezone. |
setUTCFullYear() | Date | A Date method that sets the year in UTC, and optionally month and day. For example, date.setUTCFullYear(2025) sets year in UTC. Important for consistent date handling across timezones. |
setUTCHours() | Date | A Date method that sets the hour in UTC (0-23), and optionally minutes, seconds, and milliseconds. For example, date.setUTCHours(12) sets to noon UTC, which might be different local time. |
setUTCMilliseconds() | Date | A Date method that sets milliseconds (0-999) in UTC. For example, date.setUTCMilliseconds(500) sets precise timing in UTC. Rarely used in typical web development. |
setUTCMinutes() | Date | A Date method that sets minutes in UTC (0-59), and optionally seconds and milliseconds. For example, date.setUTCMinutes(30) sets minutes in UTC time. |
setUTCMonth() | Date | A Date method that sets the month in UTC (0-11) and optionally the day. For example, date.setUTCMonth(6, 4) sets to July 4th in UTC. Remember 0 is January. |
setUTCSeconds() | Date | A Date method that sets seconds in UTC (0-59) and optionally milliseconds. For example, date.setUTCSeconds(45) sets seconds in UTC. |
setYear() | Date | A deprecated Date method that set the year using 2-digit format. For example, date.setYear(95) meant 1995. Confusing for years 2000+. Use setFullYear() instead, which accepts 4-digit years and is unambiguous. |
shift() | Array | An array method that removes and returns the first element. For example, let arr = [1, 2, 3]; let first = arr.shift(); sets first to 1 and arr becomes [2, 3]. Modifies original array. Opposite of pop() which removes from end. Slower than pop() for large arrays. Introduced in: |
shiftKey | Event | A keyboard/mouse event property that is true if the Shift key was pressed during the event. For example, if (event.shiftKey) { selectMultiple(); } can detect Shift+Click for multi-select. Useful for keyboard shortcuts and modified clicks. Introduced in: |
sign() | Math | A Math method that returns the sign of a number: 1 for positive, -1 for negative, 0 for zero. For example, Math.sign(5) returns 1, Math.sign(-5) returns -1, Math.sign(0) returns 0. Useful for determining direction or polarity. Introduced in: |
sin() | Math | A Math method that returns the sine of an angle (in radians). For example, Math.sin(Math.PI / 2) returns 1 (sine of 90 degrees). To convert degrees to radians: radians = degrees * Math.PI / 180. Used in trigonometry, animations, and graphics. Introduced in: |
sinh() | Math | A Math method that returns the hyperbolic sine of a number. For example, Math.sinh(0) returns 0, Math.sinh(1) returns approximately 1.175. Used in advanced mathematics, physics, and engineering calculations. Rarely used in typical web development. |
size | Map | A property of Map and Set objects that returns the number of entries. For example, mySet.size gives the number of unique values, myMap.size gives the number of key-value pairs. Read-only. Similar to array.length but for these collections. Introduced in: |
slice() | Array | An array/string method that returns a shallow copy of a portion without modifying the original. For arrays: [1, 2, 3, 4].slice(1, 3) returns [2, 3] (from index 1 up to but not including 3). For strings: "hello".slice(1, 4) returns "ell". Negative indices count from end. Introduced in: |
some() | Array | An array method that tests whether at least one element passes a test function. For example, [1, 2, 3].some(n => n > 2) returns true because 3 is greater than 2. Stops checking once one passes. Opposite of every() which requires all to pass. Returns boolean. Introduced in: |
sort() | Array | An array method that sorts elements in place. For example, [3, 1, 2].sort() becomes [1, 2, 3]. Default sorts as strings (beware: [10, 2].sort() gives [10, 2]). Use compare function for numbers: arr.sort((a, b) => a - b). Modifies original array. For non-destructive, use toSorted(). Introduced in: |
source | RegExp | A RegExp property that returns the pattern text of the regular expression (without the delimiters or flags). For example, /hello/gi.source returns "hello". Useful for inspecting or recreating regex patterns. Doesn't include the flags (g, i, etc.). |
specified | Attr | An attribute node property indicating whether the attribute was explicitly set in HTML or created by default. For example, true if written in code, false if browser-generated. Rarely used in modern web development. |
splice() | Array | An array method that changes contents by removing, replacing, or adding elements at any position. For example, arr.splice(2, 1) removes 1 element at index 2, arr.splice(2, 0, 'new') inserts 'new' at index 2, arr.splice(2, 1, 'replace') replaces the element at index 2. Modifies original array. Returns removed elements. Introduced in: |
split() | String | A string method that divides a string into an array of substrings. For example, "a,b,c".split(',') returns ['a', 'b', 'c'], "hello".split('') returns ['h', 'e', 'l', 'l', 'o'] (each character). Optional limit parameter: split(',', 2) returns only first 2 parts. Introduced in: |
sqrt() | Math | A Math method that returns the square root of a number. For example, Math.sqrt(9) returns 3, Math.sqrt(16) returns 4, Math.sqrt(2) returns approximately 1.414. Returns NaN for negative numbers. Commonly used in distance calculations and geometry. Introduced in: |
SQRT1_2 | Math | A Math constant equal to the square root of 1/2 (approximately 0.707). For example, Math.SQRT1_2 is equivalent to 1 / Math.sqrt(2) or Math.sqrt(0.5). Used in mathematical calculations, particularly in graphics and physics. Introduced in: |
SQRT2 | Math | A Math constant equal to the square root of 2 (approximately 1.414). For example, Math.SQRT2 is the same as Math.sqrt(2). Commonly used in diagonal calculations and geometry (diagonal of a unit square). Introduced in: |
static | Classes | A keyword used in classes to define methods or properties that belong to the class itself rather than instances. For example, static myMethod() in a class can be called as ClassName.myMethod() without creating an instance. Like Array.isArray() - a static method of Array. Introduced in: |
startsWith() | String | A string method that checks if a string begins with specified characters. For example, "hello world".startsWith("hello") returns true, "hello".startsWith("world") returns false. Optional position parameter: "hello".startsWith("llo", 2) checks from index 2 (returns true). Case-sensitive. Introduced in: |
state | history | A property in the history API that contains the state object associated with a history entry. For example, when you use history.pushState({page: 1}, '', '/page1'), later history.state returns {page: 1}. Useful for maintaining state in single-page applications. Introduced in: |
status | Response | For HTTP responses: a number indicating the status code (200 for success, 404 for not found, 500 for server error, etc.). For example, response.status === 200 checks if request succeeded. For windows: the text in the status bar (deprecated). For service workers: indicates state. Introduced in: |
stop() | window | A window method that stops loading the page (like clicking the stop button). For example, window.stop() halts downloading of images and other resources. Rarely used in practice. Also exists on media elements to stop playback. |
stopImmediatePropagation() | Event | An event method that prevents both further propagation (bubbling/capturing) AND other listeners on the same element from executing. For example, if element has multiple click handlers, event.stopImmediatePropagation() in the first prevents others from running. Stronger than stopPropagation(). |
stopPropagation() | Event | An event method that prevents the event from bubbling up to parent elements. For example, event.stopPropagation() in a button click stops the click from triggering handlers on parent divs. Doesn't prevent other handlers on the same element, unlike stopImmediatePropagation(). |
storageArea | StorageEvent | A property of StorageEvent that indicates which storage object was modified (localStorage or sessionStorage). For example, event.storageArea === localStorage tells you which storage changed. Useful when handling storage events from other tabs. Introduced in: |
String() | Global | A global function that converts any value to a string. For example, String(123) returns "123", String(true) returns "true", String(null) returns "null". More explicit than concatenating with empty string ("" + value). Different from toString() which doesn't work on null/undefined. Introduced in: |
stringify() | JSON | A JSON static method that converts a JavaScript object to a JSON string. For example, JSON.stringify({name: "John", age: 30}) returns '{"name":"John","age":30}'. Useful for saving objects to localStorage or sending to servers. Can take optional parameters for formatting: JSON.stringify(obj, null, 2) adds indentation. |
strictErrorChecking | Document | A document property indicating whether strict error checking is enabled in XML documents. When true, XML parsing errors throw exceptions. Rarely used in typical web development as it applies to XML DOM operations, not HTML or regular JavaScript. |
style | Element | A property that provides access to an element's inline CSS styles. For example, element.style.color = "red" sets text color, element.style.backgroundColor = "blue" sets background (note camelCase). Only reads/writes inline styles, not styles from stylesheets. Use getComputedStyle() for all applied styles. Introduced in: |
substr() | String | A deprecated string method that extracts a substring starting at a position for a specified length. For example, "hello".substr(1, 3) returns "ell" (starts at index 1, takes 3 characters). Use substring() or slice() instead in modern code, as substr() may be removed. |
substring() | String | A string method that extracts characters between two indices. For example, "hello".substring(1, 4) returns "ell" (from index 1 up to but not including 4). If start is greater than end, they're swapped. Unlike slice(), doesn't accept negative indices. Returns a new string. Introduced in: |
super | Global | A keyword used in classes to call methods or access properties from the parent class. For example, in a constructor: super() calls the parent constructor, in methods: super.methodName() calls the parent's method. Must be called before using this in child constructor. Essential for class inheritance. Introduced in: |
supports() | CSS | A CSS static method that checks if the browser supports a specific CSS feature. For example, CSS.supports('display', 'grid') returns true if grid is supported. Can also use string syntax: CSS.supports('display: grid'). Useful for feature detection and progressive enhancement. |
switch | Global | A control structure that executes different code blocks based on matching a value. For example, switch(day) { case 'Mon': ... break; case 'Tue': ... break; default: ... } runs different code for each day. More readable than multiple if-else statements for many conditions. Remember break to prevent fall-through. Introduced in: |
table() | Console | A console method that displays data in a table format. For example, console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]) shows a formatted table in the console. Much easier to read than console.log for arrays of objects. Great for debugging structured data. Introduced in: |
tabIndex | Element | A property that gets or sets the tab order of elements (which element gets focus when pressing Tab). For example, element.tabIndex = 1 makes it focusable and sets order. 0 means natural order, -1 means focusable by code but not Tab key. Positive numbers set specific order. Important for keyboard accessibility. Introduced in: |
tagName | Element | A property that returns the tag name of an element in uppercase. For example, a <div> element's tagName is "DIV", a <p> element's is "P". Always uppercase, regardless of how it's written in HTML. Useful for checking element types: if (element.tagName === 'INPUT'). Introduced in: |
tan() | Math | A Math method that returns the tangent of an angle (in radians). For example, Math.tan(Math.PI / 4) returns approximately 1 (tangent of 45 degrees). Convert degrees to radians first: radians = degrees * Math.PI / 180. Used in trigonometry, graphics, and physics calculations. Introduced in: |
tanh() | Math | A Math method that returns the hyperbolic tangent of a number. For example, Math.tanh(0) returns 0, Math.tanh(Infinity) returns 1. Used in advanced mathematics, neural networks (activation functions), and scientific computing. Rare in typical web development. |
target | Event | An event property that references the element that triggered the event (where the event originally occurred). For example, in a click event on a button inside a div, event.target is the button, even if the handler is on the div. Different from currentTarget which is where the handler is attached. Introduced in: |
targetTouches | TouchEvent | A touch event property containing a list of all touch points currently in contact with the surface that started on the target element. For example, if user touches a button with two fingers, event.targetTouches has 2 touch objects with coordinates. Used for multi-touch gestures on mobile. |
test() | RegExp | A RegExp method that tests if a pattern exists in a string, returning true or false. For example, /hello/.test("hello world") returns true, /goodbye/.test("hello world") returns false. Simpler than match() when you only need to know if something exists, not extract it. Introduced in: |
textContent | Element | A property that gets or sets the text content of an element and all its descendants, excluding HTML tags. For example, element.textContent = "Hello" sets text (HTML tags are shown as text, not rendered). Reading it gets all text including hidden elements. Safer than innerHTML for preventing XSS attacks. Introduced in: |
then() | Promise | A Promise method that attaches callbacks for when a promise resolves (succeeds) or rejects (fails). For example, promise.then(result => console.log(result)) runs when promise succeeds. Can chain: fetch(url).then(response => response.json()).then(data => console.log(data)). Second parameter handles rejection: then(success, failure). Introduced in: |
this | Global | A keyword that refers to the context object where the code is executing. In methods: this is the object. In functions: depends on how called. In arrow functions: inherits from surrounding scope. In event handlers: usually the element. For example, button.onclick = function() { console.log(this); } - this is the button. Introduced in: |
throw | Global | A statement that creates a custom error and stops execution. For example, throw new Error("Something went wrong") creates an error with a message. Can throw any value: throw "Error message" or throw {code: 404}. Use with try-catch to handle errors gracefully. Introduced in: |
time() | Console | A console method that starts a timer with a label. For example, console.time('myTimer') starts timing. Later, console.timeEnd('myTimer') stops it and logs the elapsed time. Useful for measuring how long code takes to execute. Must use the same label for both time() and timeEnd(). |
timeEnd() | Console | A console method that stops a timer started with console.time() and displays the elapsed time. For example, console.time('load'); /* do something */ console.timeEnd('load'); might display "load: 234.56ms". Must match the label from time(). Useful for performance testing. |
timeStamp | Event | An event property that returns the time (in milliseconds) when the event was created, measured from when the page started loading. For example, event.timeStamp might be 5234.5 meaning 5.2 seconds after page load. Useful for measuring delays or event timing. Introduced in: |
title | Element | For elements: a property that gets or sets the title attribute (shown as a tooltip on hover). For example, element.title = "Click here" shows a tooltip. For documents: document.title gets or sets the page title shown in the browser tab. Changing it updates the tab immediately. Introduced in: |
toggle() | DOMTokenList | A classList method that adds a class if it doesn't exist, or removes it if it does. For example, element.classList.toggle('active') switches the class on/off. Optional second parameter forces: toggle('active', true) ensures class is added. Useful for toggling states like showing/hiding or active/inactive. Introduced in: |
toExponential() | Number | A number method that converts a number to exponential notation (scientific notation). For example, (12345).toExponential() returns "1.2345e+4", (0.00123).toExponential(2) returns "1.23e-3". Optional parameter specifies decimal places. Useful for displaying very large or small numbers compactly. Introduced in: |
toFixed() | Number | A number method that formats a number to a fixed number of decimal places, returning a string. For example, (3.14159).toFixed(2) returns "3.14", (5).toFixed(2) returns "5.00". Rounds if necessary. Commonly used for displaying money: price.toFixed(2) shows 2 decimal places. Introduced in: |
toGMTString() | Date | A deprecated Date method that converted a date to a string in GMT timezone format. For example, returned "Mon, 01 Jan 2024 12:00:00 GMT". Use toUTCString() instead, which is the standard replacement and works identically. |
toISOString() | Date | A Date method that converts a date to ISO 8601 format (international standard). For example, new Date().toISOString() returns "2024-01-01T12:00:00.000Z". Always in UTC (Z means zero UTC offset). Useful for storing dates in databases or APIs as it's unambiguous and sortable. Introduced in: |
toJSON() | Date | A method called automatically by JSON.stringify() to customize JSON representation. For example, Date objects have a toJSON() that returns ISO string. You can define custom toJSON() on objects: obj.toJSON = function() { return {custom: "format"}; } to control JSON output. Introduced in: |
toLocaleDateString() | Date | A Date method that converts the date portion to a string using locale (language/region) conventions. For example, date.toLocaleDateString('en-US') returns "1/1/2024" (US format), date.toLocaleDateString('en-GB') returns "01/01/2024" (UK format). Respects user's locale if no parameter given. Introduced in: |
toLocaleLowerCase() | String | A string method that converts text to lowercase according to locale-specific rules. For example, in Turkish, "I".toLocaleLowerCase('tr') correctly returns "ı" (dotless i). For most cases, toLowerCase() is sufficient, but this handles special linguistic rules properly. Introduced in: |
toLocaleString() | Number | A method that converts to a string using locale conventions. For numbers: formats with proper separators. For dates: formats date and time. For example, (1234567.89).toLocaleString('en-US') returns "1,234,567.89", with commas. Useful for displaying numbers/dates in culturally appropriate formats. Introduced in: |
toLocaleTimeString() | Date | A Date method that converts the time portion to a string using locale conventions. For example, date.toLocaleTimeString('en-US') returns "12:00:00 PM" (US format with AM/PM), date.toLocaleTimeString('en-GB') returns "12:00:00" (24-hour format). Can specify options for format control. Introduced in: |
toLocaleUpperCase() | String | A string method that converts text to uppercase according to locale-specific rules. For example, in Turkish, "i".toLocaleUpperCase('tr') correctly returns "İ" (capital i with dot). Handles special cases that toUpperCase() might not. Introduced in: |
toLowerCase() | String | A string method that converts all characters to lowercase. For example, "HELLO World".toLowerCase() returns "hello world". Doesn't modify the original string, returns a new one. Useful for case-insensitive comparisons: str1.toLowerCase() === str2.toLowerCase(). Introduced in: |
top | Window | A window property that references the topmost window in a frame hierarchy. For example, if you have nested iframes, window.top always refers to the outermost window. Equals self if not in a frame. Useful for breaking out of frames: if (window !== window.top) { window.top.location = window.location; }Introduced in: |
toPrecision() | Number | A number method that formats a number to a specified total number of significant digits. For example, (123.456).toPrecision(4) returns "123.5", (0.00012).toPrecision(2) returns "0.00012". Different from toFixed() which counts decimal places. Uses exponential notation for very large/small numbers. Introduced in: |
toReversed() | Array | A modern array method that returns a new array with elements in reversed order, without modifying the original. For example, let arr = [1, 2, 3]; let reversed = arr.toReversed(); creates [3, 2, 1] while arr stays [1, 2, 3]. Non-destructive alternative to reverse(). Introduced in: |
toSorted() | Array | A modern array method that returns a new sorted array without modifying the original. For example, let arr = [3, 1, 2]; let sorted = arr.toSorted(); creates [1, 2, 3] while arr stays [3, 1, 2]. Accepts compare function: arr.toSorted((a, b) => a - b). Non-destructive alternative to sort(). Introduced in: |
toSpliced() | Array | A modern array method that returns a new array with elements removed/replaced/added, without modifying the original. For example, let arr = [1, 2, 3]; let result = arr.toSpliced(1, 1, 99); creates [1, 99, 3] while arr stays [1, 2, 3]. Non-destructive alternative to splice(). Introduced in: |
toString() | Object | A method that converts a value to a string representation. For numbers: (123).toString() returns "123", can specify base: (10).toString(2) returns "1010" (binary). For arrays: joins elements with commas. For objects: usually returns "[object Object]". Can override for custom string representation. Introduced in: |
total | ProgressEvent | A property of progress events indicating the total size of the data being transferred (in bytes). For example, during a file upload, event.total tells the file size. Used with loaded to calculate progress percentage: (event.loaded / event.total) * 100. Only available if lengthComputable is true. |
toTimeString() | Date | A Date method that converts the time portion to a string. For example, new Date().toTimeString() might return "12:00:00 GMT+0000 (Coordinated Universal Time)". Excludes the date portion. Not locale-aware (always English). Includes timezone information. Introduced in: |
touches | TouchEvent | A touch event property containing a list of all current touch points on the screen, regardless of which element they started on. For example, if user touches with 3 fingers anywhere, event.touches.length is 3. Each touch object has coordinates (clientX, clientY). Used for detecting multi-touch gestures. |
toUpperCase() | String | A string method that converts all characters to uppercase. For example, "hello World".toUpperCase() returns "HELLO WORLD". Returns a new string, doesn't modify the original. Useful for case-insensitive comparisons or formatting display text. Introduced in: |
toUTCString() | Date | A Date method that converts a date to a string in UTC timezone. For example, new Date().toUTCString() returns "Mon, 01 Jan 2024 12:00:00 GMT". Always shows GMT timezone. Useful for HTTP headers and consistent date formatting across timezones. Introduced in: |
trace() | Console | A console method that outputs a stack trace showing the path of function calls that led to this point. For example, console.trace() shows which functions called which to reach this line. Useful for debugging to understand execution flow, especially in complex nested function calls. Introduced in: |
transitionend | GlobalEventHandlers | An event that fires when a CSS transition completes. For example, element.addEventListener('transitionend', handler) runs code after transition finishes. Event object includes propertyName (which property transitioned) and elapsedTime (duration). One event fires per transitioned property. |
trim() | String | A string method that removes whitespace from both ends of a string. For example, " hello ".trim() returns "hello". Removes spaces, tabs, newlines, etc. Doesn't affect whitespace in the middle. Useful for cleaning user input: username = input.value.trim(). Introduced in: |
trimEnd() | String | A string method that removes whitespace from only the end (right side) of a string. For example, "hello ".trimEnd() returns "hello". Leaves beginning whitespace intact. Also called trimRight(). Useful when you want to preserve leading whitespace but clean trailing spaces. Introduced in: |
trimStart() | String | A string method that removes whitespace from only the beginning (left side) of a string. For example, " hello".trimStart() returns "hello". Leaves ending whitespace intact. Also called trimLeft(). Useful for cleaning indentation while preserving trailing spaces. Introduced in: |
trunc() | Math | A Math method that removes the decimal part of a number, keeping only the integer. For example, Math.trunc(4.9) returns 4, Math.trunc(-4.9) returns -4. Different from Math.floor() which rounds down: floor(-4.9) is -5, but trunc(-4.9) is -4. Simply chops off decimals. Introduced in: |
try...catch...finally | Global | A control structure for error handling. The try block contains code that might fail, catch runs if an error occurs, finally runs regardless. For example: try { riskyCode(); } catch(error) { console.log(error.message); } finally { cleanup(); }. The finally block is optional but always executes, useful for cleanup tasks. Introduced in: |
type | Event | Context-dependent property. For input elements: the input type ("text", "checkbox", "submit", etc.). For events: the event type ("click", "keydown", etc.). For MIME types: content type. For example, input.type returns "text" for text inputs, event.type returns "click" for click events. Introduced in: |
typeof | Global | An operator that returns a string indicating the type of a value. For example, typeof 42 returns "number", typeof "hello" returns "string", typeof true returns "boolean", typeof {} returns "object", typeof function(){} returns "function". Note: typeof null returns "object" (historic bug), typeof [] returns "object". Introduced in: |
Uint8Array | Global | A typed array that holds 8-bit unsigned integers (numbers from 0 to 255). For example, let bytes = new Uint8Array([10, 255, 128]) creates an array for positive small integers. More memory-efficient than regular arrays. Commonly used for binary data like images, files, or network protocols. |
Uint8ClampedArray | Global | A typed array like Uint8Array but "clamped" - values outside 0-255 range are clamped to boundaries rather than wrapping. For example, setting a value to 300 stores 255, setting -10 stores 0. Used specifically for canvas pixel manipulation where color values must stay 0-255. For example, canvas.getContext('2d').getImageData() returns this type. |
JavaScript Dictionary
A beginner-friendly JavaScript reference that clearly explains each property/method, includes category filter for easy lookup, and shows associated objects to help learners confidently script for the web.
Learn JavaScript
or