forms[]

Transcription

forms[]

17
forms[]
283
284
17.1 DOM
17.1.1
<body>
<p>
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>
285
JavaScript
17.1.2
childNodes
firstChild
lastChild
nextSibling
parentNode
removeChild()
previousSibling
appendChild()
replaceChild()
insertBefore()
17.1.2.1
nodeType
nodeType
Node.ELEMENT_NODE
nodeType
286
17-1
documentElement
<html>
<html>
<i>
287
17.1.2.2
src
width
setAttribute()
removeAttribute()
getAttributeNode()
specified
childNodes[]
attributes[]
attributes[]
17.1.3 DOM HTML API
location
id
style
id
17-2
HTML
title
style
forms[]
lang
title
dir
lang
write()
className
dir
class
JavaScript
<img>
getAttribute
288
<ul>
<body>
getAttribute()
setAttribute()
focus()
submit()
blur()
reset()
length
17.1.3.1 HTML
<input>
maxlength
maxLength
<label>
for
class
htmlFor
className
className
289
17.1.4 DOM
JavaScript
17.1.5 DOM
290
implementation
hasFeature()
if (document.implementation &&
document.implementation.hasFeature &&
document.implementation.hasFeature("html", "1.0")) {
//
Level 1
HTML
}
hasFeature()
true
true
17-3
hasFeature()
hasFeature()
291
hasFeature()
true
true
false
hasFeature()
17.1.5.1 IE
DOM
JavaScript
hasFeature()
292
hasFeature()
nodeType
Node.ELEMENT_NODE
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
if (!window.Node) {
var Node = {
//
ELEMENT_NODE: 1,
//
ATTRIBUTE_NODE: 2, //
TEXT_NODE: 3,
//
XML
COMMENT_NODE: 8,
//
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
17.1.6
//
n
Element
Node
HTML
DOM
getFirstChild()
getFirstChild()
firstChild
firstChild
getFirstChild()
item()
childNodes
293
item()
n = document.documentElement;
children = n.childNodes;
head = children.item(0);
body = children[1];
//
//
//
//
Node
NodeList
NodeList
namedItem()
var f = document.forms.namedItem("myform");
var g = document.forms["myform"];
var h = document.forms.myform;
namedItem()
JavaScript
var
var
var
var
294
var t = new Text("this is a new text node");
//
var t = document.createTextNode("this is a new text node");
document.
implementation
17.2
DOM
API
17.2.1
childNodes
childNodes[]
nodeType
17-1
<head>
<script>
//
// HTML
//
//
//
DOM Node
Element
Element
Document
DOM
295
countTags()
onload
childNodes
firstChild
lastChild
nextSibling
previousSibling
<body>
countChatacters()
firstChild
nextSibling
17-2
<head>
<script>
//
DOM Node
//
Text
//
//
rstChild
nextSibling
//
Text
//
function countCharacters(n) {
if (n.nodeType == 3 /*Node.TEXT_NODE*/)
return n.length;
//
n
Text
// n
//
//
Node
n
Text
JavaScript
function countTags(n) {
// n
Node
var numtags = 0;
//
0
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/) //
n
Element
numtags++;
//
var children = n.childNodes;
//
n
for(var i=0; i < children.length; i++) {
//
numtags += countTags(children[i]);
//
}
return numtags;
//
}
</script>
</head>
<!-countTags()
-->
<body onload="alert(’This document has ’ + countTags(document) + ’ tags’)">
This is a <i>sample</i> document.
</body>
296
17-2
var numchars = 0; //
//
childNodes
rstChild
nextSibling
//
n
for(var m = n. rstChild; m != null; m = m.nextSibling) {
numchars += countCharacters(m); //
}
return numchars;
//
}
</script>
</head>
<!-onload
countCharacters()
<body>
document.body
-->
<body onload="alert(’Document length: ’ +
countCharacters(document.body))">
This is a sample document.<p>How long is it?
</body>
17.2.2
document.body
<body>
body
<body>
<body>
document.getElementsByTagName("body")[0]
getElementsByTagName()
<body>
<body>
297
<table>
<TABLE>
Document.all[]
var myParagraph = document.getElementsByTagName("p")[3];
id
id
<p id="specialParagraph">
var myParagraph = document.getElementById("specialParagraph");
getElementById()
id
id
getElementById()
getElementById()
getElementById()
getElementById()
JavaScript
var tables = document.getElementsByTagName("table");
alert("This document contains " + tables.length + " tables");
298
//
var tableOfContents = document.getElementById("TOC");
var rows = tableOfContents.getElementsByTagName("tr");
var numrows = rows.length;
getElementsByName()
getElementById()
id
name
name
getElementsByName()
//
<a name="top">
var link = document.getElementsByName("top")[0];
//
<input type="radio" name="shippingMethod">
var choices = document.getElementsByName("shippingMethod");
17.2.3
reverse()
reverse()
<body>
reverse()
removeChild()
appendChild()
17-3
<head><title>Reverse</title>
<script>
function reverse(n) {
//
n
var kids = n.childNodes;
//
var numkids = kids.length; //
for(var i = numkids-1; i >= 0; i--) {
var c = n.removeChild(kids[i]);
n.appendChild(c);
}
}
</script>
</head>
<body>
<body>
//
//
//
299
<!-reverse()
-->
-->
JavaScript
<p>paragraph #1<p>paragraph #2<p>paragraph #3
<p>
<!-<button onclick="reverse(document.body);"
>Click Me to Reverse</button>
</body>
appendChild()
removeChild()
childNodes
removeChild()
reverse()
reverse()
300
17-4
//
n
Text
function reverse(n) {
if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
//
var text = n.data;
//
var reversed = "";
for(var i = text.length-1; i >= 0; i--) //
reversed += text.charAt(i);
n.data = reversed;
//
}
else { //
Text
var numkids = kids.length;
for(var i = numkids-1; i >= 0; i--) {
//
reverse(kids[i]);
//
n.appendChild(n.removeChild(kids[i])); //
}
}
}
Text
uppercase()
document.createTextNode()
replaceChild()
replaceChild()
uppercase()
parentNode
uppercase()
<p>
id
getElementById()
17-5
<script>
//
n
Text
function uppercase(n) {
if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
//
Text
Text
301
}
else {
//
Text
for(var i = 0; i < kids.length; i++) uppercase(kids[i]);
}
}
</script>
<!-<p>
id
<p id="p1">This <i>is</i> paragraph 1.</p>
<p id="p2">This <i>is</i> paragraph 2.</p>
-->
<!-uppercase()
-->
<!-document.getElementById()
-->
<button onclick="uppercase(document.getElementById(’p1’));">Click
Me</button>
appendData()
insertData()
deleteData()
replaceData()
removeChild()
appendChild()
embolden()
createElement()
<b>
<b>
JavaScript
//
Text
//
replaceChild()
var newNode = document.createTextNode(n.data.toUpperCase());
var parent = n.parentNode;
parent.replaceChild(newNode, n);
302
17-6
<b>
<script>
//
n
Element
//
n
<b>
function embolden(node) {
var bold = document.createElement("b");
var parent = node.parentNode;
parent.replaceChild(bold, node);
bold.appendChild(node);
}
</script>
//
//
//
//
<b>
<b>
<b>
-->
<!-<p id="p1">This <i>is</i> paragraph #1.</p>
<p id="p2">This <i>is</i> paragraph #2.</p>
<!-embolden()
-->
<button
onclick="embolden(document.getElementById(’p1’));">Embolden</button>
element.setAttribute()
var headline = document.getElementById("headline");
headline.setAttribute("align", "center");
align=’center’
//
//
align
var headline = document.getElementById("headline");
headline.align = "center"; //
17.2.4
<b>
embolden()
document.createElement()
debug()
alert()
debug()
document.createTextNode()
303
JavaScript
debug()
<div>
debug()
<div>
<p>
<p>
<div>
<div>
<div>
innerHTML
innerHTML
+=
innerHTML
304
17-7
/**
*
debug()
*
alert()
**/
function debug(msg) {
//
//
if (!debug.box) {
//
<div>
debug.box = document.createElement("div");
//
CSS
debug.box.setAttribute("style",
"background-color: white; " +
"font-family: monospace; " +
"border: solid black 3px; " +
"padding: 10px;");
//
<div>
document.body.appendChild(debug.box);
<div>
innerHTML
//
//
HTML
innerHTML
//
W3C DOM
Netscape 6
IE 4
//
<h1>
//
Text
innerHTML
//
innerHTML
debug.box.innerHTML = "<h1 style=’text-align:center’>Debugging Output</h1>";
}
debug.box
<div>
//
//
<p>
var p = document.createElement("p");
//
Text
<p>
p.appendChild(document.createTextNode(msg));
//
<p>
<div>
debug.box.appendChild(p);
}
debug()
305
17.2.5
appendChild()
insertBefore()
replaceChild()
reverse()
function reverse(n) { //
n
var f = document.createDocumentFragment();
DocumentFragment
while(n.lastChild)
//
f.appendChild(n.lastChild); //
DocumentFragment
n.appendChild(f);
//
}
//
document.getElementsByTagName("p")[0].appendChild(fragment);
17.2.6
maketoc()
maketoc()
JavaScript
<script src="Debug.js"></script> <!-debug()
-->
<script>var numtimes=0;</script> 
<button onclick="debug(’clicked: ’ + numtimes++);">press me</button>
306
<h1>
<h2>
<h3>
<h4>
<h5>
maketoc()
name
<a>
href
maketoc()
maketoc()
<h6>
307
<h1>
<h2>
maketoc()
<script src="TOC.js"></script> <!-maketoc()
-->
<!-maketoc() -->
<body onload="maketoc(document.getElementById(’placeholder’))">
<!-span
TOC
-->
<span id="placeholder">Table Of Contents</span>
// ...
...
maketoc()
<a href="#" onclick="maketoc(this); return false;">Show Table Of
Contents</a>
maketoc()
maketoc()
maketoc()
17-8
/**
*
TOC
replace
**/
function maketoc(replace) {
//
<div>
TOC
var toc = document.createElement("div");
TOC
//
toc.style.backgroundColor = "white";
toc.style.fontFamily = "sans-serif";
style
// TOC
var anchor = document.createElement("a");
anchor.setAttribute("name", "TOC");
toc.appendChild(anchor);
//
//
//
<a>
//
TOC
anchor.appendChild(document.createTextNode("Table Of Contents"));
JavaScript
maketoc()
308
17-8
//
<table>
TOC
var table = document.createElement("table");
toc.appendChild(table);
//
<tbody>
TOC
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//
var sectionNumbers = [0,0,0,0,0,0];
<h1> <h2>
//
//
TOC
addSections(document.body, tbody, sectionNumbers);
TOC
replace
TOC
//
replace.parentNode.replaceChild(toc, replace);
n
<h1>
<h6>
//
//
toc
//
HTML
sectionNumbers
//
//
maketoc()
maketoc()
//
JavaScript
function addSections(n, toc, sectionNumbers) {
//
n
for(var m = n. rstChild; m != null; m = m.nextSibling) {
//
m
// (m instanceof HTMLHeadingElement)
//
IE
//
tagname
H1~H6
if ((m.nodeType == 1) && /* Node.ELEMENT_NODE */
(m.tagName.length == 2) && (m.tagName.charAt(0) == "H")) {
//
var level = parseInt(m.tagName.charAt(1));
if (!isNaN(level) && (level >= 1) && (level <= 6)) {
//
sectionNumbers[level-1]++;
//
0
for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
//
//
2.3.1
var sectionNumber = "";
309
//
//
TOC
var anchor = document.createElement("a");
anchor.setAttribute("name", "SECT"+sectionNumber);
TOC
//
var backlink = document.createElement("a");
backlink.setAttribute("href", "#TOC");
backlink.appendChild(document.createTextNode("Contents"));
anchor.appendChild(backlink);
//
n.insertBefore(anchor, m);
TOC
//
var link = document.createElement("a");
link.setAttribute("href", "#SECT" + sectionNumber);
//
var sectionTitle = getTextContent(m);
//
link.appendChild(document.createTextNode(sectionTitle));
TOC
//
var row = document.createElement("tr");
//
var col1 = document.createElement("td");
var col2 = document.createElement("td");
//
col1.setAttribute("align", "right");
col1.appendChild(document.createTextNode(sectionNumber));
//
col2.appendChild(link);
//
row.appendChild(col1);
row.appendChild(col2);
toc.appendChild(row);
//
m.insertBefore(document.createTextNode(sectionNumber+": "),
m. rstChild);
JavaScript
for(var i = 0; i < level; i++) {
sectionNumber += sectionNumbers[i];
if (i < level-1) sectionNumber += ".";
}
310
17-8
}
}
else { //
addSections(m, toc, sectionNumbers);
}
}
}
//
n
Text
//
HTML
function getTextContent(n) {
var s = ’’;
var children = n.childNodes;
for(var i = 0; i < children.length; i++) {
var child = children[i];
if (child.nodeType == 3 /*Node.TEXT_NODE*/) s += child.data;
else s += getTextContent(child);
}
return s;
}
}
17.2.7
XML
le://C:/javascript/DisplayEmployeeData.html?data.xml
<employees>
<employee name="J.
Doe"><job>Programmer</job><salary>32768</salary></employee>
<employee name="A.
Baker"><job>Sales</job><salary>70000</salary></employee>
<employee name="Big
Cheese"><job>CEO</job><salary>1000000</salary></employee>
</employees>
311
loadXML()
Document
createDocument()
load()
loadXML()
loadXML()
makeTable()
loadXML()
makeTable()
makeTable()
17-9
XML
<head><title>Employee Data</title>
<script>
//
URL
XML
//
URL
handler
XML
function loadXML(url, handler) {
//
DOM Level 2
if (document.implementation && document.implementation.createDocument) {
//
Document
var xmldoc = document.implementation.createDocument("", "", null);
//
xmldoc.onload = function() { handler(xmldoc, url); }
//
URL
xmldoc.load(url);
}
//
Microsoft
API
else if (window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); //
xmldoc.onreadystatechange = function() {
//
onload
if (xmldoc.readyState == 4) handler(xmldoc, url);
}
xmldoc.load(url);
//
}
}
JavaScript
DOMImplementation.
312
17-9
XML
//
XML
HTML
function makeTable(xmldoc, url) {
//
<table>
var table = document.createElement("table");
table.setAttribute("border", "1");
document.body.appendChild(table);
//
HTMLTableElement
method
var caption = "Employee Data from " + url;
table.createCaption().appendChild(document.createTextNode(caption));
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("Name"));
headerrow.insertCell(1).appendChild(document.createTextNode("Job"));
headerrow.insertCell(2).appendChild(document.createTextNode("Salary")
);
//
xmldoc
<employee>
var employees = xmldoc.getElementsByTagName("employee");
//
for(var
//
//
var
var
var
var
<employee>
i = 0; i < employees.length; i++) {
DOM API
<job>
<salary>
Text
e = employees[i];
name = e.getAttribute("name");
job = e.getElementsByTagName("job")[0]. rstChild.data;
salary = e.getElementsByTagName("salary")[0]. rstChild.data;
//
API
//
API
var row = table.insertRow(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}
</script>
</head>
<!-makeTable()
loadXML()
XML
onload
location.search
XML
URL
HTML
313
17.3
IE 4
DOM
17.3.1
childNodes[]
childNodes[]
children[]
children[]
childNodes[]
<p>
children[]
<p>
innerText
17.3.2
getElementById()
all[]
all[]
all[]
var e1 = document.all[0];
var e2 = e1.all[4];
all[]
//
// e1
JavaScript
DisplayEmployeeData.html?data.xml
-->
<body onload="loadXML(location.search.substring(1), makeTable)">
</body>
314
getElementbyId()
all[]
id
name
name
var specialParagraph = document.all["special"];
var radioboxes = form.all["shippingMethod"]; //
var specialParagraph = document.all.special;
var radioboxes = form.all.shippingMethod;
all[]
getElementById()
getElementsByName()
all[]
id
all[]
name
tag()
var lists = document.all.tags("UL");
var items = lists[0].all.tags("LI");
//
//
<ul>
<ul>
<li>
17.3.3
setAttribute()
getAttribute()
removeAttribute()
innerHTML
innerHTML
innerHTML
innerHTML
315
outerHTML
innerText
outerText
innerHTML
JavaScript
outerHTML
insertAdjacentHTML()
insertAdjacentText()
innerHTML
17.4
forms[]
Netscape 4
DOM
links[]
<layer>
<div>
Layer()
forms[]
layers[]
images[]
name
316
document.layers[0]
document.layers[’layer1’]
document.layer1
//
//
//
name
id
document.write()
document
document.close()
load()
//
mylayer
document.mylayer.document.layers[1];
17.5 Traversal
Range API
17.5.1 DOM Traversal API
<img>
<table>
document.implementation.hasFeature("Traversal", 2.0)
//
true
317
17.5.1.1 NodeIterator
TreeWalker
previousNode()
nextNode()
null
nextNode()
firstChild()
previousNode()
lastChild()
nextSibling()
previousSibling()
parentNode()
nextNode()
createNodeIterator()
createTreeWalker()
if (document.createNodeIterator && document.createTreeWalker) {
/*
Traversal API */
}
SHOW_
false
createTreeWalker()
JavaScript
<img>
nextNode()
318
17.5.1.2
createTreeWalker()
|
NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT
NodeFilter.SHOW_ELEMENT
NodeFilter.SHOW_ALL
~NodeFilter.SHOW_COMMENT
~
NodeFilter.SHOW_TEXT
createTreeWalker()
null
NodeFilter.FILTER_ACCEPT
NodeFilter.FILTER_SKIP
NodeFilter.FILTER_REJECT
319
17-10
NodeIterator
JavaScript
//
NodeFilter
<img>
function img lter(n) {
if (n.tagName == ’IMG’) return NodeFilter.FILTER_ACCEPT;
else return NodeFilter.FILTER_SKIP;
}
//
NodeIterator
<img>
var images = document.createNodeIterator(document, //
/*
Element
*/
NodeFilter.SHOW_ELEMENT,
/*
<img> */
img lter,
/* HTML
*/
false);
//
var image;
while((image = images.nextNode()) != null) {
image.style.visibility = "hidden"; //
}
17.5.2 DOM Range API
document.implementation.hasFeature("Range", "2.0");
//
Range
true
320
17.5.2.1
<body>
<h1>
<body><h1>Document Title</h1><body>
createRange()
var r = document.createRange();
setStart()
setEnd()
setStartBefore()
setEndBefore()
selectNode()
setEndAfter()
selectNodeContent()
selectNode()
selectNodeContent()
setStartAfter()
321
17.5.2.2
JavaScript
deleteContents()
<p>This is <i>only</i> a test
deleteContents()
<p>This<i>ly</i> a test
<i>
extractContents()
Node.cloneNode()
extractContents()
deleteContents()
is <i>on</i>
extractContents()
cloneContents()
insertNode()
extractContents()
322
surroundContents()
<i>
surroundContents()
This is only a test
This is <i>only</i> a test
surroundContents()
deleteContents()
surroundContents()
compareBoundaryPoints()
cloneRange()
toString()
startContainer
startOffset
endContainer
commonAncestorContainer
endOffset

forms[]

Transcription

Similar documents

Duden Korrektor 7.0 Handbuch

JavaScript

Dynamics of Disability and Work in Canada