php-JavaScript(2)
DOM的官方定义
DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类
l 核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
l HTMLDOM：针对HTML文档，提供的专有的属性和方法。
l XMLDOM：针对XML文档，提供的专有的属性和方法。
l EventDOM：事件DOM，提供了很多的常用事件。
l CSSDOM：提供了操作CSS的一个接口。
HTML节点树
DOM中节点的类型：
l document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
l element元素节点：元素节点对应于网页中的各标记。
l attribute属性节点：每个元素都有若干个属性。
l text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法
l nodeName：节点名称。
l nodeValue：节点的值。
l firstChild：第一个子节点。
l lastChild：最后一个子节点。
l parentNode：父节点。
l childNodes：子节点列表，是一个数组。
节点访问
为什么，document.firstChild找到的不是HTML节点呢？
DOM是针对HTML4.01开发的。我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？
在Firefox下，会把空格或换行，当成一个文本节点。因此，所有标记之间的空格和换行，都去掉。
查找html节点的方法
document.firstChild
document.documentElement(兼容性较好)
查找body节点的方法
document.firstChild.lastChild
document.body(推荐使用)
节点属性
1、getAttribute()——获取属性的值
描述：获取节点属性的值。
语法：nodeObj.getAttribute(name)
参数：name代表当前节点的某个属性。
举例：var src = imgObj.getAttribute(“src”)
2、setAttribute()——添加属性
描述：给某个节点添加属性。
语法：nodeObj.setAttribute(name,value)
参数：
u name代表属性名称。
u value代表属性的值。
举例：imgObj.setAttribute(“src” , “images/02.jpg”)
3、removeAttribute()——删除属性
描述：删除某个节点的属性。
语法：nodeObj.removeAttribute(name)
举例：imgObj.removeAttribute(“src”)
节点操作
createElement()创建节点
语法：var nodeObj = document.createElement(tagName)
appendChild()追加节点
语法：parentNode.appendChild(childNode)
课堂实例：随机显示小星星
<script type="text/javascript">
//实例：随机显示小星星
/*
(1)网页加载完成，背景色为黑色
(2)创建图片节点，并追加到body父节点下
(3)定时器
(4)星星随机大小
(5)星星随机定位
(6)单击星星，星星消失。
*/
window.onload = function()
{
document.body.bgColor = "#000";
//定时器开关
window.setInterval("start2()",1000);
}
function start2()
{
//创建图片节点
var imgObj = document.createElement("img");
//追加到body节点
document.body.appendChild(imgObj);
//添加src属性
imgObj.setAttribute("src","images/xingxing.gif");
//添加width属性
var imgWidth = getRandom(15,85);
imgObj.setAttribute("width",imgWidth);
//添加style属性
var winWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var winHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
var x = getRandom(0,winWidth);
var y = getRandom(0,winHeight);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px");
//单击删除星星
imgObj.setAttribute("onclick","removeImg(this)");
}
function removeImg(imgObj)
{
//删除子节点img
document.body.removeChild(imgObj);
}
function getRandom(min,max)
{
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回值
return random;
}
</script>
HTML DOM简介和新特性
在核心DOM中，已经可以实现对网页元素的操作了，为什么还要有HTMLDOM呢？
因为，核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM。
1、HTMLDOM的新特性
每一个HTML标记，都对应一个对象。如：<img>标记，就是一个img对象。
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
<img>属性：src、width、height、border、style、title、id、class等。
在JS中，img对象属性：src、width、height、border、style、title、id、className等。
2、HTML DOM访问HTML元素的方法
（1）根据元素的id查找对象——document.getElementById(id)
（2）根据HTML标签名找对象
描述：根据HTML标签名找对象
语法：var arr = parentNode.getElementsByTagName(tagName)
参数：
tagName就是要查找的标签名称，不能带尖括号。
parentNode代表上层节点。
返回值：返回一个对象数组。
举例：ulObj.getElementsByTagName(“li”)
元素对象的属性
