DOM
DOM:Document Object Model(文档对象模型)，用来将标记型文档封装成对象，并将标记型文档的所有内容（标签、文本、属性）都封装成对象。（可以应用于所有的标记型文档）
文档：标记型文档
对象：封装了属性和行为的实例。可以直接被调用
模型：所有标记型文档都具备一些共性特征的一个体现。
标记型文档（标签、属性、标签中封装的数据）
封装成对象的目的是为了更为方便地操作这些文档以及文档中的所有内容。
因为对象的出现就可以有属性和行为被调用。
常见标记型文档：html xml
DOM这种技术是如何对标记型文档进行操作的呢？
要操作标记型文档必须对其进行解析
DOM的解析方式：
HTML：提供标签，对数据进行封装，便于对该标签中的数据进行操作
CSS：负责提供样式属性，对标签中的数据进行样式的定义
DOM：负责将标签型文档进行解析并封装成对象。在对象中定义了更多的属性和行为，便于对对象操作。
JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。
BOM：浏览器对象模型，这个模型方便于操作浏览器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
document对象的演示。
该对象将标记型文档进行封装。
该对象的作用，是对可以标记型文档进行操作。
最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
要想获取节点，必须要先获取到节点所属的文档对象document。
所以document对象最常见的操作就是获取页面中的节点。
获取节点的方法体现：
1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。
3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。
凡是带s返回的都是数组。
-->
<script type="text/javascript">
function getNodeDemo(){
/*
* 需求：获取页面中的div节点。
* 思路：
* 通过docment对象完成。因为div节点有id属性。 所以可以通过id属性来完成获取。
*
*/
var divNode = document.getElementById("divid");
//节点都有三个必备的属性。节点名称，节点类型，节点值。
// alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
/*
* 常见节点有三种：
* 1，标签型节点：类型 1
* 2，属性节点： 类型 2
* 3，文本节点。 类型 3
*
* 标签型节点是没有值的，属性和文本节点是可以有值的。
*
*/
//获取div节点中的文本。
// var text = divNode.innerHTML;
// alert(text);
//改变div中的文本。
divNode.innerHTML = "哈哈，文本被我改掉了".fontcolor("red");
}
//获取文本框节点演示getElementsByName方法
function getNodeDemo2(){
// var nodes = document.getElementsByName("user");
// alert(nodes[0].value);
var userNode = document.getElementsByName("user")[0];
alert(userNode.value);
}
//获取超链接节点对象。演示getElementsByTagName方法。
function getNodeDemo3(){
//直接用标签名获取。
var nodes = document.getElementsByTagName("a");
// alert(nodes.length);
// alert(nodes[0].innerHTML);
for(var x=0; x<nodes.length; x++){
// alert(nodes[x].innerHTML);
nodes[x].target = "_blank";
}
}
/*
* 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。
* 当然是要获取其中被操作的超链接对象啊。
* 可是通过document获取超链接，拿到的是页面中所有的超链接节点。
* 只想获取一部分该如何办呢？
* 只要获取到被操作的超链接所属的节点即可。
*
* 在通过这个节点获取到它里面所有的超链接节点。
*
*/
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode = document.getElementById("newslink");
//通过对div对象方法的查找发现它也具备getElementsByTagName方法。
//记住：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签。
var aNodes = divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length; x++){
// alert(aNodes[x].innerHTML);
aNodes[x].target = "_blank";
}
}
</script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()" />
<div id="divid">这是一个div区域</div>
<input type="text" name="user" />
<a href="http://www.sina.com.cn">新浪网站11</a>
<a href="http://www.SOHU.com.cn">新浪网站22</a>
<div id="newslink">
<a href="http://www.163.com.cn">新闻链接1</a>
<a href="http://www.164.com.cn">新闻链接2</a>
<a href="http://www.itcast.com.cn">新闻链接3</a>
</div>
</body>
</html>
