Scribd
Upload
59 views

Building Interactive Websites - JavaScript and The DOM Cheatsheet - Codecademy

The document object model (DOM) represents an HTML document as a tree structure, with nodes corresponding to elements. The DOM allows JavaScript to access and modify the document. Key DOM concepts include nodes, the document object, element attributes, parent-child relationships, and methods like getElementById() and querySelector() to select elements. Common operations include creating, inserting, and modifying elements, as well as changing CSS styles dynamically with JavaScript.

Uploaded by

pooja sinha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Building Interactive Websites - JavaScript and The DOM Cheatsheet - Codecademy

The document object model (DOM) represents an HTML document as a tree structure, with nodes corresponding to elements. The DOM allows JavaScript to access and modify the document. Key DOM concepts include nodes, the document object, element attributes, parent-child relationships, and methods like getElementById() and querySelector() to select elements. Common operations include creating, inserting, and modifying elements, as well as changing CSS styles dynamically with JavaScript.

Uploaded by

pooja sinha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Cheatsheets / Building Interactive Websites

JavaScript and the DOM


Nodes in DOM tree
A node in the DOM tree is the intersection of two
branches containing data. Nodes can represent HTML
elements, text, attributes, etc. The root node is the
top-most node of the tree. The illustration shows a
representation of a DOM containing different types of
node.

HTML DOM
The DOM is an interface between scripting languages
and a web page’s structure. The browser creates a
Document Object Model or DOM for each of the
webpage it renders. The DOM allows scripting
languages to access and modify a web page. With the
help of DOM, JavaScript gets the ability to create
dynamic HTML.

Accessing HTML attributes in DOM


The DOM nodes of type Element allow access to the
same attributes available to HTML elements. For <h1 id="heading">Welcome!</h1>

instance, for the given HTML element, the id attribute


will be accessible through the DOM.

The Document Object Model


The Document Object Model, or DOM is a
representation of a document (like an HTML page) as a
group of objects. While it is often used to represent
HTML documents, and most web browsers use
JavaScript interfaces to the DOM, it is language agnostic
as a model.
The DOM is tree-like and heirarchical, meaning that
there is a single top-level object, and other objects
descend from it in a branching structure.
DOM parent-child relationship
The parent-child relationship observed in the DOM is
reflected in the HTML nesting syntax. <body>
Elements that are nested inside the opening and   <p>first child</p>
closing tag of another element are the children of that   <p>second child</p>
element in the DOM. </body>
In the code block, the two <p> tags are children of the
<body> , and the <body> is the parent of both <p> tags.

DOM Element Attributes


DOM Nodes of type Element provide access to
attributes of those elements declared in HTML markup. <p id="intro">Welcome to my website</p>

For instance, if an HTML tag has attributes like id or <script>


or src , those attributes can be accessed

class   const paragraph =


through the DOM. document.querySelector('p');

  console.log(paragraph.id) // "intro"

</scrip>

The element.parentNode Property


The .parentNode property of an element can be used to
return a reference to its direct parent node. <div id="parent">

.parentNode can be used on any node.   <p id ="first-child">Some child text</p>


  <p id ="second-child">Some more child


text</p>

</div>

<script>

  const firstChild =
document.getElementById('first-child');

  firstChild.parentNode;  // reference to the


parent element

</script>

The JavaScript document.createElement() Method


The document.createElement() method creates and
returns a reference to a new Element Node with the const newButton
specified tag name. = document.createElement("button");
document.createElement() does not actually add the new

element to the DOM, it must be attached with a


method such as element.appendChild() .
element.InnerHTML
The element.innerHTML property can be used to access
the HTML markup that makes up an element’s contents. <box>
element.innerHTML can be used to access the current   <p>Hello there!</p>
value of an element’s contents or to reassign them. </box>

<script>
  const box = document.querySelector('p');
  // Outputs '<p>Hello there!</p>':
  console.log(box.innerHTML)
  // Reassigns the value:
  box.innerHTML = '<p>Goodbye</p>'
</script>

JavaScript document.getElementById() Method


The document.getElementById() method returns the
element that has the id attribute with the specified // To save a reference to the element with id
value. 'demo':
document.getElementById() returns null if no elements const demoElement
with the specified ID exists. = document.getElementById('demo');
An ID should be unique within a page. However, if more
than one element with the specified ID exists, the
.getElementById() method returns the first element in
the source code.

The JavaScript .querySelector() Method


The .querySelector() method selects the first
child/descendant element that matches its selector // Select the first <div>

argument. const firstDiv


It can be invoked on the document object to search the = document.querySelector('div');
entire document or on a single element instance to

search that element’s descendants.

// Select the first .button element inside


.main-navigation

const navMenu
= document.getElementById('main-navigation');

const firstButtonChild
= navMenu.querySelector('.button');

The document.body Object


document.body returns a reference to the contents of
the <body> HTML element of a document/HTML page.
The <body> element contains all the visible contents of
the page.
JavaScript element.onclick property
The element.onclick property can be used to set a
function to run when an element is clicked. For let element
instance, the given code block will add an <li> = document.getElementById('addItem');
element each time the element with ID addItem is element.onclick = function() { 
clicked by the user.   let newElement
= document.createElement('li');
  document.getElementById('list').appendChild
(newElement);
};

JavaScript element.appendChild() method.


The parentElement.appendChild(childElement) method
appends an element as the last child of the parent. var node1 = document.createElement('li');
In the given code block, a newly created <li> element document.getElementById('list').appendChild(n
will be appended as the last child of the HTML element ode1);
with the ID list .

Changing CSS in Javascript with element.style.


The element.style property can be used to access or
set the CSS style rules of an element. To do so, values let blueElement
are assigned to the attributes of element.style . In the = document.getElementById('colorful-
example code, blueElement contains the HTML element');
elements with the ID colorful-element . By setting the blueElement.style.backgroundColor = 'blue';
backgroundColor attribute of the style property to
blue, the CSS property background-color becomes blue.
Also note that, if the CSS property contains a hyphen,
such as font-family or background-color , Camel Case
notation is used in Javascript for the attribute name, so
background-color becomes backgroundColor .

You might also like