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”)