为了操纵浏览器和文档,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 指定已访问链接的颜色.
示例:
1.2document方法
open() 删除现有文档的内容,打开一个新的文档输出流.
close() 关闭open()打开的文档输出流.
focus() 让指定文档得到焦点.
write(value,...) 在当前文档中插入字符串或在open()打开的文档末尾添加字符串
writeln(value,...) 与writeln方法相同,只是在输出字符串的末尾添加回车符.
示例:
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属性等于指定值的元素。
示例:
getElementById()将返回ID属性等于指定值的元素。在HTML中,id属性是唯一的,这就意味着没有两个元素可以使用一个id。这是从文档中获取每个元素的最快方法。
示例:
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():删除子节点
示例:
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集合的给定位置插入一个新的单元格
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集合的给定位置插入一个新的单元格
发表评论
-
Javascript 正则表达式
2012-06-14 23:26 1245[size=medium] JS的正则表达式 //校验是否 ... -
javascript关于select的相关操作
2012-06-14 23:19 1022/1.判断是否存在指定value的Item function ... -
javascript事件处理和表单验证
2012-06-14 23:17 11731:DHTML Dynamic HTML。(HTML/Ja ... -
javascript基础与核心对象
2012-06-14 23:15 912注释://,/* */ 1.概念及作用 概念:是一种解释 ...
相关推荐
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Dom节点,就必须要先获得这个Dom节点。 1 ...
下面小编就为大家带来一篇Javascript操作dom对象之select全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
javascript 操作xml_dom对象整理集合:里面还有很多js技巧集合,要的就下啊
javascript DOM Html 对象对象参考手册
页面置换算法是虚拟存储管理实现的关键,通过本次实验理解内存页面调度的机制,在模拟实现FIFO、LRU等页面置换算法的基础上,比较它们...● 用jQuery+javascript操作DOM对象 ● 动态显示内存状态、缺页率、页面剩余数
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些...
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById(“img”).src = “test.jpg”;这里的document.getElemen
DOM对象应用;学习目标;任务1 认识DOM对象;Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成,分别是ECMAScript、BOM和DOM,其中ECMAScript是JavaScript语言的核心,而Web API...
DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2
javascript操作BOM对象.docx
三、 通过document对象来操作html页面中的元素 四、 document对象的基本属性 五、 Element对象的属性和方法: 六、 元素的属性和方法 七、 节点的操作(属性和方法) 基础知识归纳,可用于学习自身的巩固
jQuery 一个非常流行的操作Dom的 JavaScript 库
本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系,分成三部分上传,请注意下载) 第1章 JavaScript简史 1.1 JavaScript的...
2.5.1 为什么需要JavaScript日志对象 2.5.2 myLogger()对象 2.6 小结 第3章 DOM2核心和DOM2 HTML 3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 ...
本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史 1.1 JavaScript的起源 1.2 浏览器之争 1.3 制定标准 1.4 ...
本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史 1.1 JavaScript的起源 1.2 浏览器之争 1.3 制定标准 1.4 ...
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...
JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库