4：JavaScriptjavaDOM
java中四种操作(dom、sax、jdom、dom4j)xml方式详解与比较
选择DOM还是选择SAX？ 对于需要自己编写代码来处理XML文档的开发人员来说， 选择DOM还是SAX解析模型是一个非常重要的设计决策。 DOM采用建立树形结构的方式访问XML文档，而SAX采用的事件模型。
DOM解析器把XML文档转化为一个包含其内容的树，并可以对树进行遍历。用DOM解析模型的优点是编程容易，开发人员只需要调用建树的指令，然后利用navigation APIs访问所需的树节点来完成任务。可以很容易的添加和修改树中的元素。然而由于使用DOM解析器的时候需要处理整个XML文档，所以对性能和内存的要求比较高，尤其是遇到很大的XML文件的时候。由于它的遍历能力，DOM解析器常用于XML文档需要频繁的改变的服务中。
虽然DOM4J代表了完全独立的开发结果，但最初，它是JDOM的一种智能分支。它合并了许多超出基本XML文档表示的功能，包括集成的XPath支持、XML Schema支持以及用于大文档或流化文档的基于事件的处理。它还提供了构建文档表示的选项，它通过DOM4J API和标准DOM接口具有并行访问功能。从2000下半年开始，它就一直处于开发之中。
3）JDOM
JDOM的目的是成为Java特定文档模型，它简化与XML的交互并且比使用DOM实现更快。由于是第一个Java特定模型，JDOM一直得到大力推广和促进。正在考虑通过“Java规范请求JSR-102”将它最终用作“Java标准扩展”。从2000年初就已经开始了JDOM开发。
DOM4J是一个非常非常优秀的Java XML API，具有性能优异、功能强大和极端易用使用的特点，同时它也是一个开放源代码的软件。如今你可以看到越来越多的Java软件都在使用DOM4J来读写XML，特别值得一提的是连Sun的JAXM也在用DOM4J.
JavaScript中的DOM操作和事件处理
JavaScript中的DOM操作和事件处理DOM（文档对象模型）是JavaScript操作HTML文档的基础。
通过DOM，我们可以通过JavaScript来访问、修改和操作HTML元素、属性以及样式等。
同时，JavaScript还可以通过事件处理来响应用户的操作。
本文将详细介绍JavaScript中的DOM操作和事件处理的相关知识。
一、DOM操作1. 访问元素在JavaScript中，我们可以通过不同的方式来访问HTML元素。
常用的方法有getElementById、getElementsByClassName和getElementsByTagName。
例如，要访问id为"myElement"的元素，我们可以使用以下代码：```javascriptvar element = document.getElementById("myElement");```2. 修改元素内容一旦我们访问到了HTML元素，就可以通过修改其内容来实现动态效果。
可以使用innerHTML属性来改变元素的内容。
例如，要将一个段落的内容修改为"Hello, World!"，可以使用以下代码：```javascriptelement.innerHTML = "Hello, World!";```3. 修改元素样式在JavaScript中，可以通过style属性来修改元素的样式。
可以直接修改样式的属性，也可以通过设置className来改变元素的类。
例如，要将一个按钮的背景颜色修改为红色，可以使用以下代码：```javascriptelement.style.backgroundColor = "red";```4. 创建和添加元素除了修改现有元素，我们还可以通过JavaScript来创建元素并将其添加到HTML文档中。
可以使用createElement和appendChild方法来实现。
JAVASCRIPTDOM对象介绍
JAVASCRIPTDOM对象介绍JavaScript DOM（Document Object Model）是指文档对象模型，它是一种编程接口，它允许开发者以编程的方式操作HTML和XML文档。
DOM将文档表示为一个树形结构，每个节点代表文档中的一个元素、属性或文本。
在JavaScript中，DOM对象是一个接口，它提供了一组属性和方法，用于访问、操作和修改文档的内容、结构和样式。
通过使用DOM对象，开发者可以动态地更新网页内容、响应用户的交互、创建动态效果等。
DOM对象主要包括以下几种类型：1. Document对象：代表整个文档，是DOM树的根节点。
可以通过document对象访问文档的各个部分，如头部、主体、表单等。
2. Element对象：代表文档中的元素，如div、p、span等。
Element对象提供了一系列方法和属性，用于操作元素的内容、样式、属性等。
3. Node对象：代表DOM树中的节点，包括元素节点、文本节点、注释节点等。
所有的节点都继承自Node对象，提供了一些通用的属性和方法。
4. Event对象：代表事件，可以通过event对象获取触发事件的相关信息，如事件的类型、目标元素、鼠标位置等。
通过操作DOM对象，开发者可以实现以下功能：1. 修改元素的内容：可以通过innerHTML、innerText等属性修改元素的内容，也可以通过createElement、appendChild等方法创建新的元素并添加到文档中。
2. 修改元素的样式：可以通过style属性设置元素的样式，比如颜色、字体大小、背景色等。
3. 添加事件监听器：可以通过addEventListener方法为元素添加事件监听器，监听用户的交互行为，如点击、滚动、键盘输入等。
4. 操作表单数据：可以通过form对象和input对象访问用户输入的表单数据，对表单进行验证、提交等操作。
5. 动态创建动画效果：可以通过定时器、CSS动画、transform等属性和方法实现动态的效果，如轮播图、滚动效果等。
javascript学习笔记（三）BOM和DOM详解
javascript学习笔记（三）BOM和DOM详解js组成我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。
1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]2. BOM 是各个浏览器⼚商根据 DOM在各⾃浏览器上的实现;[表现为不同浏览器定义有差别,实现⽅式不同]3. window 是 BOM 对象，⽽⾮ js 对象；DOM（⽂档对象模型）是 HTML 和 XML 的应⽤程序接⼝（API）。
BOM 主要处理浏览器窗⼝和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的⼀部分。
这些扩展包括：弹出新的浏览器窗⼝移动、关闭浏览器窗⼝以及调整窗⼝⼤⼩提供 Web 浏览器详细信息的定位对象提供⽤户屏幕分辨率详细信息的屏幕对象对 cookie 的⽀持IE 扩展了 BOM，加⼊了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和⽅法是直接可以使⽤⽽且被感知的，因此可以直接使⽤window对象的document属性，通过document属性就可以访问、检索、修改XHTML⽂档内容与结构。
因为document对象⼜是DOM（Document Object Model）模型的根节点。
可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从⽽js可以操作浏览器以及浏览器读取到的⽂档。
其中DOM包含：windowWindow对象包含属性：document、location、navigator、screen、history、framesDocument根节点包含⼦节点：forms、location、anchors、images、links从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的⼦对象。
详解Javascript中DOM的范围
详解Javascript中DOM的范围前⾔为了让开发⼈员更⽅便地控制页⾯，DOM定义了“范围”(range)接⼝。
通过范围可以选择⽂档中的⼀个区域，⽽不必考虑节点的界限(选择在后台完成，对⽤户是不可见的)。
在常规的DOM操作不能更有效地修改⽂挡时，使⽤范围往往可以达到⽬的。
本⽂将详细介绍DOM范围，下⾯来⼀起看看吧。
创建范围Document类型中定义了createRange()⽅法。
在兼容DOM的浏览器中，这个⽅法属于document对象。
使⽤hasFeature()或者直接检测该⽅法，都可以确定浏览器是否⽀持范围[注意]IE8-浏览器不⽀持var supportsRange = document.implementation.hasFeature("Range", "2.0");var alsoSupportsRange =(typeof document.createRange == "function");如果浏览器⽀持范围，那么就可以使⽤createRange()来创建DOM范围，如下所⽰var range = document.createRange();与节点类似，新创建的范围也直接与创建它的⽂档关联在⼀起，不能⽤于其他⽂档。
创建了范围之后，接下来就可以使⽤它在后台选择⽂档中的特定部分。
⽽创建范围并设置了其位置之后，还可以针对范围的内容执⾏很多种操作，从⽽实现对底层DOM树的更精细的控制每个范围由⼀个Range类型的实例表⽰，这个实例拥有很多属性和⽅法。
下列属性提供了当前范围在⽂档中的位置信息startContainer：包含范围起点的节点(即选区中第⼀个节点的⽗节点)startoffset：范围在startContainer中起点的偏移量。
如果startContainer是⽂本节点、注释节点或CDATA节点，那么startoffset就是范围起点之前跳过的字符数量。
javascriptDOM的详解及实例代码
javascriptDOM的详解及实例代码javascript DOM 总结⼀直以为DOM（⽂档对象模型）是JS中最简单的⼀部分。
不可否认，它确实很简单，因为DOM的思维模式有点固定，只需要简单地记住⼀些固定的⽅法，所以DOM可以说是所有js(这⾥指的是客户端的js)⼊门的起⼿点。
最近我在做⼀些有⽤到DOM的练习时，发现⾃⼰的DOM知识⾮常零散(⼀直以为掌握的很好)，可能有很多朋友都觉得，DOM嘛，也就调⽤调⽤⼏个⽅法，或者我直接使⽤jQuery，根本不⽤考虑DOM的细节。
是，这也没错，jQuery对DOM的封装可谓前⽆古⼈，但是正如成长⼀样，跑之前是⼀定要会⾛的，所以我认为对DOM必须要有⽐较详细的了解，于是我总结了如下的关于DOM的⼀些使⽤⽅法。
在W3C总结跪DOM规范中，有⼀些⼗分常⽤的，也有些不怎么有⽤的，这⾥我们主要讨论常⽤⼀些DOM操作(有关DOM 的基本概念在此就不介绍了)： 节点层次 所谓节点层次，指的是html⽂档中存在具有各⾃特点，数据，⽅法的节点(例如标签)，节点之间的关系构成了层次(其实可以想象成树状结构)。
W3C的DOM1级规范中定义了⼀个NODE接⼝。
这个接⼝有⼀些⽅法是⾮常有⽤的: Node.ELEMENT_NODE;(元素节点) Node.TEXT_NODE;(⽂本节点) Node.DOCUMENT_NODE(⽂档节点) ⽽每个节点都有⾃⼰的节点类型标志，也就是NodeType属性，例如元素节点的nodeType == '1';⽂本节点的nodeType == '3';⽂档节点的nodeType == '9'; 1.⽂档节点 ⽂档节点在⼀个⽂档中⽤document对象表⽰，它的基本特征如下:console.log(document.nodeType); // 9console.log(document.nodeName); // #documentconsole.log(document.nodeValue); // nullconsole.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点) tip one (⽂档的⼦节点): 1.document.documentElement可以取到html对象，同样可以通过document.childNodes[0]以及document.firstchild取到。
JavaScript DOM基本操作(思维导图)
JavaScript DOM基本操作获取节点documentgetElementById语法document.getElementById(元素ID)功能通过元素ID获取节点getElementsByName语法document.getElementsByName(元素name属性)功能通过元素的name属性获取节点getElementsByTagName语法document.getElementsByTagName(元素标签)功能通过元素标签获取节点节点指针firstChild语法父节点.firstChild功能获取元素的首个子节点lastChild语法父节点.IastChild功能获取元素的最后一个子节点childNodes语法父节点childNodes功能获取元素的子节点列表previousSibling语法兄弟节点.previousSibling功能获取已知节点的前一个节点nextSibling语法兄弟节点.nextSibling功能获取已知节点的后一个节点parentNode语法子节点.parentNode功能获取已知节点的父节点节点操作创建节点createElement语法document.createElement(元素标签)功能创建元素节点createAttribute语法documer.createAttribute(元素属性)功能创建属性节点createTextNode语法document.createTextNode(文本内容)功能创建文本节点插入节点appendChild语法appendChild(所添加的新节点)功能向节点的子节点列表的末尾添加新的子节点insertBefore语法insertBefore(所要添加的新节点，已知子节点)功能在已知的子节点前插入一个新的子节点替换节点replaceChild语法replaceChild(要插入的新元素，将被替换的老元素)功能将某个子节点替换为另一个复制节点cloneNode语法需要被复制的节点.cloneNode(true/false)功能创建指定节点的副本参数true复制当前节点及其所有子节点false仅复制当前节点删除节点removeChild语法removeChild(要删除的节点)功能删除指定的节点属性操作获取属性getAttribute语法元素节点.getAttribute(元素属性名)功能获取元素节点中指定属性的属性值设置属性setAttribute语法元素节点.setAttribute(属性名,属性值)功能创建或改变元素节点的属性删除属性removeAttribute语法元素节点.removeAttribute(属性名)功能删除元素中的指定属性文本操作insertData(offset,String)从offset指定的位置插入stringappendData(string)将string插入到文本节点的末尾处deleteDate(offset,count)从offset起删除count个字符replaceData(off,count,string)从off将count个字符用string替代splitData(offset)从offset起将文本节点分成两个节点substring(offset,count)返回由offset起的count个节点。
javaScript DOM特性方法
parentNode Node 该节点的父节点
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
当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特性：
getAttribute(name)－－等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)－－等于 attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)－－等于attribute.removeNamedItem(name)。
var oBody = oHtml.childNodes[1];
注意方括号标记其实是NodeList在javascript中的简便实现。实际上正式的从childNodes列表中获取子节点的方法是使用 item()方法：
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript制作页面特效课后练习
1．在某页面中有一个图片和五个超链接，如下图所示，单击不同的数字超链接显示不同的
图片：
图1 图片幻灯片显示效果
提示：
（1）默认显示一个图片，五个超链接调用同一个传参函数，参数设置为显示图片的名称。
（2）使用“对象名.属性值”或setAttribute()的方式改变图片的名称。
2．做一个模仿删除用户的页面，功能如下：
默认情况下，在一个Table 里面放置若干用户信息，后面有“删除”链接：
图2 模仿删除用户的页面效果1
点击“删除”链接，弹出对话框，提示用户是否继续操作：
图3 模仿删除用户的页面效果2
用户点击确定后，要删除的一行，自动加上删除线，表示处于删除状态：
图4 模仿删除用户的页面效果3
提示：
（1）使用confirm 弹出确认框，如果用户点击“确定”，则返回true，进行下一步操作；
（2）定义一个类样式，用来标识删除状态，如果用户点击了“确定”按钮之后，该行所对
应的tr 标签，自动应用该类样式。
3．做一个横向导航菜单，并且每一项均包含一个二级的菜单，效果图如下：
图5 横向导航菜单
当鼠标不在菜单上时，二级菜单不显示，当鼠标移动到任一项上时，显示该项对应的二级菜
单。
提示：
（1）使用对象的display 属性可以控制对象的显示与隐藏；
（2）使用相对定位/绝对定位来控制二级菜单的显示位置；
（3）使用鼠标的两个事件（onmouseove/onmouseout）来触发控制函数。
4．做一个横向不间断滚动的特效，效果图如下：
图6 图片横向滚动特效
要求：图片始终横向向左滚动，并且每一张图片首尾相连，不存在间断。
提示：
（1）若要使图片不间断，则需要将图片列表重复一次，这样第一遍的末尾图片和第二遍的
开始图片就能相连了，即使用innerHTML 属性让图片内容翻倍；（2）使用setInterval()方法，可以控制一个函数每隔多少毫秒执行一次；
（3）使用绝对定位与相对定位结合，可以使图片所在的层相对于父层的位置可控，方便随
着计时器的执行，left 的值递减；
（4）当left 的值递减到原内容的宽度时，则让left 重新归零，这样不会发生视觉上的变
化。
5．制作一个网易邮箱登录的页面，在默认状态下，左面“163 免费邮”高亮显示，同时，
右侧内容是显示的蓝色风格的“登陆163 免费邮箱”的界面，效果图如下：
图7 网易邮箱登录页面1
当用户点击左侧“126 免费邮”的时候，左面“126 免费邮”高亮显示，同时右侧显示绿色
风格的“登陆126 免费邮箱”的界面，效果图如下：
图8 网易邮箱登录页面2
当用户点击左侧“126 免费邮”的时候，左面“126 免费邮”高亮显示，同时右侧显示绿色
风格的“登陆126 免费邮箱”的界面，效果图如下：
图9 网易邮箱登录页面3
提示:
（1）点击左侧选项时，可以改变选项的className 属性，从而实现
左侧选项风格的变化，
同时，根据用户点击的选项，来判断右侧应该显示的内容；
（2）右侧登陆区域，同样可以根据className 属性进行风格的控制；（3）使用下拉列表项的selected 属性，可以控制下拉列表当前选中的项目。
6．做一个树形菜单，效果图如下：
图10 树形菜单
要求：当用户点击大类或者大类前面的图片时，该类下面的子项由可见变成不可见，或者由
不可见编程可见，同时，大类前面的小图标由减号变成加号，或者由加号变成减号。
提示：
（1）使用对象的display 属性控制对象的显示与隐藏；
（2）获取子项是否处在显示状态，如果当前处在显示状态，则隐藏子项，否则显示子项；
使用图片标签的src 属性，控制要显示的图片url 地址。
7．做一个百度知道页面，具体要求如下：
打开网页，右下角显示“欢迎牌”，效果如下所示：
图11 百度知道页面1
当窗口滚动条滚动或者尺寸发生改变时，“欢迎牌”始终保持显示在页面的右下角。
当点击“欢迎牌”右上角的“最小化”图标时，“欢迎牌”内容隐藏，同时“最小化”按钮
图标变成“最大化”按钮图标，如下图所示：
图12 百度知道页面2
当点击页面右上角“注册”或者“登陆”时，在屏幕中央弹出一个层，显示登陆相关的信息，
如下图所示：
图13 百度知道页面3
提示：
（1）使用documentElement 属性的scrollLeft 及scrollTop 属性，可以获取滚动条向上和
向左滚动的距离；
（2）当网页加载时，触发window 对象的onload、onscroll 及onresize 事件；
（3）元素的显示和隐藏使用对象的display 属性进行控制；
8．做一个新闻评论页面，要求当用户输入内容然后点击提交按钮时，刚发表的评论自动显
示在评论列表，显示用户昵称、发布时间和评论内容，同时评论条数自动增加。
页面效果如
下：
图14 腾讯新闻评论页面
要求：用DOM 实现。
提示：
（1）用户点击“提交评论”按钮后，使用JavaScript 创建各Dom 节点，然后添加道评论列
表节点里面，最后，清空昵称和评论内容表单框内的内容；
（2）Dom 操作的相关方法有：创建一般节点（createElement）、创建文本节点
（createTextNode）、克隆节点（cloneNode）、添加子节点
（appendChild）等。
（3）显示当前时间，使用Date 对象进行计算。
（4）评论条数自动增加可以先通过innerHTML 属性获取当前条数，然后加一，再通过
innerHTML 更新当前评论条数。
9．做一个设置投票内容的页面，页面中包含“投票内容”、“投票类型”和“投票选项”
字段，页面效果图如下：
图15 设置投票内容
要求：
（1）页面刚打开时，投票选项只显示两项，当点击“增加选项”时，使用DOM 操作建立新
的选项，投票选项自动增加一行；
（2）增加的行包含“删除”链接，当点击“删除”链接时，该行自
动从DOM 数中移除；
（3）点击取消操作，网页关闭。
提示：
（1）建立HTML 页面时，投票选项只做两行，放在同一个父容器内；（2）点击“增加选项”时，使用DOM 增加节点的方式，向上述父容器内新增一个文本框及
一个“删除”链接，同时为该链接添加一个事件，并指定事件名，传入的参数为链接本身；
删除函数可以通过传入的链接来查找父容器，并通过DOM 将文本框及链接从DOM 树中移除。
10．模拟一个Windows 桌面，打开网页时，显示如下图所示的网页：
图16 模拟Windows 桌面1
点击“开始”按钮，弹出菜单，如下图所示：
图17 模拟Windows 桌面2
要求：
（1）网页打开或者调整窗口尺寸时，任务栏始终保持在页面的最下端；
（2）右下角的时间一直都在走动；
（3）点击“开始”按钮，按钮显示成按下去的状态，同时显示菜单，再次点击“开始”按
钮，按钮显示成正常的状态，同时隐藏菜单；
（4）鼠标移动到菜单任一项上时，该项背景编程蓝色；
（5）鼠标点击菜单任一项，菜单隐藏，开始菜单显示成正常状态。
提示：
（1）做布局时，状态栏的position 属性应当设置为absolute，以方便绝对定位；
（2）通过clientHeight 和scrollTop 配合使用,计算出开始菜单显
示的位置；
（3）当窗口加载和尺寸发生改变时，分别触发onload 和onresize 事件；
（4）显示当前时间用Date 对象计算出，同时，通过setInterval 函数可以控制每一秒的时
间都在更新；
（5）“开始”菜单按下去和正常状态，分别定义了两个CSS 类，进行切换；
（6）菜单的显示和隐藏，使用display 属性控制；
（7）菜单当前项编程蓝色，可以通过设置当前状态下的样式进行切换。
__。