<!--
DOM: document object model 文档对象模型。
文档：标记型文档(html xml)
对象：将文档或者文档中的标签等内容都封装到了对象中。
模型：只要是标记型文档都通用。
为了实现动态效果。需要对页面中的 标签进行操作，
操作所需的属性和行为都可以定义到该标签对象中。
只要找到了要操作的标签，就可以调用该标签对象的属性和方法。来完成对该标签的操作。
所以就需要有一个可以将标签解析成对象的技术。而这个技术就是DOM.
到底如何解析的呢？
从标记型文档开始，逐一解析，1，将标记型文档封装成document。接着将解析到的标签按照层次关系封装成对象。
以及属性和文本全都变成对象。
最后在内存中形成了一个具有层次关系的DOM树。
通过树中的节点对象的方法就可以对这些节点进行操作。
可以实现最基本的节点的操作：增删改查。
-------------
DHTML：动态的html，包含html，css，Javascript，dom。
HTML：负责提供标签，对数据进行标记封装。
CSS：负责提供样式属性，对数据进行样式的定义。
DOM：负责将标记文档和标签等内容解析成对象，并在对象中定义属性和行为，就可以指挥对象做事情。
Javascript：负责的是页面的行为(该怎么动)。动态效果的体现，需要程序设计语言来完成。
BOM:Browser Object Model.浏览器对象模型。
将浏览器也封装成了对象。
window
|--history:可以操作历史记录的对象。
|--location：可以操作地址栏的对象。
|--document：可以操作文档数据的对象。
-->
<!-- 演示location对象。
1，定义事件源，按钮。
2，注册事件动作。
-->
<script type="text/javascript">
//定义一个功能。
function locationDemo(){
//演示location。
//alert(window.location.href);
location.href = "http://www.sina.com.cn";
}
</script>
<input type="button" value="演示地址栏" onclick="locationDemo()" />
<!--
DOM:的编程思想：其实就是不断的对dom树中的节点进行操作。
而操作节点的前提：就是必须先获取节点。
如何获取节点才是最重要的。
一个页面中如何获取到其他节点。document对象最清楚。
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName 获取基于指定元素名称的对象集合。
-->
<script type="text/javascript">
function getNodeDemo() {
//通过getElementById的方式获取div节点。
//var node = document.getElementById("qq");
//alert(node.innerHTML);
//演示getElementsByName的方式获取节点。
//var nodes = document.getElementsByName("user");
//alert(nodes[0].value);
//var node = document.getElementsByName("user")[0];
//alert(node.value);
// 通过标签名获取。
//var node = document.getElementsByTagName("div")[0];
//alert(node.innerHTML);
//node.innerHTML = "大家，该吃饭了";
//获取局部标签的方法。
var tableNode = document.getElementsByTagName("table")[0];
var divNodes = tableNode.getElementsByTagName("div");
for(var x=0; x<divNodes.length; x++){
alert(divNodes[x].innerHTML);
}
}
</script>
<input type="button" value="演示获取节点" onclick="getNodeDemo()" />
<div id="qq">这是DIV区域</div>
<input type="text" name="user" />
<table>
<tr>
<td>
<div>表格的div</div>
</td>
</tr>
</table>
<style type="text/css">
/*
定义一下新闻区域范围。
*/
#newsdiv{
border:solid 1px #3366FF;
width: 650px;
padding: 20px;
}
/*让新闻字体和超链接有点距离。调整新闻字体区域的上外边距*/
#newstext{
margin-top: 20px;
}
/*
让调整字体的超链接居右。
*/
#cfdiv{
text-align: right;
width: 500px;
}
#cfdiv a:link,#cfdiv a:visited{
color:#0033FF;
text-decoration: none;
}
#cfdiv a:hover{
color:#FF6633;
}
/*预定于选择器，由用户来决定到底用哪个样式*/
.max{
color:blue;
font-size:18px;
background-color: #CCFFFF;
}
.min{
color:red;
font-size:12px;
background-color: #33FF66;
}
.norm{
color:black;
font-size:16px;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function changeFont(name){
//1,获取被处理的节点对象。新闻文字区域。
var divNode = document.getElementById("newstext");
//2,对获取到的被处理节点进行操作。改变该节点中文字的大小。
/*
操作样式少可以用style属性的方式去调用。
当对一个节点多次样式操作时，这样做会后期维护很麻烦。
可以让多样式进行封装，封装到一个选择器中，只要给该节点加载指定的选择器样式就哦了。
*/
/*
divNode.style.fontSize = size+"px";
divNode.style.color = clr;
with(divNode.style){
}
*/
//通过改变class属性的值就可以改变样式了。
divNode.className = name;
}
</script>
<!--
示例：新闻字体调整。通过给定的大字体，中字体，小字体。来完成对新闻文字的调整。
DHTML
1，定义页面的结构。HTML标签。
2，定义页面的样式效果。CSS
3，动态效果：对象已被DOM解析驻留在内存中。
3.1 明确事件源。超链接。
3.2 明确事件动作，点击。onclick。并注册到事件源上。
3.3 定义处理方式。
3.3.1 明确被处理的节点。
3.3.2 获取被处理的节点对象。
-->
<div id="newsdiv">
<div id="newstitle"><h1>新闻标题--毕业生699万，工作何处求！</h1></div>
<div id="cfdiv">
<a href="javascript:void(0)" onclick="changeFont(‘max‘)">大字体</a>
<a href="javascript:void(0)" onclick="changeFont(‘norm‘)">中字体</a>
<a href="javascript:void(0)" onclick="changeFont(‘min‘)">小字体</a>
</div>
<hr/>
<div id="newstext" class="norm">
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
央视说:大学生，有位来。大学生分三种，已工作的，没工作，传智播客的。<br/>
</div>
</div>
<!--
表单校验。
1，校验方式：填写完一个就校验，提示信息在右边显示。
1.1 通过失去焦点事件完成。
1.2 提示信息要显示需要区域。所在组件的旁边定义一个区域。
2，正则表达式对数据进行校验。
3，如何控制控制表单在组件数据错误的情况下不提交。
-->
<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag = false;
//获取用户名节点对象。
var userNode = document.getElementsByName("user")[0];
//对用户名校验只要是abc就是正确。提示用户名正确。否则，用户名错误。
var username = userNode.value;
//因为要将提示信息存储到span区域中，所以要先获取到span区域。
var spanNode = document.getElementById("userspan");
//按照正则表达式的方式对用户名进行校验，要求四个字母。
var regex = new RegExp("^[a-zA-Z]{4}$");
//if(username==‘abc‘){
if(regex.test(username)){
spanNode.innerHTML = "用户名正确".fontcolor(‘green‘);
flag = true;
}else{
spanNode.innerHTML = "用户名错误".fontcolor(‘red‘);
}
return flag;
}
//校验密码。发现代码一致，对重复代码进行抽取。
function checkPsw(){
var flag = false;
//获取用户名节点对象。
var passNode = document.getElementsByName("psw")[0];
//对用户名校验只要是abc就是正确。提示用户名正确。否则，用户名错误。
var pass = passNode.value;
//因为要将提示信息存储到span区域中，所以要先获取到span区域。
var spanNode = document.getElementById("pswspan");
//按照正则表达式的方式对用户名进行校验，要求四个字母。
var regex = new RegExp("^[0-9]{4}$");
//if(username==‘abc‘){
if(regex.test(pass)){
spanNode.innerHTML = "密码格式正确".fontcolor(‘green‘);
flag = true;
}else{
spanNode.innerHTML = "密码格式错误".fontcolor(‘red‘);
}
return flag;
}
function checkForm(){
//要依赖于组件校验完的结果。
//if(checkUser()){
// return true;
//}else{
// return false;
//}
return checkUser();
}
function myCheckForm(){
//获取表单对象。
var formNode = document.getElementById("regform");
if(checkUser()){
formNode.submit();
}
}
*/
//代码抽取。
function check(name, spanid, reg, okinfo, errinfo) {
var flag = false;
var node = document.getElementsByName(name)[0];
var val = node.value;
var spanNode = document.getElementById(spanid);
if (reg.test(val)) {
spanNode.innerHTML = okinfo.fontcolor(‘green‘);
flag = true;
} else {
spanNode.innerHTML = errinfo.fontcolor(‘red‘);
}
return flag;
}
//校验用户名。
function checkUser() {
var reg = new RegExp("^[a-zA-Z]{4}$");
return check("user", "userspan", reg, "用户名正确", "用户名错误");
}
//校验密码：
function checkPsw() {
var reg = new RegExp("^[0-9]{4}$");
return check("psw", "pswspan", reg, "密码格式正确", "密码格式错误");
}
//校验确认密码，只看是否和密码是否一致。
function checkRepsw() {
var flag = false;
//获取确认密码。
var repass = document.getElementsByName("repsw")[0].value;
//获取密码。
var pass = document.getElementsByName("psw")[0].value;
//获取信息节点。span
var spanNode = document.getElementById("repswspan");
if (repass == pass) {
spanNode.innerHTML = "两次密码一致".fontcolor(‘green‘);
flag = true;
}else{
spanNode.innerHTML = "两次密码不一致".fontcolor(‘red‘);
}
return flag;
}
//校验邮件。
function checkMail() {
var reg = new RegExp("^\\w+@\\w+(\\.\\w+)+$");
return check("mail", "mailspan", reg, "邮件格式正确", "邮件格式错误");
}
//校验性别
function checkSex(){
/*
必须有一个被选中。
思路：
1，获取到有的单选按钮。
2，遍历，判断是否一个被选中。如果有，没有提示。如果没有，提示。必须选择一个。
*/
//获取所有单选按钮。
var sexNodes = document.getElementsByName("sex");
var flag = false;
for(var x=0; x<sexNodes.length; x++){
if(sexNodes[x].checked){
flag = true;
break;
}
}
if(!flag){
document.getElementById("sexspan").innerHTML = "必须选择性别".fontcolor(‘red‘);
}
return flag;
}
//校验表单。
function checkForm(){
return checkUser() && checkPsw() && checkRepsw() && checkMail() && checkSex();
//return checkSex();
}
</script>
<form action="" id="regform" onsubmit="return checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span><br />
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span><br />
确认密码：<input type="text" name="repsw" onblur="checkRepsw()" />
<span id="repswspan"></span><br />
电子邮件：<input type="text" name="mail" onblur="checkMail()" />
<span id="Mailspan"></span><br />
选择性别：
<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女
<span id="sexspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<hr />
<input type="button" value="山寨提交按钮" onclick="myCheckForm()" />