Scribd
Upload
61 views25 pages

Javascript Dom

The Document Object Model (DOM) represents an HTML document as objects that can be manipulated with JavaScript. The DOM provides access to all elements in the page through methods like getElementById and properties like parentNode. Elements can be created, modified, and deleted dynamically using DOM methods. The DOM also defines collections like images and links that contain all elements of a specific type in the document.

Uploaded by

Merlin Mathew
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
61 views25 pages

Javascript Dom

The Document Object Model (DOM) represents an HTML document as objects that can be manipulated with JavaScript. The DOM provides access to all elements in the page through methods like getElementById and properties like parentNode. Elements can be created, modified, and deleted dynamically using DOM methods. The DOM also defines collections like images and links that contain all elements of a specific type in the document.

Uploaded by

Merlin Mathew
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/ 25

Document Object Model (DOM): Objects

and Collections

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 1
} The Document Object Model gives you
scripting access to all the elements on a web
page. Using JavaScript, you can create, modify
and remove elements in the page
dynamically.

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 2
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 3
} getElementById method
§ Returns objects called DOM nodes
§ Every piece of an HTML5 page (elements, attributes, text, etc.) is modeled in the web
browser by a DOM node
} The nodes in a document make up the page’s DOM tree,
which describes the relationships among elements
} Nodes are related to each other through child-parent
relationships
} A node can have multiple children, but only one parent
} Nodes with the same parent node are referred to as siblings
} The html node in a DOM tree is called the root node, because
it has no parent

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 4
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 5
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 6
} The DOM element methods setAttribute
and getAttribute allow you to modify an
attribute value and get an attribute value,
respectively.

} document.getElementById("myAnchor").
getAttribute("target");

} document.getElementById("myAnchor").
setAttribute("href",
"http://www.w3schools.com");
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 7
<!DOCTYPE html><html>
<head>
<script>function myFunction() {
document.getElementById("myAnchor").setAttribute("href"
, "http://www.w3schools.com");}
</script></head>
<body>
<a id="myAnchor">A Link: Go to w3schools.com</a>
<p>Click the button to set the href attribute with a
value of "www.w3schools.com" of the a element
above.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Internet Explorer 8 and
earlier does not support the setAttribute method.</p>
</body></html>

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 8
Before
clicking

After
clicking

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 9
} document object createElement method
§ Creates a new DOM node, taking the tag name as an argument. It does not insert the
element on the page.
} document object createTextNode method
§ Creates a DOM node that contains only text. Given a string argument,
createTextNode inserts the string into the text node.
} Method appendChild
§ Inserts a child node (passed as an argument) after any existing children of the node
on which it’s called
} Property parentNode contains the node’s parent
} insertBefore method
§ Inserts a node as a child, right before an existing child, which you specify.
§ node.insertBefore(newnode,existingnode)
} replaceChild method
§ Receives as its first argument the new node to insert and as its second argument the
node to replace. node.replaceChild(newnode,oldnode)
} removeChild method
§ removes a specified child node of the specified element. Returns the removed node
as a Node object, or null if the node does not exist. node.removeChild(node)

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 10
<!DOCTYPE html><html>
<head><script>
var para=document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");


element.appendChild(para);

</script></head>
<body>
<div id="div1"><p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p></div>

</body></html>

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 11
<!DOCTYPE html><html>
<head> <script>
function myFunction() {
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);}
</script> </head>
<body><ul id="myList">
<li>Coffee</li> <li>Tea</li></ul>
<p>Click the button to insert an item to the
list.</p><button onclick="myFunction()">Try
it</button><p><strong>Example
explained:</strong><br>First create a LI node,<br>
then create a Text node,<br> then append the Text
node to the LI node.<br>Finally insert the LI node
before the first child node in the list.</p>
</body></html>
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 12
Before
clicking

After
clicking

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 13
<!DOCTYPE html><html><body>
<ul id="myList">
<li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<p>Click the button to remove the first item


from the list.</p>
<button onclick="myFunction()">Try it</button>

<script>function myFunction() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);}</script>

</body></html>

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 14
Before
clicking

After
clicking

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 15
} DOM has collections—groups of related objects on
a page
} DOM collections are accessed as properties of DOM
objects such as the document object or a DOM
node
} The document object has properties containing the
images collection, links collection, forms
collection and anchors collection
§ Contain all the elements of the corresponding type on the page
} The collection’s length property specifies the
number of items in the collection

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 16
} You access the elements of the collection using
indices in square brackets
} item method of a DOM collection
§ An alternative to the square bracketed indices
§ Receives an integer argument and returns the corresponding item
in the collection.
} namedItem method
§ receives an element id as an argument and finds the element with
that id in the collection.
} href property of a DOM link node
§ Refers to the link’s href attribute
} Collections allow easy access to all elements of a
single type in a page
§ Useful for gathering elements into one place and for applying
changes across an entire page

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 17
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 18
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 19
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 20
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 21
} An element’s style can be changed dynamically
§ E.g., in response to user events
§ Can create mouse-hover effects, interactive menus and
animations
} The document object’s body property
§ Refers to the body element
} The setAttribute method is used to set the
style attribute with the user-specified color for
the background-color CSS property.
} If you have predefined CSS style classes defined for
your document, you can also use the
setAttribute method to set the class attribute.

©1992-2012 by Pearson Education, Inc. All


Rights Reserved. 22
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 23
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 24
©1992-2012 by Pearson Education, Inc. All
Rights Reserved. 25

You might also like