本文内容:

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)

两个借点对象交换位置

★小结

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. (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 ...

  2. Document Object Model

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

  3. DOM (Document Object Model)文档对象模型

    [理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...

  4. javascript快速入门之BOM模型—浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

  5. DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记

    1. childNodes  nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...

  6. DOM document object model learn

    DOM对W3C DOM而言,HTML文档中任何一样东西都是一个节点,而且节点之间是有层次的.如<p>I am a JavaScript hacker.</p>有两个节点,一个是 ...

  7. BOM (Browser Object Model) 浏览器对象模型

    l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...

  8. 浏览器对象模型(BOM,Browser Object Model)

    本文内容     1.概述     2.windows与document     3.对话框     4.定时调用     5.URL解析与访问历史     6.浏览器和屏幕信息 ★概述     &q ...

  9. 浏览器对象模型BOM(Browser Object Model)

    1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...

随机推荐

  1. 用chrome来映射查找样式对应的sass

    较新版本的sass(3.3+)支持source-map功能,可以配合谷歌浏览器或者livestyle来映射查找对应的样式. 要生成source-map可以在grunt中使用 grunt-contrib ...

  2. Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档

    array,list,dataframe索引切片操作 2016年07月19日——智浪文档 list,一维,二维array,datafrme,loc.iloc.ix的简单探讨 Numpy数组的索引和切片 ...

  3. datatables增删改查的实现

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  4. DSP using MATLAB 示例 Example3.15

    上代码: subplot(1,1,1); b = 1; a = [1, -0.8]; n = [0:100]; x = cos(0.05*pi*n); y = filter(b,a,x); figur ...

  5. SWFUpload上传大文件(暂时用用,真正用的时候还是要改的)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android深入浅出之Binder机制

    一说明 Android系统最常见也是初学者最难搞明白的就是Binder了,很多很多的Service就是通过Binder机制来和客户端通讯交互的.所以搞明白Binder的话,在很大程度上就能理解程序运行 ...

  7. 基于HTML5的捕鱼达人游戏网页版

    之前给大家分享了html5实现的水果忍者,愤怒的小鸟,中国象棋游戏.今天给大家分享一款捕鱼达人(fishjoy)网页版游戏的源码.可以在线玩也可以下载到本地.它使用html5技术和javascript ...

  8. POJ 1459 Power Network(网络最大流,dinic算法模板题)

    题意:给出n,np,nc,m,n为节点数,np为发电站数,nc为用电厂数,m为边的个数.      接下来给出m个数据(u,v)z,表示w(u,v)允许传输的最大电力为z:np个数据(u)z,表示发电 ...

  9. 生成excel内存溢出问题的解决方式

    常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...

  10. (一)一个工作任务引起的乱战——c#中结构体与byte[]间相互转换

    一个工作任务涉及到c#与c++系统间的udp通信,处理了蛮长时间没有完成任务,但是期间接触到不少小知识点.本人是初接触c#,c++语言没有接触过.可能写的东西都很小儿科,暂且记录下来当工作日记把. 先 ...