AJAX开发简略续一(1)

最新推荐文章于 2024-08-15 14:48:45 发布
最新推荐文章于 2024-08-15 14:48:45 发布
阅读量1.4k 收藏
点赞数
分类专栏： Ajax 文章标签： ajax 文档 html javascript xml table

在前一篇文章《AJAX开发简略》中，我们讲述了如何用AJAX来改进设计的用户体验。接下来，我们将讲述如何用AJAX来更新文档，以及处理服务器返回的XML文档。我们的最终目的是接收服务器的返回信息，修改当前文档的内容。是时候让重要人物--DOM粉墨登场了。

7.4、文档对象模型（DOM）

文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。本文所涉及的DOM，是指W 3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。

7.4.1、DOM眼中的HTML文档：树

在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。如下图：
HTML文档结构.jpg
    这个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。

 

 

7.4.2、HTML文档的节点

DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型：

接口

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点

Text

Node.TEXT_NODE

3

文本节点

Document

Node.DOCUMENT_NODE

9

document

Comment

Node.COMMENT_NODE

8

注释的文本

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

11

document片断

Attr

Node.ATTRIBUTE_NODE

2

节点属性

DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义，请参考《Javascript权威指南》，在此不赘述。

Document定义的方法大多数是生产型方法，主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有：

方法

描述

createAttribute()

用指定的名字创建新的Attr节点。

createComment()

用指定的字符串创建新的Comment节点。

createElement()

用指定的标记名创建新的Element节点。

createTextNode()

用指定的文本创建新的TextNode节点。

getElementById()

返回文档中具有指定id属性的Element节点。

getElementsByTagName()

返回文档中具有指定标记名的所有Element节点。

对于Element节点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质，比如<table>标记的border属性。下面列出Element常用的属性：

属性

描述

tagName

元素的标记名称，比如<p>元素为P。HTML文档返回的tabName均为大写。

 

