- 浏览: 480414 次
- 性别:
- 来自: 沈阳
文章分类
- 全部博客 (437)
- Windows设置 (2)
- oracle数据库 (39)
- bug--jsp (4)
- j2se (13)
- js (40)
- bug-tomcat不能启动程序 (1)
- Hibernate (29)
- eclipse (20)
- java (65)
- 设计模式 (6)
- bug (18)
- PL/SQL (11)
- 前台 (5)
- 杂谈 (25)
- UML (1)
- jdbc编程 (2)
- 技术调研 (1)
- 数据通信 (2)
- ios (1)
- servlet自学笔记 (10)
- tomcat (9)
- SQL学习笔记 (6)
- java工具 (1)
- 数据库设计 (4)
- javascript (10)
- jsp (11)
- struts (17)
- ajax (7)
- linix/Unix (6)
- 资源 (3)
- spring (14)
- 算法 (5)
- 计算机网络 (2)
- http (5)
- c++ (2)
- web应用 (3)
- jvm (5)
- java中的字符编码 (14)
- java代码库 (2)
- classloader (1)
- 读书笔记 (1)
- c (1)
- 开源软件 (1)
- svn (1)
- AOP (1)
- java序列化 (1)
- 多线程 (4)
- The legendary programmers (1)
- Apache http Server (1)
- html tag (3)
- struts1.X学习笔记 (5)
- buffalo (1)
- 自己收藏 (0)
- TOEFL(IBT) (1)
- 网络翻墙 (0)
- 编译原理 (1)
- 书籍推荐 (1)
- css (10)
- javaee环境搭建资料 (1)
- 开源工具 (1)
- 美国生活 (1)
- spring自学 (3)
- log4j (3)
- 算法与数据结构 (5)
- 病毒,插件处理大全 (1)
- flex (2)
- webservice (1)
- git (7)
- cs (1)
- html (4)
- javaee (6)
- 开车 (0)
- springmvc (3)
- 互联网架构 (2)
- intellij idea (18)
- maven (15)
- mongodb (2)
- nginx (1)
- react (3)
- java基础例子 (2)
- springboot (2)
- 培训 (5)
- mysql (3)
- 数据库 (3)
- 生活 (2)
- intellij (3)
- linux (2)
- os (3)
最新评论
-
潇洒天涯:
[color=blue][color=cyan] ...
oracle 通过 nvl( )函数sql 查询时为 空值 赋默认值 -
hekai1990:
受教了..
oracle中的varchar2
function parseDom(arg) { var obj=parseDom('<div id="div_1" class="div1">Hello World!</div>');
W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。
DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样。可以使用任何脚本语言来访问DOM,这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性,表3-2列出了一些有用的方法。
表3-1 用于处理XML文档的DOM元素属性
属性名 描述
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素
表3-2 用于遍历XML文档的DOM元素方法
方法名 描述
getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素
getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes() 返回一个布尔值,指示元素是否有子元素
getAttribute(name) 返回元素的属性值,属性由name指定
有了W3C DOM,就能编写简单的跨浏览器脚本,从而充分利用XML的强大功能和灵活性,将XML作为浏览器和服务器之间的通信介质。
从下面的例子可以看到,使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表,各个州按地区划分。
表3-3 动态创建内容时所用的W3C DOM属性和方法
属性/方法 描述
document.createElement_x(tagName) 文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数,就会生成一个div元素
document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
<element>.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)。例如,可以增加一个option元素,作为select元素的子节点
<element>.getAttribute(name)
<element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值
<element>.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面
<element>.removeAttribute(name) 这个方法从元素中删除属性name
<element>.removeChild(childNode) 这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes() 这个方法返回一个布尔值,指示元素是否有子元素
Document--最顶层的节点,所有的其他节点都是附属于它的。
DocumentType--DTD引用(使用<!DOCTYPE>语法)的对象表现形式,它不能包含子节点。
DocumentFragment--可以像Document一样来保存其他节点。
Element--表示起始标签和结束标签之间的内容,例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr--代表一对特性名和特性值。这个节点类型不能包含子节点。
Text--代表XML文档中的在起始标签和结束标签之间,或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。
CDataSection--<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity--表示在DTD中的一个实体定义,例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。
EntityReference--代表一个实体引用,例如"。这个节点类型不能包含子节点。
ProcessingInstruction--代表一个PI。这个节点类型不能包含子节点。
Comment--代表XML注释。这个节点不能包含子节点。
Notation--代表在DTD中定义的记号。这个很少用到。
Node接口定义了所有节点类型都包含的特性和方法。
特性/方法 类型/返回类型 说明
nodeName String 节点的名字;根据节点的类型而定义
nodeValue String 节点的值;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd
除节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。
NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。
NamedNodeMap--同时使用数值和名字进行索引的节点表;用于表示元素特性。
2.访问相关的节点
下面的几节中考虑下面的HTML页面
1<html>
2 <head>
3 <title>DOM Example</title>
4 </head>
5 <body>
6 <p>Hello World!</p>
7 <p>Isn't this exciting?</p>
8 <p>You're learning to use the DOM!</p>
9 </body>
10</html>
要访问<html/>元素(你应该明白这是该文件的document元素),你可以使用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];
注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用item()方法:
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
HTML DOM页定义了document.body作为指向<body/>元素的指针。
var oBody = ducument.body;
有了oHtml,oHead和oBody这三个变量,就可以尝试确定它们之间的关系:
alert(oHead.parentNode==oHtml);
alert(oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);
以上均outputs "true"。
3.处理特性
正如前面所提到的,即便Node接口已具有attributes方法,且已被所有类型的节点继承,然而,只有
Element节点才能有特性。Element节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法:
getNamedItem(name)--返回nodename属性值等于name的节点;
removeNamedItem(name)--删除nodename属性值等于name的节点;
setNamedItem(node)--将node添加到列表中,按其nodeName属性进行索引;
item(pos)--像NodeList一样,返回在位置pos的节点;
注:请记住这些方法都是返回一个Attr节点,而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。
当NamedNodeMap用于表示特性时,其中每个节点都是Attr节点,这的nodeName属性被设置为特性名称,而nodeValue属性被设置为特性的值。例如,假设有这样一个元素:
<p style="color:red" id="p1">Hello world!</p>
同时,假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue;
当然,还可以用数值方式访问id特性,但这样稍微有些不直观:
var sId = oP.attributes.item(1).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性:
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr节点也有一个完全等同于(同时也完全同步于)nodeValue属性的value属性,并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
因为这个方法有些累赘,DOM又定义了三个元素方法来帮助访问特性:
getAttribute(name)--等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)--等于attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)--等于attribute.removeNamedItem(name)。
4.访问指定节点
(1)getElementsByTagName_r()
核 心(XML) DOM定义了getElementsByTagName_r()方法,用来返回一个包含所有的tagName(标签名)特性等于某个指定值的元素的 NodeList。在Element对象中,tagName特性总是等于小于号之后紧跟随的名称--例如,<img />的tagName是"img"。下一行代码返回文档中所有<img />元素的列表:
var oImgs = document.getElementsByTagName_r("img");
把所有图形都存于oImgs后,只需使用方括号或者Item()方法(getElementsByTagName_r()返回一个和childNodes一样的NodeList),就可以像访问子节点那样逐个访问这些节点了:
alert(oImgs[0].tagName); //outputs "IMG"
假如只想获取在某个页面第一个段落的所有图像,可以通过对第一个段落元素调用getElementsByTagName_r()来完成,像这样:
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
可以使用一个星号的方法来获取document中的所有元素:
var oAllElements = document.getElementsByTagName_r("*");
当参数是一个星号的时候,IE6.0并不返回所有的元素。必须使用document.all来替代它。
(2)getElementsByName()
HTML DOM 定义了getElementsByName(),这用来获取所有name特性等于指定值的元素的。
(3)getElementById()
这是HTML DOM定义的第二种方法,它将返回id特性等于指定值的元素。在HTML中,id特性是唯一的--这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
注:如果给定的ID匹配某个元素的name特性,IE6.0还会返回这个元素。这是一个bug,也是必须非常小心的一个问题。
5.创建新节点
最常用到的几个方法是
createDocumentFragment()--创建文档碎片节点
createElement_x(tagname)--创建标签名为tagname的元素
createTextNode(text)--创建包含文本text的文本节点
createElement_x()、createTextNode()、appendChild()
1<html>
2 <head>
3 <title>createElement_x() Example</title>
4 <script type="text/javascript">
5 function createMessage() {
6 var oP = document.createElement_x("p");
7 var oText = document.createTextNode("Hello World!");
8 oP.appendChild(oText);
9 document.body.appendChild(oP);
10 }
11 </script>
12 </head>
13 <body onload="createMessage()">
14 </body>
15</html>
removeChild()、replaceChild()、insertBefore()
删除节点
1<html>
2 <head>
3 <title>removeChild() Example</title>
4 <script type="text/javascript">
5 function removeMessage() {
6 var oP = document.body.getElementsByTagName_r("p")[0];
7 oP.parentNode.removeChild(oP);
8 }
9 </script>
10 </head>
11 <body onload="removeMessage()">
12 <p>Hello World!</p>
13 </body>
14</html>
替换
1<html>
2 <head>
3 <title>replaceChild() Example</title>
4 <script type="text/javascript">
5 function replaceMessage() {
6 var oNewP = document.createElement_x("p");
7 var oText = document.createTextNode("Hello Universe!");
8 oNewP.appendChild(oText);
9 var oOldP = document.body.getElementsByTagName_r("p")[0];
10 oOldP.parentNode.replaceChild(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body onload="replaceMessage()">
15 <p>Hello World!</p>
16 </body>
17</html
新消息添加到旧消息之前
1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function insertMessage() {
6 var oNewP = document.createElement_x("p");
7 var oText = document.createTextNode("Hello Universe!");
8 oNewP.appendChild(oText);
9 var oOldP = document.getElementsByTagName_r("p")[0];
10 document.body.insertBefore(oNewP, oOldP);
11 }
12 </script>
13 </head>
14 <body onload="insertMessage()">
15 <p>Hello World!</p>
16 </body>
17</html>
createDocumentFragment()
一旦把节点添加到document.body(或者它的后代节点)中,页面就会更新并反映出这个变化。对于少量的更新,这是很好的,然而,当要向document添加大量数据时,如果逐个添加这些变动,这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中,假如想创建十个新段落
1<html>
2 <head>
3 <title>insertBefore() Example</title>
4 <script type="text/javascript">
5 function addMessages() {
6 var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
7
8 var oFragment = document.createDocumentFragment();
9
10 for (var i=0; i < arrText.length; i++) {
11 var oP = document.createElement_x("p");
12 var oText = document.createTextNode(arrText[i]);
13 oP.appendChild(oText);
14 oFragment.appendChild(oP);
15 }
16
17 document.body.appendChild(oFragment);
18
19 }
20 </script>
21 </head>
22 <body onload="addMessages()">
23
24 </body>
25</html>
6.让特性像属性一样
大部分情况下,HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素:
<img src = "mypicture.jpg" border=0 />
如果要使用核心的DOM来获取和设置src和border特性,那么要用getAttribute()和setAttribute()方法:
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而,使用HTML DOM,可以使用同样名称的属性来获取和设置这些值:
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性,它是用来指定应用于某个元素的一个CSS类,因为class在ECMAScript中是一个保留字,在javascript中,它不能被作为变量名、属性名或都函数名。于是,相应的属性名就变成了className;
注:IE在setAttribute()上有很大的问题,最好尽可能使用属性。
7.table方法
为了协助建立表格,HTML DOM给<table/>,<tbody/>和<tr/>等元素添加了一些特性和方法。
给<table/>元素添加了以下内容:
特性/方法 说明
caption 指向<caption/>元素并将其放入表格
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素(如果存在)
tHead 指向<thead/>元素(如果存在)
rows 表格中所有行的集合
createTHead() 创建<thead/>元素并将其放入表格
createTFood() 创建<tfoot/>元素并将其放入表格
createCpation() 创建<caption/>元素并将其放入表格
deleteTHead() 删除<thead/>元素
deleteTFood() 删除<tfoot/>元素
deleteCaption() 删除<caption/>元素
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tbody/>元素添加了以下内容
特性/方法 说明
rows <tbody/>中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tr/>元素添加了以下内容
特性/方法 说明
cells <tr/>元素中所有的单元格的集合
deleteCell(postion) 删除给定位置上的单元格
insertCell(postion) 在cells集合的给点位置上插入一个新的单元格
var objE = document.createElement("div");
objE.innerHTML = arg;
return objE.childNodes;
};
var obj=parseDom('<div id="div_1" class="div1">Hello World!</div><span>多个也没关系</span>');
发表评论
-
【转】Jquery修改iframe内容
2018-12-19 04:24 798query取得iframe中元素的几种方法 在iframe ... -
【转】jQuery ajax()使用serialize()提交form数据
2018-12-19 04:22 844jQuery的serialize()方法通过序列化表单值,创 ... -
js获取web的root path
2018-04-25 00:50 964function getRootPath(){ // ... -
[转]js 判断变量的数据类型
2018-04-06 06:03 0http://www.jb51.net/article/457 ... -
jquery,ajax,jsonp例子+springmvc后台
2017-11-05 20:26 685<script src="js/jquer ... -
jQuery之防止冒泡事件
2017-09-28 21:16 464冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点 ... -
【转】解析Javascript事件冒泡机制
2017-09-28 21:11 6751. 事件 ... -
Chrome 的审查元素功能有哪些奇技淫巧?
2017-09-27 18:31 552https://www.zhihu.com/question/ ... -
【转】javascript运行机制之执行顺序详解
2017-08-02 15:24 502JavaScript是一种描述型脚本语言,它不同于java ... -
让DIV中的垂直滚动条自动滚到最底部
2017-07-16 10:23 1196在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动 ... -
10个JavaScript测试
2017-05-03 10:12 4731、考察this -
jsonp详解
2017-03-31 10:15 506json相信大家都用的多 ... -
必读js书籍
2017-01-13 15:33 373一个很好的起点是Kyle Simpson的系列读物:Y ... -
window.close()不出现提示框的方法
2015-12-02 15:15 691当我们使用window.close()时经常会出现一个提示框 ... -
document.getElementByClassName("classname")是原生JS吗?
2015-04-17 19:31 884需求:比较税前薪资是否在薪资范围内,超过范围则薪资输出变红色 ... -
【转】Ajax框架Buffalo深度研究
2012-11-20 11:33 1296Buffalo深度研究 ——2010.01.11, IT ... -
js dom
2012-11-08 19:03 0Dom元素基本操作方法API,先记录下,方便以后使用。 ... -
js dom代码
2012-11-08 19:03 753简单的表格: 复制代码代码如下: <table&g ... -
HTML中相对URL的选取
2012-11-08 18:50 759转自:http://blog.csdn.net/g ... -
【转】JS监听关闭浏览器事件
2012-09-19 13:37 979Onunload与Onbeforeunload Onunloa ...
相关推荐
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
JavaScript DOM编程艺术 --全
js_HTML_Dom操作练习,比较基础的
JavaScriptDOM编程艺术(第2版)PDF版本下载
dom api手册,javascript dom,js dom,java dom
JavascriptDOM基本操作 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章 ...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
实现使用JavaScript DOM 操作实现网页局部刷新
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
英文原版DOM Scripting Web Design with JavaScript and the Document Object Model,语言通俗易懂,适合dom和javascript初学者。
JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术
JavaScript.DOM编程艺术(第2版)源码
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
javascript DOM 编程艺术源码 很详细 每一课都有
本书注重理论与实践的结合,全面讲述高级的DOM脚本编程。全书分为3个部分:第一部分“深入理解DOM脚本编程”,涉及W3CDOM规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以Ajax...
javascript dom2 源码及pdf
JavaScript DOM编程艺术 经典书籍