为了操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就成为DOM.这些对象的组织类似一个树形结构,并表示一个Web文档的所有内容和组件.
DOM对象拥有属性(描述Web页面或文档的变量)和方法(允许操作部分Web页面).
当说明一个对象时,先是父对象名,后接着是子对象名,使用圆点隔开.
1.document对象
1.1document属性
document对象主要对应于文档的主体部分,对于头部分只提供了有限的支持.
body属性:
background 指定文档背景图像的URL.
bgColor 设置文档颜色.
Text 指定文档中正常文本的颜色.
link 指定未访问链接的颜色.
vlink 指定已访问链接的颜色.
document常用属性:
anchor[] anchor对象数值,每一个都代表文档中出现的一个锚点.
applets[] applet对象数组,代表文档中出现的每一个小代码.
bgColor 指定文档的背景颜色,字符串类型.
cookie 允许读写HTTP的cookie,字符串类型.
domain 指定文档来自哪一个Internet域,用于安全目的,字符串类型.
embeds[] 代表文档中是哟偶那个<embed>标记嵌入数据,与plugins[]同义.
fgColor 指定文档的前景颜色,字符串类型.
forms[] form对象数组,每一个元素对应于文档中的一个HTML<form>标记.
images[] image对象数组,每一个元素对应于文档中的一个HTML<img>标记.
lastModified 给出文档最近修改时间,字符串类型,只读属性.
linkColor 指定未访问链接的颜色.
links[] link对象数组,每一个元素对应于文档中的一个HTML<a href>标记.
location 文档的URL地址.
plugins[] 与embeds[]属性的意义相同.
referret 只读属性,连接到当前文档的URL.
title 文档标题,对应于文档中<title>标记的内容.
URL 指定当前文档的URL,只读属性.
vlinkColor 指定已访问链接的颜色.
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> document对象所有属性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h2>document属性列表</h2>
<script>
var attrs = new Array();
for(var property in window.document)
{
attrs.push(property);
}
attrs.sort();
document.write("<table>");
for(i = 0; i<attrs.length; i++)
{
if(i == 0)
{
document.write("<tr>");
}
if(i > 0 && i % 5 ==0)
{
document.write("</tr><tr>");
}
document.write("<td>" + attrs[i] + "</td>");
}
document.write("</table>");
</script>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 显示当前document对象属性 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor = "orange" text = "red" link = "blue" vlink = "fuchsia">
<img src = "z.jpg" border = 2>
<h2>documen对象属性的当前值</h2>
<font face = "楷体" size = "+2">
<script>
document.write("文档地址: " + "<em>" + document.location + "</em><br>");
document.write("文档标题: " + "<em>" + document.title + "</em><br>");
document.write("图像文件: " + "<em>" + document.images[0].src + "</em><br>");
document.write("URL: " + "<em>" + document.URL + "</em><br>");
document.write("背景颜色: " + "<em>" + document.bgColor + "</em><br>");
document.write("链接颜色: " + "<em>" + document.linkColor + "</em><br>");
document.write("文本颜色: " + "<em>" + document.fgColor + "</em><br>");
document.write("最后修改: " + "<em>" + document.lastmodified + "</em><br>");
</script>
<a href = "http://www.baidu.com">百度连接</a>
</BODY>
</HTML>
1.2document方法
open() 删除现有文档的内容,打开一个新的文档输出流.
close() 关闭open()打开的文档输出流.
focus() 让指定文档得到焦点.
write(value,...) 在当前文档中插入字符串或在open()打开的文档末尾添加字符串
writeln(value,...) 与writeln方法相同,只是在输出字符串的末尾添加回车符.
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>document对象方法</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
var newWindow;
function makeNewWindow()
{
if(!newWindow || newWindow.closed)
{
newWindow = window.open("","sub","status, height = 350, width = 300");
}else if (newWindow.focus)
{
newWindow.focus();
}
newWindow.location = "a.htm";
newWindow.moveTo(0, 0);
parent.window.resizeTo(400, 400);
parent.window.moveTo(350, 0);
}
function writeToWindow()
{
var newContent = "<html><head><title>新打开的窗口-显示唐诗<<赤壁>></title></head>";
newContent += "<body><h1>折戟沉沙铁未销,</h1>";
newContent += "<h1>自将磨洗认前朝.</h1>";
newContent += "<h1>东风不与周郎便,</h1>";
newContent += "<h1>铜雀春深锁二乔.</h1>";
newContent += "</body></html>";
newWindow.document.open();
newWindow.document.write(newContent);
newWindow.document.close();
}
</script>
<BODY>
<h2> document对象方法演示</h2>
<button onClick = "makeNewWindow();">
<font size = "+1" face = 宋体>创建新窗口</button><br>
<button onClick = "writeToWindow();">
<font size = "+1" face = 宋体>输出内容</button>
</BODY>
</HTML>
2.DOM对象
2.1访问DOM节点
要访问html元素，可以使用document的documentelement属性
var oHtml = document.documentElement;
现在oHtml变量就包含一个表示html的htmlelement对象。如果想取得head和body元素，可以使用以下方法实现：
var ohead = oHtml.firstChild;
var obody = oHtml.lastChild;
也可以使用childNodes属性来完成同样的工作，只需把它当成普通的JavaScript Array，使用方括号标记：
var ohead = oHtml.childNodes[0];
var obody = oHtml.childNodes[1];
使用childNodes.length属性来获取子节点的数量：
alert(oHtml.childNodes.length);//输出子节点个数
实际上正式地从childNodes列表中获取子节点的方法是使用item()：
var oHtml.childNodes.item[0];
var obody.childNodes.item[1];
核心DOM定义了getElementByTagName()方法，用来返回一个包含所有的tagName属性等于某个指定值的元素的Nodelist。
var oimgs = document.getElementByTagName("img");
在把所有图像都存于oimgs后，只需要使用方括号或者item()方法，就可以像访问子节点一样逐个访问这些节点了：
alert(oimgs[0].tagName);//输出img
如果只想要获得在某个页面第一个段落的所有图像，则可以通过对第一个段落元素用getElementByTagName()来完成，如：
var ops = document.getElementsByTagName("p");
var oimgsIp = ops[0].getElemetByTagName("img");
可以使用型号的方法来获取document中的所有元素：
var oALLElements = document.getElementByTagName("*");
DOM定义了getElementByName()方法，它用来获取所有name属性等于指定值的元素。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DOM技术 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form method = "post" action = "document.cgi">
<fieldset>
<legend>选择你喜欢的颜色！</legend>
<input type = "radio" name = "color" value = "red">red<br>
<input type = "radio" name = "color" value = "green">green<br>
<input type = "radio" name = "color" value = "blue">blue<br>
</fieldset>
<input type = "submit" value = "submit">
</form>
<script language = "javascript">
var oRadios = document.getElementsByName("color");
alert(oRadios[0].getAttribute("value"));//输出red
</script>
</BODY>
</HTML>
getElementById()将返回ID属性等于指定值的元素。在HTML中，id属性是唯一的，这就意味着没有两个元素可以使用一个id。这是从文档中获取每个元素的最快方法。
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DOM技术2 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type = "text/javascript">
function getValue()
{
var odiv1 = document.getElementById("div1");
odiv1.innerText = "hello!";
}
</script>
<BODY onload = "getValue()">
<div id = "div1"></div>
</BODY>
</HTML>
2.2处理属性
Node接口具有attributes方法，且已经被所有类型的节点继承，然而，只有element节点才能有属性。
getNameItem(name):返回nodeName属性值等于name的节点。
removeNamedItem(name):删除nodeName属性值等于name的节点。
setNameItem(node):将node添加到列表中，按其nodeName属性进行索引。
item(pos):与NodeList一样，返回在位置pos的节点。
2.3创建和操作节点
creatDocumentFragment():创建文本碎片节点
createElement(tagname):创建标签名为tagname的元素
createTextNode(text):创建包含文本text的文本节点
createElement():创建元素
createTextNode():创建文本节点
appendChild():添加子节点
removeChild():删除子节点
示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> createElement()方法 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY onload = "createM()">
<script>
function createM()
{
var op = document.createElement("p");
var otext = document.createTextNode("你好");
op.appendChild(otext);
document.body.appendChild(op);
}
</script>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 删除节点 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function removeM()
{
var op = document.body.getElementsByTagName("p")[0];
document.body.removeChild(op);
}
</script>
<BODY onload = "removeM()">
<p>你好！</p>
<p>Hello World!</p>
</BODY>
</HTML>
replaceChild():替换子节点
insertBefore():让新节点出现在已有节点之前
2.4DOM的其它技术
DOM用getAttribute()和setAttribute()方法来获取和设置图片元素的src和border属性。
示例：
alert(oImg.getAttribute("src"));
oImg.setAttribute("src","jhon.jpg");
使用核心DOM方法来创建一个表格会比较复杂。为了更方便地建立表格，HTML DOM给一些表格元素添加了一些属性和方法。
<table/>元素内添加的内容
caption:指向caption元素
tBodies:<tbody/>元素的集合
tFoot:指向<tFoot/>元素
tHead:指向<tHead/>元素
rows:表格中的行
createTHead():创建<tHead/>元素标签并将其放入表格中
createTFoot():创建<tFoot/>元素标签并将其放入表格中
createCaption():创建<Caption/>元素标签并将其放入表格中
deleteTHead():删除<tHead/>元素标签
deleteTFoot():删除<tFoot/>元素标签
deleteCaption():删除<Caption/>元素标签
deleteRow():删除指定位置上的行
insertRow():在Rows集合中的指定位置插入一个新行
<tbody/>
rows:<tbody>中的所有行的集合
deleteRow():删除指定位置上的行
insertRow():在Row集合中的指定位置插入一个新行
<tr/>
cells:<tr/>元素中所有的单元格的集合
deleteCell():删除指定位置的单元格
insertCell():在cells集合的给定位置插入一个新的单元格
示例: