DOM(Document Object Model)文档对象模型
DOM技术是将文档中出现的所有内容抽象成对象的形式，并根据对象的形式进行操作
文档被抽象为对象后，形成一系列层级概念，最高层级为窗体对象window，其中又包含若干个子对象
BOM:Brower Object Model 浏览器对象模型
浏览器本身是一个窗体,所以它有一个windows对象.windows包含如下对象
navigator ：包含关于 Web 浏览器的信息。
history：包含了用户已浏览的 URL 的信息。
location：包含关于当前 URL 的信息。
document:代表给定浏览器窗口中的 HTML 文档。也就是我们的DOM对象。
DOM结构图
事件及事件激活
事件：描述具体的执行动作
事件源：描述激活事件的对象
事件激活方式：描述激活事件的方式
window对象
window对象描述了整个浏览器的顶层窗口，可以理解为浏览器每次打开后对应的窗体
window对象在执行操作时，可以省略window对象名称
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!--
演示浏览器对象window中的内容。
为了演示方便
在页面上定义一个按钮
通过点击按钮来显示对window对象内容的操作的结果。
点击按钮就有一些具体的处理方式。
所以使用了事件监听机制。
按钮就是事件源。
需要在按钮上注册一个事件动作。
那么这个动作要有对应的处理方式。
处理方式其实就是一个函数。这个函数可以是已有的，也可以自定义的。
如果是自定义的函数。就需要javascript来完成。
-->
<script type="text/javascript">
//定义按钮点击事件的处理方式
function windowdemo()
{
var name= window.navigator.appName;
var version =window.navigator.appVersion;
var plat=window.navigator.platform;
alert(plat);
alert(name+"++++++"+version);
}
function windowlocation()
{
//alert(window.location.href);
location.href="http://www.sina.com.cn";//会将地址栏的url设置成http://www.sina.com.cn 并进行该地址的连接。
}
</script>
<input type="button" value="演示window事件" onclick="windowlocation()"/>
</body>
</html>
window对象的子对象
history：封装浏览器的访问记录
location：封装浏览器的URL信息
event：封装了所有触发事件的状态
clipboardDate ：封装了剪贴板的操作
clientInformation ：封装了浏览器信息
screen ：封装屏幕信息
document ：封装页面全部内容信息
document对象
描述当前网页内容信息
常用属性：
url
defaultCharset
lastModified
常用函数：
getElementById：通过该标签的id属性值来获取该标签节点对象.
getElementsByName：通过标签的name属性值来获取对象.而且返回的不是一个节点对象.而是多个节点对象,用数组表示的.
getElementsByName：通过标签名称获取节点对象.但是标签很容易重复.所以返回的是一个节点数组.
节点
任意一个DOM树结构中的单元都可以称为一个节点，例如一个链接，一个按钮，一段文字
根据节点的内容不同，节点可以分为三种
文本节点
表格中td标签中的文字，span标签中的文字，div标签中的文字
元素节点
任意一个标签即为一个元素节点
属性节点
元素所携带的属性值
节点的层次结构
所有节点在文档中存在均存在节点结构层次，有些节点可以包含其他节点，如table，div等容器型标签，有些节点不能包含其他节点，如input，br等
在表格标签中，table包含tr，tr包含td,此时称table为tr的父节点，tr为td的父节点，反之td为tr的子节点，tr为table的子节点
每个节点携带有对应的信息
nodeName:节点名称
节点标签名
属性名
text
nodeType:节点类型
元素节点：1
文本节点：3
nodeValue:节点值
元素节点：null
文本节点：文本值
节点操作
获取父节点：
parentElement:获取父级元素
parentNode：获取父级节点
获取子节点：
childNodes:获取全部子节点(数组)
children:获取全部子元素
获取同级节点
nextSibling:获取下一个兄弟节点
previousSibling:获取上一个兄弟节点
创建节点元素
createElement
createTextNode
添加子节点：
appendChild
删除子节点：
removeChild
removeNode
修改子节点：
replaceChild
replaceNode
复制子节点：
cloneNode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function document_demo()
{
/*
当一个html文档被dom解析后，加载进内存，就是一个dom树。
每一个标签都是一个节点。为了操作某一个节点。前提就是要先获取该节点对象。
最常见的操作无非就是获取页面中的节点。
document对象作为html文档的对象，可以获取到页面中任意一个节点。
获取方法如下：
getElementById();通过标签的id属性值来获取该标签的节点对象。该方法返回的是一个节点对象。因为一般情况下，id是唯一性的。
不是所有的标签都要定义id属性，这样做太麻烦。
只有大的区域，获取特殊区域，为了方便于获取和操作，才定义id属性。
getElementsByName();通过标签的name属性值来获取节点对象。返回的是一个节点数组。
getElementsByTagName();通过标签名称获取节点对象，返回的是一个节点数组。
*/
// var tabNode =document.getElementById("tabid");
//alert(tabNode.nodeName);
//tabNode.border="1";
//tabNode.borderColor="blue";//不起作用
//tabNode.setAttribute("border","3");
var textNode=document.getElementsByName("user")[0];//值唯一时，可以这么写
//alert(textNode.value);
//var textNode=document.getElementsByName("user");
//alert(textNode[0].type);//nodeName显示undefined，直接textNode，是一个对象,length显示1，
var nodes=document.getElementsByName("sex");
for(var x=0;x<nodes.length;x++)
{
//alert(nodes[x].value);
}
//获取div对象
var divNode =document.getElementsByTagName("div")[0];
//alert(divNode.innerText);//innerText代表标签内封装的文本数据
//divNode.innerText="哈哈，将数据改掉！";
//想要获取到页面中所有的单元格中的数据。
var tdArr=document.getElementsByTagName("td");
for(var x=0;x<tdArr.length;x++)
{
alert(tdArr[x].innerText);
}
}
function documentdemo2()
{
//只想获取表格id为tabid中的单元格数据。凡是容器型标签对象，都具备一个共性的方法getElementsByTagName(),获取该标签中标签节点。
//1、先获取指定的td所在的表格对象
var tabNode =document.getElementById("tabid");
//2、通过表格对象的getElementsByTagName()方法获取该表格内容指定的标签节点对象数组。
var tdNodes=tabNode.getElementsByTagName("td");
for(var x=0;x<tdNodes.length;x++)
{
alert(tdNodes[x].innerText);
}
alert(tabid.nodeName);
}
window.onload=function()
{
var arr=document.links;//获取页面中所有的带有href属性的a标签对象
for(var x=0;x<arr.length;x++)
{
arr[x].target="_blank";
}
}
</script>
</head>
<body>
<div>这是一个div区域</div>
用户名：<input type="text" name="user" /><br />
性别：<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女<br />
<input type="button" value="document对象演示" onclick="document_demo()" />
<input type="button" value="document" onclick="documentdemo2()" />
<table id="tabid">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<a href="openAttach.html">广告弹窗</a>
<span>这是span区域</span>
<table>
<tr>
<td>哈哈</td>
</tr>
<tr>
<td>嘿嘿</td>
</tr>
</table>
</body>
</html>
正则表达式校验
校验方式一：常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
reg.test(待校验字符串);
返回值：
true/false
作用：
存在性检查
校验方式二：不常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
reg.exec(待校验字符串);
返回值：
数组(仅有一个值)/null
作用：
返回匹配位置，封装有匹配的开始索引index与结束索引lastIndex;匹配模式g可以控制下一次继续匹配
校验方式三：不常用
格式：
var reg = new RegExp(“正则表达式”, “匹配模式”);
待校验字符串.match(reg);
返回值：
数组(多个值)/null
作用：
返回匹配位置;匹配模式g可以一次得到所有匹配结果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function checkUser(userNode){
var name=userNode.value;
//var namereg=new RegExp("^[a-z]{5}$");//正则表达式方式一,^表示头，$表示尾
var namereg=/^[a-z]{5}$/i;//正则表达式第二种方式,i表示忽略大小写
var spanNode=document.getElementById("userspan");
if(name.match(namereg))//match方法返回的是一个数组，如果没有找到就返回null
{
//alert("yes");
spanNode.innerHTML="用户名正确".fontcolor("green");
}
else
{
//alert("no");
spanNode.innerHTML="用户名错误".fontcolor("red");
}
}
function checkPsw(pswNode)
{
var pass=pswNode.value;
//var passreg=new RegExp("^[0-9]{5}$");
var passreg=/^d{5}$/;//正则表达式第二种方式
var spanNode=document.getElementById("pswspan");
if(pass.match(passreg))
spanNode.innerHTML="密码正确".fontcolor("green");
else
spanNode.innerHTML="密码错误".fontcolor("red");
}
function checkMail(mailNode)
{
var mail=mailNode.value;
var mailreg=/^w+@w+(.w+)+$/;
var spanNode=document.getElementById("mailspan");
if(mailreg.test(mail))
spanNode.innerHTML="邮箱地址正确".fontcolor("green");
else
spanNode.innerHTML="邮箱地址错误".fontcolor("red");
}
function checkForm()
{
//return true;//为true则允许提交，否则不允许提交
//event.returnValue=false;//这和上面的写法是一样的效果，只是这样写就不要在样式中写return
//alert(document.forms[0].user.value);
var form=document.forms[0];
if(checkUser(form.user)&& checkPsw(form.psw))
{
event.returnValue=false;
}
}
</script>
</head>
<body>
<!--
<form action="http://127.0.0.1" onsubmit="return checkForm()"> 对应方法中有return
-->
<form action="http://127.0.0.1" onsubmit="checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser(this)" />
<span id="userspan"></span><br />
输入密码：<input type="password" name="psw" onblur="checkPsw(this)"/>
<span id="pswspan" ></span><br />
确认密码：<input type="password" name="repsw" /><br />
邮箱地址：<input type="text" name="mail" onblur="checkMail(this)" />
<span id="mailspan" ></span><br />
<input type="submit" value="提交数据" />
</form>
</body>
</html>
总结：
JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示
如：window、document、body、forms
这些对象与对象的层次关系称为DOM
DOM把网页和脚本以及其他的编程语言联系起来了