INTRODUCTION TO DOM AND DOM TREE
systematiclab
544 views
19 slides
Jan 11, 2017
Slide 1 of 19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
About This Presentation
VISIT YOUTUBE CHANCEL FOR LECTURES
YouTube/SYSTEMATICLAB
Slide Content
The DOM tree 1
The DOM tree 2
Types of DOM nodes element nodes (HTML tag) can have children and/or attributes text nodes (text in a block element) attribute nodes (attribute/value pair) text/attributes are children in an element node cannot have children or attributes not usually shown when drawing the DOM tree 3 <p> This is a paragraph of text with a <a href ="/path/page.html">link in it</a>. </p> HTML
Types of DOM nodes 4 <p> This is a paragraph of text with a <a href ="/path/page.html">link in it</a>. </p> HTML
Traversing the DOM tree name(s) description firstChild , lastChild start/end of this node's list of children childNodes array of all this node's children nextSibling , previousSibling neighboring nodes with the same parent parentNode the element that contains this node 5
DOM tree traversal example 6 <p id="foo">This is a paragraph of text with a <a href ="/path/to/another/page.html">link</a>.</p> HTML
Elements vs text nodes Q: How many children does the div above have? A: 3 an element node representing the <p> two text nodes representing "\n\t" (before/after the paragraph) Q: How many children does the paragraph have? The a tag? 7 <div> <p> This is a paragraph of text with a <a href ="page.html">link</a>. </p> </div> HTML
8 Adding Some Text To A Page There are five steps: Create a new Element Create new Text Append the new Text to the new Element Find an existing Element Append the new Element to the existing Element
9 1. Create New Element Node Let us, say create a new <p> tag (element) so that we can attach some text to it For convenience, we can put the new object into a variable var newNode; newNode = document.createElement(“p”)
10 2. Create a Text Node Next, create a text node Again, for convenience, we can put the new text node into a variable var newText; newText = document.createTextNode(“Some text.”)
11 3. Attach the New Text Node to the New Element To put the text into the page, we have to attach the text node to the new HTML element: newNode.appendChild(newText);
12 4.Find an Existing Element The new element with our text node attached to it is still floating around in a Javascript world. We need to find an existing element so that we can attach it For convenience, we shall put this existing element into a variable var docElement; docElement = document.getElementById(“thisLocation”);
13 5. Append the New Element to the Existing Element To insert our text into the page, we now have to append the new element to the existing element docElement.appendChild(newNode);
14 Putting the 5 Steps Together < head> <script language=" javascript " type="text/ javascript "> var myText ; myText = "This is new text to be added to the page dynamically."; function addText (location) { var newNode ; var newText ; var docElement ; newNode = document.createElement ("p"); newText = document.createTextNode ( myText ); newNode.appendChild ( newText ); docElement = document.getElementById (location); docElement.appendChild ( newNode ); }</ script> </head> <body> <p><a href ="#" onclick =" addText (' thisLocation ');">Click to add new text to the page</a></p> <p id=" thisLocation ">New text will appear below here</p> <p>Some further text in the page</p> </body>
15 Attribute Nodes We can get at the attributes of an element through attribute nodes Attribute nodes, like text nodes are always contained in element nodes We shall look at methods: getAttribute() setAttribute()
16 Getting Attribute Nodes Hands On Create a file JavascriptDOM.html Add this code to alert the attribute of an element: function dispAttribs () { var messg ; attribs = new Array; attribs = document.getElementsByTagName ("p"); for (i = 0; i < attribs.length ; i++) { messg = attribs [i]. getAttribute (" className "); alert( messg ); } } Add this to the bottom of the body: <p onclick =" dispAttribs ();">Click here to see class attributes</p> Try this in Firefox Point to consider: why is this attribute called ‘ className ’?
17 Setting Attribute Nodes Hands On Create the file JavascriptDOM.html Add this code to change the attribute of an element: function chngAttribs () { var messg ; attribs = new Array; attribs = document.getElementsByTagName ("p"); for (i = 0; i < attribs.length ; i++) { attribs [i]. setAttribute (" className ","jazz"); } } Add this to the bottom of the body: <p onclick =" chngAttribs ();">Click here to change class attributes</p>
18 User inserts and removes text Hands On Crate file JavascriptDOM.html Place code in this page so that: When the user mouseovers on an image, the relevant text appears When the user mouseouts on an image, the text disappears
Removing a node from the page 19 function slideClick () { var bullets = document.getElementsByTagName ("li"); for ( var i = 0; i < bullets.length ; i++) { if (bullets[i]. innerHTML.indexOf ("children") >= 0) { bullets[i].remove(); } } } JS each DOM object has a removeChild method to remove its children from the page Prototype adds a remove method for a node to remove itself
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 544
- Slides 19
- Age 3246 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views