【Ajax】DOM基础及DOM操作HTML

DOM的概念

    DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。就是HTML页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。 

DOM对象树

  DOM将每一个HTML或XML的文档都看待成内存中的一个对象树
  浏览器中的一个页面对应一个HTML文档,因此有一颗与之对应的HTML的DOM树。
  浏览器中一个页面可能处理很多个XML的文档,因此可能有很多颗XML的DOM树。

DOM对象树种的常用节点

     在DOM树种文档内容对应了很多不同类型的节点,他们都是一个NODE对象。
     DOM 代码中最常用的任务就是在页面的DOM树中导航。比方说,可以通过其“id”属性定位一个form,然后开始处理那个form中内嵌的元素和文本。其中可能包含文字说明、输入字段的标签、真正的input 元素,以及其他HTML 元素(如img)和链接(a元素)。如果元素和文本是完全不同的类型,就必须为每种类型编写完全不同的代码。如果使用一种通用节点类型情况就不同了。这时候只需要从一个节点移动到另一个节点,只有当需要对元素或文本作某种特殊处理时才需要考虑节点的类型。如果仅仅在DOM树中移动,就可以与其他节点类型一样用同样的操作移动到元素的父节点或者子节点。只有当需要某种节点类型的特殊性质时,如元素的属性,才需要对节点类型作专门处理。将DOM树中的所有对象都看作节点可以简化操作。

NODE对象有一个nodeType的属性可用于判断节点类型

接口

nodeType常量(IE不支持)

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点(标签)

Atrr

Node.ATTRIBUTE_NODE

2

属性节点(属性)

Text

Node.TEXT_NODE

3

文本节点(文本)

Comment

Node.COMMENT_NODE

8

注释节点(注释)

Document

Node.DOCUMENT_NODE

9

文本根节点



文本根节点

    元素节点是文档中最常见的节点,HTML或XML文档中的标签<body>,<input>,<div>都对应DOM树中的元素节点。
    属性节点表示的是一个元素节点上定义的某个属性,例如<input>中定义的value属性就对应DOM树种的一个属性节点。
    文本节点表示文档中的一段文字信息,例如HTML文档中定义<div>abcdef</div>其中的“abcdef”就是一个文本节点。

AJAX,DOM 和javascript的关系

    DOM能够为javascript引擎公开网页。通过DOM,可以采用编程的方式操作文档的结构。Web页面的DOM表示是一个树状结构,由元素或点组成。节点可以包含很多子节点。javascript通过全局变量document公开当前Web叶梦得根节点,这个变量是所有DOM操作的起点。DOM使用容器的属性来做索引,而不是使用数字做索引。DOM中元素的关系可以看作是HTML清单的镜像。这种关系可以是双向的,修改DOM将改变HTML标记,随之会反映在页面的现实上。
用一个简单一点的关系表示就是:
    DOM--数据--》Jquery--利用--》Ajax--请求--》后台
    后台--回应Ajax请求--》Jquery--操作dom变现请求--》dom

评论 35
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值