ambitiontan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX开发简略(含续一)
11-10
描述中同样提及“AJAX开发简略(含续一)”，这可能意味着这是一个系列教程的一部分，涵盖了AJAX开发的多个阶段或主题，这次主要讲解的是AJAX的初步概念和后续的深入内容。 标签与标题相同，进一步确认了这个主题的...
AJAX开发简略含续一(PDF).rar
07-09
七、AJAX开发 　7.1、AJAX应用到的技术 　A、XMLHttpRequest对象 　B、Javascript 　C、DOM 　D、XML 　7.2、AJAX开发框架 　A、初始化对象并发出XMLHttpRequest请求 　B、指定响应处理函数 　C、发出HTTP...
AJAX开发简略续一
Allin's blog
03-02 1592
（续前一篇）AJAX开发简略在前一篇文章《AJAX开发简略》中，我们讲述了如何用AJAX来改进设计的用户体验。接下来，我们将讲述如何用AJAX来更新文档，以及处理服务器返回的XML文档。我们的最终目的是接收服务器的返回信息，修改当前文档的内容。是时候让重要人物--DOM粉墨登场了。7.4、文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档
AJAX开发简略续一(3)
牛皮纸
06-10 477
例子2 – sample3_2.htm：接下来使用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数，其他跟sample3_1.htm一样：function countTotalElement(node) { //参数node是一个Node对象       var total =
AJAX开发简略续一(5)
牛皮纸
06-10 374
E、使用DOM操作XML文档在数据表示方面，XML文档更加结构化。DOM在支持HTML的基础上提供了一系列的API，支持针对XML的访问和操作。利用这些API，我们可以从XML中提取信息，动态的创建这些信息的HTML呈现文档。处理XML文档，通常遵循“加载XML文档à提取信息à加工信息à创建HTML文档”的过程。下面的例子演示了如何加载并处理XML文档。这个例子包含两个JS函数。loadX
AJAX开发简略续一(6)
牛皮纸
06-10 467
7.5.2、选择合适的XML生成方式现在的web应用程序往往采用了MVC三层剥离的设计方式。XML作为一种数据保存、呈现、交互的文档，其数据往往是动态生成的，通常由JavaBean转换过来。由JavaBean转换成XML文档的方式有好几种，选择合适的转换方式往往能达到事半功倍的效果。下面介绍两种常用的方式，以便需要的时候根据情况取舍。A、类自行序列化成XML类自行序列化成XML即每个类
AJAX开发简略续一(4)
牛皮纸
06-10 405
 例子5 -- sample4_3.htm：正如我们在Node节点介绍部分所指出的那样，appendChild()、replaceChild()、removeChild()、insertBefore()方法会立即改变文档的结构。下面的例子包含两个表格，我们试着把表格二的内容替换表格一的内容。无标题文档function replaceContent() {    
AJAX开发简略续一(2)
牛皮纸
06-10 387
Element常用的方法： 方法 描述 getAttribute()
【转帖】AJAX开发简略续一
zero2learn的专栏
11-22 1151
在前一篇文章《AJAX开发简略》中，我们讲述了如何用AJAX来改进设计的用户体验。接下来，我们将讲述如何用AJAX来更新文档，以及处理服务器返回的XML文档。我们的最终目的是接收服务器的返回信息，修改当前文档的内容。是时候让重要人物--DOM粉墨登场了。7.4、文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般
【原创】AJAX开发简略续一
程序人生
11-16 3555
（续前一篇）AJAX开发简略在前一篇文章《AJAX开发简略》中，我们讲述了如何用AJAX来改进设计的用户体验。接下来，我们将讲述如何用AJAX来更新文档，以及处理服务器返回的XML文档。我们的最终目的是接收服务器的返回信息，修改当前文档的内容。是时候让重要人物--DOM粉墨登场了。7.4、文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的
AJAX开发简略含续一(PDF)
09-21
七 AJAX开发 　7 1 AJAX应用到的技术 　A XMLHttpRequest对象 　B Javas cript 　C DOM 　D XML 　7 2 AJAX开发框架 　A 初始化对象并发出XMLHttpRequest请求 　B 指定响应处理函数 　C 发出HTTP请求 　D 处理服务器...
js 获取浏览器当前窗口url及参数等
快乐的小跳蛙的博客
08-12 145
需求：获取浏览器当前窗口的url及参数。 思路：通过获取url的信息。
Spark2.x 入门：把 Flume 作为 DStream 数据源
跟着大数据和AI去旅行
08-15 427
Flume是非常流行的日志采集系统，可以作为DStream的高级数据源。本部分将介绍如何让Flume推送消息给Spark Streaming，Spark Streaming收到消息后进行处理。 任务描述 把Flume Source设置为netcat类型，从终端上不断给Flume Source发送各种消息，Flume把消息汇集到Sink，这里把Sink类型设置为avro，由Sink把消息推送
JavaScript学习笔记（十三）：网络请求JS AJAX
最新发布
wz_1992的博客
08-15 296
回调函数是作为参数传递给另一个函数的函数。在这种情况下，回调函数应包含响应准备就绪时要执行的代码。// 当响应准备就绪时要做什么。
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 287
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
怎么将两首音乐合拼接在一起？音乐拼接的常见方法
ZCR20000的博客
08-12 970
接下来，给你的项目起一个易于识别的名称，并选择一个合适的保存位置，最后点击“创建”按钮，一个新的音乐项目就建立好了。再次点击“文件”（File）菜单，选择“导入”（Import）命令（注意，在某些版本的Audition中，“导入”可能直接位于“文件”菜单下，无需先选择“打开”）。这时，一个文件选择窗口将会弹出，允许你浏览你的电脑文件夹，寻找并挑选你想要合并的音频文件。在数字音乐制作的浩瀚宇宙中，将两首音乐巧妙地合并成一段无缝的混音，不仅是技术上的挑战，更是艺术灵感的碰撞与融合。
移动端的知识 以及 排静态网页的步骤
x15514104477的博客
08-14 889
移动端的知识（基础知识） 以及 排静态网页的示例步骤
Ajax开发简略指南：从基础到实践
"Ajax开发简略.pdf" 这篇文档是关于AJAX开发的一个简略介绍，适合初学者理解。AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。作者柯自聪提供了他的联系方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值