JavaScript and DOM
Click here to load reader
-
Upload
jussi-pohjolainen -
Category
Technology
-
view
873 -
download
0
Transcript of JavaScript and DOM
![Page 1: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/1.jpg)
Document Object Model and JavaScript Jussi Pohjolainen
Tampere University of Applied Sciences
![Page 2: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/2.jpg)
W3C DOM
• DOM – Document Object Model – cross-‐plaDorm and language-‐independent convenFon for interacFng with objects in HTML and in XML.
• With DOM you can manipulate html/xml document! Dynamic html!
• Public interface available: hPp://www.w3.org/DOM/DOMTR
![Page 3: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/3.jpg)
W3C DOM Levels
• ( DOM Level 0 and Intermediate DOM ) – Not W3C Standards, used in Netscape 2 (Level 0) and Netscape 4 (Intermediate DOM)
• DOM Level 1 – 1998: Ability to change enFre HTML or XML document
• DOM Level 2 – 2001: Introduces “getElementById” funcFon, event model and support for XML namespaces
• DOM Level 3 – 2004: XPath, keyboard event handling
![Page 4: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/4.jpg)
Reality
See hPp://www.quirksmode.org/dom/w3c_core.html
![Page 5: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/5.jpg)
DOM Programming Intro
• DOM is a model that describes how all elements in an html page are related to topmost structure: document itself
• Can influence the document – See: hPp://www.w3.org/TR/REC-‐DOM-‐Level-‐1/introducFon.html
• Possible to read, modify and delete tags
![Page 6: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/6.jpg)
Node
• In DOM, each object is Node • In this – <p>Hello</p>
• You have two nodes – 1) element node -‐ p – 2) text node -‐ "Hello"
• Text node is child node of p element. P element is parent node of the text node
![Page 7: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/7.jpg)
Node Example <p>This is a <strong>paragraph</strong></p> <p> | -------------- | | This is a <strong> | | paragraph
![Page 8: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/8.jpg)
APribute Node
<a href=“http://www.tamk.fi”>TAMK</a> <a> ----------------- | | TAMK href | http://www.tamk.fi
![Page 9: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/9.jpg)
Different Nodes
• Element node: p, img, a • Text node: sometext • APribute node: src
![Page 10: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/10.jpg)
DOM Level 1: To Access DOM tree
• X can be some node – var parent = x.parentNode; – var firstchild = x.childNodes[0];
• How to get reference to x?
![Page 11: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/11.jpg)
Document object
![Page 12: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/12.jpg)
Access
var title = document.firstChild.firstChild.lastChild;
// document.html.head.title
var title = document.firstChild.childNodes[0].childNodes[0];
![Page 13: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/13.jpg)
Gelng Element Easier Way
var x = document.getElementsByTagName(‘strong')[0]
var x = document.getElementById('hereweare');
![Page 14: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/14.jpg)
Changing the Node
// <a href=“” id=“someId”>Link</p>
var x = document.getElementById(’someId');
x.firstChild.nodeValue = “Hello!”;
x.setAttribute(“href”, “http:/…”);
![Page 15: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/15.jpg)
Inner HTML // <a href=“” id=“someId”>Link</p>
var x = document.getElementById(’someId');
x.innerHTML = “Hello!”;
// innerHTML is NOT W3C Standard and it’s
// slower…
![Page 16: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/16.jpg)
CreaFng and Removing Nodes var x = document.createElement(’hr');
document.getElementById('inserthrhere').appendChild(x);
var node = document.getElementById('inserthrhere')
node.removeChild(node.childNodes[0]);
var x = document.createTextNode(’SomeText');
document.getElementById('hereweare').appendChild(x);
![Page 17: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/17.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function change()
{
// Get list of ALL <h1> - elements
var listOfHeading1 = window.document.getElementsByTagName("h1");
// Find the first <h1> - element in the list
var heading1 = listOfHeading1[0];
// Get the child - element of the first <h1> - element (Text)
var text = heading1.firstChild;
// Replace the text
text.data = "Hello from JS!";
}
//]]>
</script>
</head>
<body>
<h1>Title</h1>
<input type="submit" onClick="change();" value="click!"/>
</body>
</html>
![Page 18: JavaScript and DOM](https://reader037.fdocuments.us/reader037/viewer/2022100517/554a2bf1b4c90542548b4fe8/html5/thumbnails/18.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function change()
{
// Reference to the table - element
var table = document.getElementById("mytable");
var tr = document.createElement("tr"); // <tr>
var td1 = document.createElement("td"); // <td>
var td1Text = document.createTextNode("New Cell"); // "New Cell"
td1.appendChild(td1Text); // <td>New Cell</td>
var td2 = document.createElement("td"); // <td>
var td2Text = document.createTextNode("New Cell"); // "New Cell"
td2.appendChild(td2Text); // <td>New Cell</td>
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
//]]>
</script>
</head>
<body>
<table id="mytable" border="1">
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
<input type="submit" onClick="change();" value="Add Row"/>
</body>
</html>