本文内容：

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. python数据结构之栈、队列的实现

    这个在官网中list支持,有实现. 补充一下栈,队列的特性: 1.栈(stacks)是一种只能通过访问其一端来实现数据存储与检索的线性数据结构,具有后进先出(last in first out,LIF ...

  2. ECSHOP安装百度编辑UEditor教程

    ECSHOP系统自带的编辑器大家用过都知道,难用不说,还不能批量上传图片.很多朋友都喜欢百度编辑器,因为百度编辑器功能强大,使用方便,而且不会生成太多多余代码.网上有许多ECSHOP整合百度编辑器的教 ...

  3. websocket for python

    https://github.com/aaugustin/websockets server.py #!/usr/bin/env python import asyncioimport websock ...

  4. AngularJS初始化闪烁

    可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html

  5. mysql 分表策略

    mysql单表数据量巨大时,查询性能会很差,经常遇到的是存储日志相关的数据会每天产生大量的数据. 这里提供单表拆分成多表存储的三个思路: 一,固定N张表,ID取模存储 预先创建好N张表,记录按ID取模 ...

  6. Freemyapps赚取积分终极图文教程

    Freemyapps怎么赚积分.Clash of Clans宝石获得技巧的终极教程来啦~此教程详细指导大家一步步的成功获取大量积分,买5个农民神马的自然不再话下.当然,人民币玩家可以略过~   原文作 ...

  7. 日本超人气洛比（Robi）声控机器人

    1.日本超人气洛比(Robi)声控机器人. http://technews.cn/2015/04/18/interview-with-robi-creator-tomotaka-takahashi/ ...

  8. OpenGL es3.0 初始化及渲染

    class FOpenglEs { public: /** * 初始化 OpenGLES3.0 */ bool initOpenGLES30(HWND hwnd) { EGLConfig config ...

  9. 谷歌面经 Tree Serialization

    http://www.careercup.com/question?id=4868040812396544 You should transform an structure of multiple ...

  10. spring中bean配置和bean注入

    1 bean与spring容器的关系 Bean配置信息定义了Bean的实现及依赖关系,Spring容器根据各种形式的Bean配置信息在容器内部建立Bean定义注册表,然后根据注册表加载.实例化Bean ...