Embed Size (px)
Citation preview
Document Object Model
Lecture 19
Does the last paragraph node have any children?
<html><head> <title>My Document</title> <script type="text/javascript"> function report() { if (document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1).hasChildNodes() ) {alert("It has child nodes"); } else { alert("It has no child nodes"); } } </script></head><body> <form> <button type="button" onClick=“report();">Has last paragraph any child nodes?</button> </form> <h1>My first header</h1> <p>My first paragraph</p> <p>My second paragraph</p> <h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p></body></html>
How many children does last paragraph node have?
<html>
<head> <title>My Document</title>
<script type="text/javascript">
function change()
{alert(document.getElementsByTagName("p").
item(document.getElementsByTagName("p").length-1).childNodes.length);}
</script>
</head>
<body>
<form>
<button type="button" onClick="change();">
How many children has last paragraph?</button>
</form>
<h1>My first header</h1>
<p>My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1>
<p>My third paragraph</p> <p>My fourth paragraph</p>
</body>
</head>
What is nodeType of this child?
<html><head> <title>My Document</title> <script type="text/javascript"> function report() {alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeType);} </script></head><body> <form> <button type="button" onClick=“report();"> What is nodeType of this child ? </button> </form> <h1>My first header</h1> <p>My first paragraph</p> <p>My second paragraph</p> <h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p></body></head>
Inspecting type of child of last paragraph node (contd)
• We have seen that the nodeType of the child of the last paragraph node is 3, which means that it is an TEXT_NODE
What is nodeValue of this child?
<html><head> <title>My Document</title> <script type="text/javascript"> function report() {alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeValue);} </script></head><body> <form> <button type="button" onClick=“report();"> What is nodeType of this child ? </button> </form> <h1>My first header</h1> <p>My first paragraph</p> <p>My second paragraph</p> <h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p></body></head>
Change nodeValue of this child
<html><head> <title>My Document</title> <script type="text/javascript"> function change() {document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1). childNodes. item(0).nodeValue=“A new fourth paragraph”;} </script></head><body> <form> <button type="button" onClick=“change();"> Change nodeValue of this child </button> </form> <h1>My first header</h1> <p>My first paragraph</p> <p>My second paragraph</p> <h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p></body></head>
Note the change• The text of the last paragraph has changed
Formal spec for Elementinterface Element : Node {
readonly attribute DOMString tagName;
DOMString getAttribute(in DOMString name);
void setAttribute(in DOMString name, in DOMString value) raises(DOMException);
void removeAttribute(in DOMString name) raises(DOMException);
Attr getAttributeNode(in DOMString name);
Attr setAttributeNode(in Attr newAttr)
raises(DOMException);
Attr removeAttributeNode(in Attr oldAttr)
raises(DOMException);
NodeList getElementsByTagName(in DOMString name);
void normalize(); };
Example, slide 1<html>
<head>
<title>My Document</title>
<style>
p.mypara { color:red }
</style>
<script type="text/javascript">
function change()
{attr1 = document.createAttribute("class");
document.getElementsByTagName("p").item(1).setAttributeNode(attr1);
document.getElementsByTagName("p").item(1).setAttribute("class","mypara");}
function report()
{alert(document.getElementsByTagName("p").
item(1).getAttributeNode("class").nodeValue);}
</script>
</head>
<body> <form> <button type="button"
onClick="report();">Report "class" of second paragraph</button>
</form> <form> <button type="button" onClick="change();">Set
"class" of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 2 (execution in MSIE 6)
<body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 3 (execution in MSIE 6)result of hitting the “report” button
<body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 4 (execution in MSIE 6)result of hitting the “set class” button
Note that appearance of 2nd para hat not changed<body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 5 (execution in MSIE 6)result of hitting the “report” button again
<body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 6
• Browser implementation of the DOM Level 1 Core is not yet consistent
• As we will see when we run the same file with Mozilla 6
Example, slide 7 (execution in Mozilla 6)result of hitting the “report” button
note that no alert box appears <body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 8 (execution in Mozilla 6)result of hitting the “set class” button
Note that the color of the 2nd para has changed <body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
Example, slide 9 (execution in Mozilla 6)result of hitting the “report” button again
Now an alert box DOES appear<body> <form> <button type="button" onClick="report();">Report
"class" of second paragraph</button> </form> <form> <button type="button" onClick="change();">Set "class"
of second paragraph</button> </form> <h1>My first header</h1> <p class="mypara">My first paragraph</p> <p>My second paragraph</p>
<h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p>
</body></head>
got here on 21 mar 2006
![Linguistics Environment function loadScript(url){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.getElementsByTagName('head')[0].appendChild(script);](https://img.pdfslide.us/doc/110x75/577ccd301a28ab9e788bbd1b/linguistics-environment-.jpg)
![Latest news - World Wide Web Consortium... test(function() {assert_equals(document.body, document.getElementsByTagName("body")[0]))},](https://img.pdfslide.us/doc/110x75/5b008e3a7f8b9a89598cca5e/latest-news-world-wide-web-consortium-src-script-srctestharnessreportjsscript.jpg)
