文本对象模型（Document Object Model）
本文内容：
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> |
但并非所有的元素节点都包含或直接包含文本节点，比如<br/>.
△ 属性节点（Attribute Node）
属性节点对应着HTML文档中的元素属性。因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。比如以下代码中的class=”Sample”，id=”purchases”都对应着一个属性节点。
|
<h1 class=Sample>Welcome to DOM <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）的更多相关文章
- DOM---文档对象模型(Document Object Model)的基本使用
一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...
- 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- JS--dom对象：document object model文档对象模型
dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- DOM （文档对象模型(Document Object Model)）
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- （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 ...
- Document Object Model
什么是DOM W3C制定的书写HTML分析器的标准接口规范 全称 Document Object Model 文档对象模型DOM为HTML文档提供的一个API(接口) 可以操作HTML文档 <! ...
- Eloquent JavaScript #11# The Document Object Model
索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...
- DOM 是什么，Document Object Model，文档对像模型
#为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...
随机推荐
- 在Android Studio进行“简单配置”单元测试（Android Junit）
起因 在Android studio 刚出.本人就想弄单元测试,可惜当时Android studio不知道抽什么风(准确来说,应该是我不会弄而已).无法执行到相应的代码.后来今天突然自己又抽风.又想去 ...
- 使用PuTTY时的文件上传下载方法
如果你是个PuTTY重度用户,在使用ssh连上一个远端机器工作了好一阵子后,发现自己需要对 当前会话 上传/下载文件,要怎样才能简单快捷呢? 最简单的方式 最简单的方法: 安装WinSCP或者File ...
- distri.lua重写开源手游服务器框架Survive
Survive之前采用的是C+lua的设计方式,其中网关服务器全部由C编写,其余服务全部是C框架运行lua回调函数的方式编写游戏逻辑. 鉴于一般的手游对服务器端的压力不会太大,便将Survive用di ...
- SQLSERVER吞噬内存解决记录
现在手上有一个不大不小的系统,运行了一段时间,因为是24*7不断运行,所以内存逐渐增高,慢慢的会飙到95%以上,然后不得不重启电脑,因为用的是云,怕虚拟机重启down掉起不来,重启操作还只能在凌晨4. ...
- CSS-JQUERY笔记
Ready $(document).ready(function(){ }) Input_div_span Input-长度限制 <input maxLength="2"&g ...
- LLVM
http://blog.csdn.net/snsn1984/article/details/41077763
- Qt编写自定义控件插件路过的坑及注意事项
在一日一控件的口号下,终于写好了五十几个自定义控件,包括各种仪表盘,各种温度计,各种进度条,各种按钮等,具体可参见(http://www.cnblogs.com/feiyangqingyun/p/61 ...
- Android Launcher 研究学习
Launcher是系统启动后第一个启动的程序,是其它应用程序的入口,也就是我们的手机程序的桌面程序; 一.Launcher的定义及构成: <1>通过查看官方提供的Launcher源码可以知 ...
- 对象与Byte数组相互转化工具方法
/** * 对象转byte * @param obj * @return */ private byte[] ObjectToByte(Object obj) { byte[] bytes = nul ...
- 测试GeoGebra博客
已知函数 \(\textit{f}(\textit{x})=2\textit{m}\ln\textit{x}-\textit{x}^2\), \(\textit{g}(\textit{x})=\tex ...