本文内容：

1. 概述

2. DOM中的节点类型

3. DOM节点的选取

4. 存取元素属性

5.DOM元素的增删

6.小结

★ 概述

文本对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容，结构和样式的语言平台，提供了标准的HTML和XML对象集，并有一个标准的接口来访问操作他们。

——摘自W3C

文本对象模型（Document Object
Model，DOM），最初是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准，然而主要是针对IE和Netscape Navigator。

★ DOM中的节点类型

节点

在W3C DOM中，每个容器、独立的元素，或文本块都被看作一个节点，节点是W3C DOM的基本构建块；

当一个容器包含另一个容器时，对应的节点之间有父子关系。同时该节点树遵循HTML的结构化本质，如<html>元素包含<head>，<body>，前者又包含<title>,或者包含各种块元素等。

JavaScript中的DOM节点类型常量

DOM中定义了HTML文档中的节点类型，JavaScript中定义了相应的结点类型常量

可借用Chrome Developer Tools查询DOM节点类型常量

几种常见的节点类型

△ 元素节点（Element Node）

在HTML文档中，各HTML元素如<body>,<p>,<ul>等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成一个节点。比如，所有的列表项<li>都包含在无序清单元素<ul>内部。其中节点树中<html>元素是节点树的根结点。

   注意：元素节点本身并不包含其内容，其内容是由其文本子节点所提供的。

△ 文本节点（Text Node）

在节点树中，元素节点构成树的枝干，而文本则构成树的叶子。在HTML中，文本节点总是包含在元素节点的内部。比如，在下面语句中包含“Welcome to”，“DOM”，“World！”3个文本节点：

<p>Welcome to <em>DOM</em>
World!</p>

但并非所有的元素节点都包含或直接包含文本节点，比如<br/>.

△ 属性节点（Attribute Node）

属性节点对应着HTML文档中的元素属性。因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。比如以下代码中的class=”Sample”，id=”purchases”都对应着一个属性节点。

<h1 class=Sample>Welcome to DOM
World!</h1>

<ul id=”purchases”>…</ul>

元素节点、文本节点和属性节点的示例

★ DOM节点的选取

document对象

访问DOM的入口点是document，它是window的属性，在JavaScript中，可以直接访问它。

document对象提供一系列的方法，实现了“设定这些节点对象的属性，调用其方法，响应其特定的事件”。

按照ID提取元素

DOM提供getElementById()方法，用于返回与指定id属性值的元素节点相对应的对象，对应着文档里一个特定的元素节点。

按元素节点的Name属性选取

相对于id属性值，旧版本的HTML文档更习惯于定义<form>,<select>等元素节点的name属性此时需要用到DOM提供的getElementByName()方法来定位

按标签名称（TagName）返回节点集合

getElementByTagName()方法返回文档里指定标签tag的元素对象数组（对象）。

基于CSS样式类选择结点

var c =document.getElementByClassName(“myClass”);

var d=document.getElementByClassName(“first second”);

//此种选取方法，仅在较新版本的浏览器中支持

★ 存取元素属性

存取特定属性的取值

1DOM提供getAttribute()方法，用于返回目标对象指定属性名称的属性值。其语法如下：

object.getAttribute(attribute);

2DOM提供setAttribute()方法，用于修改任意元素节点指定属性名称的某个属性值，其语法如下：

object.setAttribute(attribute,value);

示例代码

删除特定的属性

使用removeAttribute()方法删除任意元素节点指定的属性；

操纵CSS的基本方法

通过元素对象的style属性可以设定元素的CSS值。

myElement.style.color=”#ff0000”;

myElement.style.left=”40px”;

myElement.style.backgroundRepeat=”repeat-x”;

 

★ DOM元素的增删

基本方法

1.调用document的相应方法创建元素对象并设置相应的属性；

2.将创建好的元素插入到DOM树的指定位置；

方法

说明

creatElement(elementName)

用指定的标记创建新的Elment结点

creatTextNode(text)

用制定的文本创建新的TextNode节点

节点树常用操作

方法

说明

appendChild(childItem)

通过把一个节点增加到当前的childNodes[]组，给文档树增加节点。

