javascript 操作DOM对象

为了操纵浏览器和文档,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 指定已访问链接的颜色.

示例:
[code]
<!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>
[/code]
[code]
<!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>
[/code]



1.2document方法

open() 删除现有文档的内容,打开一个新的文档输出流.

close() 关闭open()打开的文档输出流.

focus() 让指定文档得到焦点.

write(value,...) 在当前文档中插入字符串或在open()打开的文档末尾添加字符串

writeln(value,...) 与writeln方法相同,只是在输出字符串的末尾添加回车符.

示例:
[code]

<!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>
[/code]


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属性等于指定值的元素。

示例:
[code]

<!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>
[/code]

getElementById()将返回ID属性等于指定值的元素。在HTML中,id属性是唯一的,这就意味着没有两个元素可以使用一个id。这是从文档中获取每个元素的最快方法。

示例:
[code]

<!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>
[/code]

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():删除子节点

示例:
[code]

<!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>
[/code]


[code]
<!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>
[/code]




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集合的给定位置插入一个新的单元格
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值