10.module3 DOM-HTML 8

THE DOM
What is the DOM?
• The W3C Document Object Model (DOM) is a platform and

language-neutral interface that allows programs and scripts to
dynamically access and update the content, structure, and
style of a document.
• The HTML DOM defines a standard way for accessing and
manipulating HTML and XML documents.
• In the HTML DOM (Document Object Model), everything is
a node:
• The document itself is a document node
• All HTML elements are element nodes
• All HTML attributes are attribute nodes
• Text inside HTML elements are text nodes
• Comments are comment nodes
The W3C DOM standard is separated
into 3 different parts:
• Core DOM - standard model for any structured

document
• XML DOM - standard model for XML documents
• XML DOM defines the objects and properties of all XML
elements, and the methods to access them
• HTML DOM - standard model for HTML documents
• The HTML DOM defines the objects and properties of all
HTML elements, and the methods to access them.
• In the HTML DOM, everything is a node. The DOM is
HTML viewed as a node tree.
HTML DOM
Node Parents, Children, and Siblings
• In a node tree, the top node

is called the root
• Every node has exactly one
parent, except the root
(which has no parent)
• A node can have any number
of children
• Siblings are nodes with the
same parent
HTML DOM - Modifying
• Changing HTML content

• Changing CSS styles
• Changing HTML attributes
• Creating new HTML elements
• Removing existent HTML elements
• Changing event(handlers)
Programming Interface
• The HTML DOM can be accessed with JavaScript (and

other programming languages).
• All HTML elements are defined as objects, and the
programming interface is the object methods and object
properties .
• A method is an action you can do (like add or modify an
element).
• A property is a value that you can get or set (like the
name or content of a node).
HTML DOM cont.
• Some commonly used HTML DOM methods:
• getElementById(id) - get the node (element) with a specified id
• appendChild(node) - insert a new child node (element)
• removeChild(node) - remove a child node (element)
• Some commonly used HTML DOM properties:
• innerHTML - the text value of a node (element)
• parentNode - the parent node of a node (element)
• childNodes - the child nodes of a node (element)
• attributes - the attributes nodes of a node (element)
Method Description
Returns the element that has an ID attribute with
getElementById()
the a value
Returns a node list (collection/array of nodes)
getElementsByTagName()
containing all elements with a specified tag name
Returns a node list containing all elements with a
getElementsByClassName()
specified class
appendChild() Adds a new child node to a specified node
removeChild() Removes a child node
replaceChild() Replaces a child node
Inserts a new child node before a specified child
insertBefore()
node
createAttribute() Creates an Attribute node
createElement() Creates an Element node
createTextNode() Creates a Text node
getAttribute() Returns the specified attribute value

Sets or changes the specified attribute, to the
setAttribute()
specified value
Adding Some Text To A Page
There are five steps:

1. Create a new Element
2. Create new Text
3. Append the new Text to the new Element
4. Find an existing Element
5. Append the new Element to the existing Element
10
Adding Some Text To Existing <p> (Cont..)
<head>
<script language="javascript" type="text/javascript">
var myText = “ This is new text to be added to the page dynamically.";
function addText(location) {
var newNode, newText, docElement;
newText = document.createTextNode(myText);
docElement = document.getElementById(location);
docElement.appendChild(newText);
}
</script>
</head>
<body>
<p><a href="#" onclick="addText(‘loc’);">Click to add new text to the
page</a></p>
<p id=loc>New text will appear below here</p>
<p>Some further text in the page</p>
</body>
11
Adding <p> and text to a Page (Cont..)
<head>
var myText = "This is new text to be added to the page dynamically.";
function addText(location) {
var newNode, newText, docElement;
newNode = document.createElement("p");
newText = document.createTextNode(myText);
newNode.appendChild(newText);
document.body.appendChild(newNode);
}
</script>
</head>
<body>
<p><a href="#" onclick="addText(‘');">Click to add new text to the page</a></p>
<p>New text will appear below here</p>
<p>Some further text in the page</p>
</body>
Add button dynamically
<head>
function add(t) {
var element1 = document.createElement("button");
element1.value = t;
element1.name = "b";
element1.setAttribute("style","font-size:50px;background-color:red;");
element1.onclick = function() { alert("new button created"); };
var f1 = document.getElementById("f");
f1.appendChild(element1);
}</script>
</head><body><input type="button" id="btnAdd" value="Add Button"
onClick="add('ADD BUTTON')"><p id="f">Fields:</p>
</body>
13
Remove a Node
• To remove a node, we use the element method removeChild(name of

node to be removed)
• For example:
function remText(location) {
var docElement;
docElement = document.getElementById(location);
docElement.removeChild(docElement);
}
Try:
Modify your HTML page so that the user can click on some
text to remove the text that was inserted
14
Remove a Node- Example
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
15
DOM Events
• HTML DOM Events
• HTML DOM events allow JavaScript to register different
event handlers on elements in an HTML document.
• Events are normally used in combination with functions,
and the function will not be executed before the event
occurs (such as when a user clicks a button).
• When an event occurs, a code segment is executed in
response to a specific event is called “event handler”.
Types of Events
• Keyboard
• Frame
• Drag and drop
• Form
• Clipboard
• Media
• Transition
• Server
• Touch
Event Handlers
18
Event Description DO
M
onclick The event occurs when the user clicks on an element 2

oncontextmenu The event occurs when the user right-clicks on an element to open a 3
context menu
ondblclick The event occurs when the user double-clicks on an element 2

onmousedown The event occurs when the user presses a mouse button over an 2
element
onmouseenter The event occurs when the pointer is moved onto an element 2
onmouseleave The event occurs when the pointer is moved out of an element 2
onmousemove The event occurs when the pointer is moving while it is over an element 2
onmouseover The event occurs when the pointer is moved onto an element, or onto 2
one of its children
onmouseout The event occurs when a user moves the mouse pointer out of an 2
element, or out of one of its children
Mouse Events
onmouseup The event occurs when a user releases a mouse button over an element
EventListener
The addEventListener() method attaches an event handler to the

specified element.
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click",
displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}</script>
20
EventListener- Example
• Add an event listener that fires when a user resizes the window:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = “hello”;
});
• The removeEventListener() method removes event handlers that

have been attached with the addEventListener() method:
• Example
• element.removeEventListener("mousemove", myFunction);
21
XML DOM
• The entire document is a document node

• Every XML element is an element node
• The text in the XML elements are text nodes
• Every attribute is an attribute node
• Comments are comment nodes
What is the XML DOM?
• A standard object model for XML

• A standard programming interface for XML
• Platform- and language-independent
• A W3C standard
• The XML DOM is a standard for how to get, change, add, or delete
XML elements.

10.module3 DOM-HTML 8

Uploaded by

Copyright:

Available Formats

10.module3 DOM-HTML 8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

10.module3 DOM-HTML 8

Uploaded by

Copyright:

Available Formats

THE DOM

What is the DOM?

• The W3C Document Object Model (DOM) is a platform and

• Core DOM - standard model for any structured

• In a node tree, the top node

• Changing HTML content

• The HTML DOM can be accessed with JavaScript (and

getAttribute() Returns the specified attribute value

There are five steps:

• To remove a node, we use the element method removeChild(name of

onclick The event occurs when the user clicks on an element 2

ondblclick The event occurs when the user double-clicks on an element 2

The addEventListener() method attaches an event handler to the

• The removeEventListener() method removes event handlers that

• The entire document is a document node

• A standard object model for XML

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.