hasChildNodes()

返回值为布尔类型。如果当前节点拥有子节点，则返回true。

insertBefore(oNewNode,oChildNode)

在已有的（oChildNode）子节点前插入一个新的（oNewNode）子节点

removeChild(oNode)

从文档树中删除并返回指定的子节点

replaceChild(oNewnode,oChildNode)

从文档树中删除并返回指定的子节点，用另一个节点（oNewNode）来替代它（oChildNode）。

swapNode(oNode)

两个借点对象交换位置

★小结

n  document对象提供了相应的方法，可以很方便地操纵DOM树；

n  由于历史原因，DOM API存在着不一致的地方，直接使用它需要针对不同浏览器或同一浏览器的不同版本编写兼容性代码；

n  在实际开发中，现在不再建议直接使用DOM API操作网页，更现实的选择是使用jQuery操作DOM树，jQuery对原生的DOM
API进行了封装提供了比较完善的浏览器兼容性，使用方便灵活，是当前用得最广泛的Web前端框架之一。

 

小知识：CSS标识与JavaScript标识的对应关系

得出结论：

在JavaScript代码中，CSS规则中的连字符（“-”）被省略，大写其后紧跟的字母；

CSS中的Class在JavaScript中是关键字，所以，换成className；

文本对象模型（Document Object Model）的更多相关文章

  1. DOM---文档对象模型(Document Object Model)的基本使用

    一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...

  2. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. JS--dom对象：document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  4. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. DOM （文档对象模型(Document Object Model)）

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  6. （3）选择元素——（2）文档对象模型（The Document Object Model）

    One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...

  7. Document Object Model

    什么是DOM W3C制定的书写HTML分析器的标准接口规范 全称 Document Object Model 文档对象模型DOM为HTML文档提供的一个API(接口) 可以操作HTML文档 <! ...

  8. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  9. DOM 是什么，Document Object Model，文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

随机推荐

  1. Ios开发之定位CLLocationManager

    Ios中的定位功能是通过 Core Location框架实现的.它和地图开发框架是相互独立的.在Core Location中主要实现了定位和地理编码的功能! 下面我们就来介绍一下它的属性,方法和代理方 ...

  2. 2015 年 JavaScript 开发者调查报告

    你写什么类型的 JavaScript? 97.4% 的受访者写 JavaScript 的 Web 浏览器,其中有 37% 写移动 Web 应用. 一些参与者回复,他们会在其他地方用 JavaScrip ...

  3. 【转载】怎样使用ZEMAX导出高质量的图像动画

    Zemax 导出高质量图片与动画 (2013-08-13 11:01:51) http://blog.sina.com.cn/s/blog_628dd2bc0101dycu.html 转载▼ How ...

  4. C#中操作xml文件（插入节点、修改、删除）

    已知有一个xml文件(bookstore.xml)如下: <?xml version="1.0" encoding="gb2312"?> <b ...

  5. 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包。

    最近在升级 Visual Studio 2015 Update 3 的过程中,等了很长时间都没一点进展,于是就强行终止了升级程序,但VS也因此出了问题. 后来经过修复,不行,卸载再重装,仍然提示这个错 ...

  6. 单源最短路径算法---Dijkstra

    Dijkstra算法树解决有向图G=(V,E)上带权的单源最短路径问题,但是要求所有边的权值非负. 解题思路: V表示有向图的所有顶点集合,S表示那么一些顶点结合,从源点s到该集合中的顶点的最终最短路 ...

  7. 架设laravel

    用laravel 架设的用户单点登录授权系统,git clone项目文件后,需要下面的方法初始化,纪录以供项目成员参考 错误信息:`Warning: require(/http/www.mywakav ...

  8. Swift 关键字汇总

    常见的关键字有以下4种 与声明有关的关键字:class.deinit.enum.extension.func.import.init.let.protocol.static.struct.subscr ...

  9. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  10. Oracle的model语句入门-转

    Model语句是Oracle 10g的新功能之一. 本文通过一些简单的例子帮助理解Model语句的用法,复杂使用场景请参考其他文章. 环境:当然需要Oracle 10g以上,本人是在11g上测试的. ...