第四章 HTML与JavaScript
DHTML就是与CSS和Web文档进行交互生成动态页面的JavaScript。
4.1HTML文档剖析
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>my first page</title> </head> <body>hello html!</body> </html>
HTML文档是一种文本文档，它以DOCTYPE开头，告诉用户代理这个文档是什么以及它应该如何被处理。接着使用了一个HTML元素，它包含了所有的其他元素以及文本的内容。HTML元素中应包含一个lang属性（定义所使用的语言（人类语言））和一个dir属性（定义文本的读取顺序）。在HTML元素中需要一个带有TITLE元素的HEAD元素。可以添加一个可选的META元素，它决定了使用什么编码来显示（如果你还没有在服务器上设置编码）
4.2在网页中使用JavaScript提供反馈信息的方式
1）使用window方法：prompt(),alert(),confirm()
alert警告窗口,它只是简单地给用户一个信息，并在OK按钮激活之前停止代码的进一步执行。这与prompt()和confrim()是不同的，前者允许访问者输入一些东西，但后者要求用户确认一个动作。
confirm()是根据用户激活OK或Cancel按钮而返回布尔型值（True或False）的方法.确认对话框时一种可以防止用户在Web应用程序中执行错误步骤的简单的方法。
var user=prompt('please choose a name',' s'); 当用户激活OK按钮时，变量user的值可能是s（如果用户没有更改预设值）或者用户输入的任何值。当用户激活Cancel按钮时，这个变量的值就会是null.
4.3通过DOM访问文档
两种方法得到文档的元素：
document。getElementsByTagName('p'); //返回所有名称为P的对象集合。
document.getElementById('id').//返回带有这个ID的元素
4.4 元素的子节点，父节点，兄弟节点和值。
我们知道通过拼接getElementsByTagName()方法可以访问到其他元素内部的元素，然而这种方式相当笨拙，它意味着要知道锁更改的HTML文档，DOM提供了一种更好的方法，就是通过子节点，父节点和兄弟结点。
文档中的每个结点都有一些重要的属性：
1）最重要的是nodeType,它描述该节点是什么--元素，属性，注释，文本或其他几种类型（共12个）
2）另一个重要的性质是nodeName，它表示元素的名字，如果是文本结点的话则表示#text.根据文档类型和用户代理，nodeName可以是大写的，也可以是小写的。
3）nodeValue是节点的值：如果节点是个元素，则它为null;如果元素是文本节点，则它为文本内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Date example</title> <style type="text/css"> .error{color:#c00;font-weight:bold;} </style> <script type="text/javascript"> function checkDate() { if(!document.getElementById||!document.createTextNode) { return; } var dateField=document.getElementById('date'); if(!dateField) { return; } var errorContainer=dateField.parentNode.getElementsByTagName('span')[0]; if(!errorContainer) { return; } var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}"); var errorMessage=''; errorContainer.firstChild.nodeValue=''; var dateValue=dateField.value; if(dateValue=='') { errorMessage='Please provide a date.'; } else if(!checkPattern.test(dateValue)) { errorMessage='Please provide the date in the defined format'; } if(errorMessage!='') { errorContainer.firstChild.nodeValue=errorMessage; dateField.focus(); return false; } else { return true; } } </script> </head> <body> <form action="eventssearch.php" method="post" onsubmit="return checkDate();"> <p> <label for="date">Date in the format DD/MM/YYYY:</label></br> <input type="text" id="date" name="date"/> <input type="submit" value="Check" /><br/> <span class="error"></span> </p> </form> </body> </html>
技术不是一般的差，这个东西检查不错哪里出问题了，又不能运行，囧。。。
4.5 修改元素属性
DOM规范提供了两种方法来读取和设置属性值---getAttribute()和setAttribute()；getAttribute()方法有一个参数---属性名；setAttribute()方法需要两个参数---属性名和新的属性值
4.6 创建，移除和替换元素
document.createElement('element') //创建一个标签名为element的新元素
document.createTextNode('string') //创建一个节点值为string的文本节点
node.appendChild(newNode) 将newNode作为子节点，添加在node的所有子节点之后
newNode=node.cloneNode(bool) 创建newNode节点作为node的副本。如果bool值为true，这个克隆将包括所有原节点的子节点机器属性的克隆。
node.insertBefore(newNode, oldNode) 把newNode作为一个node的新节点插入到oldNode之前。
node.removeChild(oldNode) 移除node节点的子节点oldNode
node.replaceChild(newNode, oldNode)使用节点newNode替换node节点的子节点oldNode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Date example</title> <style type="text/css"> .error{color:#c00;font-weight:bold;} </style> <script type="text/javascript" src="submitToLinks.js"></script> </head> <body> <form action="eventssearch.php" method="post" onsubmit="return checkDate();"> <p> <label for="Name">name:</label></br> <input type="text" id="Name" name="Name"/> <input type="submit" value="send" /><br/> </p> </form> </body> </html> function submitToLinks() { if(!document.getElementById||!document.createTextNode) { return; } var inputs,i,newLink,newText; inputs=document.getElementsByTagName('input'); for(i=0;i<inputs.length;i++) { if(inputs[i].getAttribute('type').toLowerCase()!='submit') { continue; i++; } newLink=document.createElement('a'); newText=document.createTextNode(inputs[i].getAttribute('value')); newLink.appendChild(newText); newLink.setAttribute('href','javascript:document.forms[0].submit()'); inputs[i].parentNode.replaceChild(newLink,inputs[i]); } } window.onload=submitToLinks;
有些不知所谓了，有些痛苦，但是得坚持，或许这种方式得改变，不过应该是自己浮躁引起的。不是书本的问题。。。
4.6.1避免NOSCRIPT
SCRIPT元素有一个对立的NOSCRIPT. 这个元素最初目的是在JavaScript不可用的时候为用户提供可选择的内容。
4.6.2 通过innerHTML简化脚本
element.innerHTML：读写给定element的HTML内容，它是一个字符串，包括所有子节点及它们的属性和文本内容。（以前接触过但是一直不知道它的用途。。囧啊）
DOMhelp：自己的辅助函数库。。 好多函数呀。。。
