[go: up one dir, main page]
Scribd
Upload
36 views33 pages

Slide15 - The Document Object Model

The document object model (DOM) represents an HTML document as nodes that can be manipulated programmatically. The DOM tree has elements nested according to the document's structure, with parent-child relationships that can be traversed using properties like parentNode and childNodes. JavaScript can modify the DOM tree by adding, removing, or styling nodes. Specific elements can be accessed and manipulated using methods like getElementById, getElementsByTagName, and getElementsByClassName.

Uploaded by

Pro Unipadder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views33 pages

Slide15 - The Document Object Model

The document object model (DOM) represents an HTML document as nodes that can be manipulated programmatically. The DOM tree has elements nested according to the document's structure, with parent-child relationships that can be traversed using properties like parentNode and childNodes. JavaScript can modify the DOM tree by adding, removing, or styling nodes. Specific elements can be accessed and manipulated using methods like getElementById, getElementsByTagName, and getElementsByClassName.

Uploaded by

Pro Unipadder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

The Document Object Model

• Too bad! Same old story! Once


you’ve finished building your
house you notice you’ve
accidentally learned something
that you really should have
known—before you started.

- Friedrich Nietzsche, Beyond


Good and Evil
The Document Object Model

• JavaScript programs may inspect and interfere with the


document that the browser is displaying through a data
structure called the DOM. This data structure represents
the browser’s model of the document, and a JavaScript
program can modify it to change the visible document.
Document structure

• You can imagine an HTML document as a nested


set of boxes. Tags such as <body> and </body>
enclose other tags, which in turn contain other
tags or text. Here’s the example document:
Document structure
Document structure
• The data structure the browser uses to represent the document follows this
shape. For each box, there is an object, which we can interact with to find out
things such as what HTML tag it represents and which boxes and text it contains.
This representation is called the Document Object Model, or DOM for short.

• The global binding document gives us access to these objects. Its


documentElement property refers to the object representing the <html> tag.
Since every HTML document has a head and a body, it also has head and body
properties, pointing at those elements.
Trees

• Their structures are strikingly similar to the structure of a


browser’s document. Each node may refer to other
nodes, children, which in turn may have their own children.
This shape is typical of nested structures where elements can
contain subelements that are similar to themselves.
Trees
• The same goes for the DOM. Nodes for elements, which represent HTML tags, determine
the structure of the document. These can have child nodes. An example of such a node is
document.body. Some of these children can be leaf nodes, such as pieces of text or
comment nodes.

• Each DOM node object has a nodeType property, which contains a code (number) that
identifies the type of node. Elements have code 1, which is also defined as the constant
property Node.ELEMENT_NODE. Text nodes, representing a section of text in the
document, get code 3 (Node.TEXT_NODE). Comments have code 8
(Node.COMMENT_NODE).
Trees
Moving through the tree

• DOM nodes contain a wealth of


links to other nearby nodes. The
following diagram illustrates
these:
Moving through the tree
• Although the diagram shows only
one link of each type, every node
has a parentNode property that
points to the node it is part of, if
any. Likewise, every element node
(node type 1) has a childNodes
property that points to an array-
like object holding its children
Moving through the tree
• In theory, you could move anywhere
in the tree using just these parent and
child links. But JavaScript also gives
you access to a number of additional
convenience links. The firstChild and
lastChild properties point to the first
and last child elements or have the
value null for nodes without children.
Moving through the tree
• Similarly, previousSibling and
nextSibling point to adjacent nodes,
which are nodes with the same parent
that appear immediately before or
after the node itself. For a first child,
previousSibling will be null, and for a
last child, nextSibling will be null.
Moving through the tree

• The nodeValue property sets or returns the node value of the


specified node. If the node is an element node, the nodeValue
property will return null. Return the node value: node.nodeValue

• Note: If you want to return the text of an element, remember that


text is always inside a Text node, and you will have to return the Text
node's node value (element.childNodes[0].nodeValue).
Moving through the tree

• The indexOf() method returns the position of the first


occurrence of a specified value in a string. This method
returns -1 if the value to search for never occurs. Syntax
string.indexOf(searchvalue, start)

• Note: The indexOf() method is case sensitive.


Moving through the tree
Finding elements
• Navigating these links among parents, children, and siblings is often useful. But if we
want to find a specific node in the document, reaching it by starting at
document.body and following a fixed path of properties is a bad idea. Doing so bakes
assumptions into our program about the precise structure of the document—a
structure you might want to change later.
• Another complicating factor is that text nodes are created even for the whitespace
between nodes. The example document’s <body> tag does not have just three
children (<h1> and two <p> elements) but actually has seven: those three, plus the
spaces before, after, and between them.
Finding elements

• So if we want to get the href


attribute of the link in that
document, we don’t want to say
something like “Get the second
child of the sixth child of the
document body”. It’d be better if
we could say “Get the first link in
the document”.
Finding elements

• All element nodes have a getElementsByTagName


method, which collects all elements with the given tag
name that are descendants (direct or indirect children) of
that node and returns them as an array-like object.
• let link = document.body.getElementsByTagName("a")[0];
console.log(link.href);
Finding elements

• To find a specific single node, you can give it an id attribute


and use document.getElementById instead.
• A third, similar method is getElementsByClassName,
which, like getElementsByTagName, searches through the
contents of an element node and retrieves all elements
that have the given string in their class attribute.
Finding elements

• To find a specific single node, you can give it an id attribute


and use document.getElementById instead.
• A third, similar method is getElementsByClassName,
which, like getElementsByTagName, searches through the
contents of an element node and retrieves all elements
that have the given string in their class attribute.
Finding elements
Finding elements
Changing the document
• Almost everything about the DOM data structure can be changed. The shape
of the document tree can be modified by changing parent-child relationships.
• Nodes have a remove method to remove them from their current parent
node.
• To add a child node to an element node, we can use appendChild, which puts
it at the end of the list of children, or insertBefore, which inserts the node
given as the first argument before the node given as the second argument.
Changing the document
Changing the document
Creating nodes
• Say we want to write a script that replaces all images (<img> tags) in
the document with the text held in their alt attributes, which specifies
an alternative textual representation of the image.
• This involves not only removing the images but adding a new text
node to replace them. Text nodes are created with the
document.createTextNode method.
Creating nodes
Creating nodes
Styling

• JavaScript code can directly manipulate the style of an


element through the element’s style property. This
property holds an object that has properties for all possible
style properties. The values of these properties are strings,
which we can write to in order to change a particular
aspect of the element’s style.
Styling
Summary
• The DOM is organized like a tree, in which elements are arranged hierarchically
according to the structure of the document. The objects representing elements
have properties such as parentNode and childNodes, which can be used to
navigate through this tree.

• The way a document is displayed can be influenced by styling, both by attaching


styles to nodes directly and by defining rules that match certain nodes. There are
many different style properties, such as color or display. JavaScript code can
manipulate an element’s style directly through its style property.
References

• https://eloquentjavascript.net/

• https://www.w3schools.com/

You might also like