- 浏览: 496843 次
- 性别:
- 来自: 大连->北京
文章分类
最新评论
-
春天好:
写的很不错 推荐一个免费好用的云端爬虫开发平台不需要安装环境, ...
web爬虫 -
cpu88:
网络爬虫爬来爬去,网上信息可以瞬间扩散,但是也意味着,没有人愿 ...
web爬虫 -
biaoming:
牛。。学习了。。
MongoDB 关于索引的建议 -
biaoming:
楼主用mongo好早啊。
MongoDB 优化 -
biaoming:
好教程,学习了。。。
MongoDB 优化
DOM
DOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript
看看下面的一个文本。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My page</title> </head> <body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> </body> </html>
我们来看看第二段
<p><em>second</em> paragraph</p>
可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点,p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree).
Core DOM 和 HTML DOM
我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档,只不过更为规范些。因此作为DOM Level 1的一部分,Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档,仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。
构造器 | 继承自 | Core /HTML | 说明 |
Node | Core | 任意的节点 | |
Document | Node | Core | document对象,任意XML文档的入口。 |
HTMLDocument | Document | HTML | 这个是window.document对象,扩展于前一个Document对象 |
Element | Node | Core | 在源码的标签。p element的意思就是<p></p>标签 |
HTMLElement | Element | HTML | 抽象的构造器,所有的HTML元素的构造器都继承它 |
HTMLBodyElement | HTMLElement | HTML | body标签 |
。。。 | 。。。 | 。。 | 等等的HTML标签 |
CharacterData | Node | Core | 抽象的构造器,处理文本的。 |
Text | CharacterData | Core | 在标签内的文本节点。如em标签内的second. |
Comment | CharacterData | Core | <!-- 注释 --> |
Attr | Node | Core | 一个标签内的属性。如<p id="closer"> id就是用Attr创建的。 |
NodeList | Core | 一个Node的列表。有length属性。 | |
NamedNodeMap | Core | 可以通过名称访问节点。 | |
HTMLCollection | HTML | 和上面两个差不多,只不过是HTML规范 | |
有兴趣的详情看官方规范把。http://www.w3.org/TR/REC-DOM-Level-1/
接下来要讲到
- 访问DOM节点
- 修改节点
- 创建新的节点
- 删除旧的节点
访问DOM节点
当要验证表单或者更换图片之前,我们要知道怎么样访问元素(element.)。有很多方法获取元素。
Document节点
通过document我们可以访问当前的文档。我们可以通过firebugs(火狐插件),来查看document的属性和方法。
所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么
document.nodeType;//9
一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。
节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document.
节点也有值。对于文本节点,值就是文本。document的值为null
documentElement
XML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。
document.documentElement;//<html> document.documentElement.nodeType;//1 document.documentElement.nodeName;//HTML document.documentElement.tagName;//对于element,nodeName和tagName相同
Child Nodes
为了确定是否包含子节点我们可以用如下方法
document.documentElement.hasChildNodes();//true
HTML有两个子节点。
document.documentElement.childNodes.length;//2 document.documentElement.childNodes[0];//<head> document.documentElement.childNodes[1];//<body>
也可以通过子节点访问父节点
document.documentElement.childNodes[1].parentNode;//<html>
我们把body的引用赋值变量
var bd = document.documentElement.childNodes[1]; bd.childNodes.length;//9
让我们看看body的结构
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
为什么子节点个数为9个呢。
首先是4个P还有一个注释一共4个。
4个节点包含了3个空白的节点。这就7个。
第8个在body和第一个p之间的空白节点。
第9个就是在注释与</body>之间的空白节点。
一共9个节点。
属性
因为第一节点是空白节点,所以第二个节点才是第一个p标签。
bd.childNodes[1];// <p class="opener">
可以查看它是否有属性
bd.childNodes[1].hasAttributes();//true
也可以查看attributes的个数
bd.childNodes[1].attributes.length;//1 //可以用index和名字来访问属性,也可以用getAttribute方法。 bd.childNodes[1].attributes[0].nodeName;//class bd.childNodes[1].attributes[0].nodeValue;//opener bd.childNodes[1].attributes['class'].nodeValue;//opener bd.childNodes[1].getAttribute('class');//opener
访问标签里的内容
让我们看看第一个标签p
你可以用textContent属性来访问。要注意的是,在IE浏览器中并不存在textContent,请用innerText来替换,结果都是一样的。
bg.childNodes[1].textContent;// "first paragraph"
还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。
bg.childNodes[1].innerHTML;// "first paragraph"
第一段没有html代码,所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签
bd.childNodes[3].innerHTML;//"<em>second</em> paragraph" bd.childNodes[3].textContent;//second paragraph
另一种方法可以获取文本节点,然后再取nodeValue属性,代码如下
bd.childNodes[1].childNodes.length;//1 子节点个数 bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph
快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中,文本节点是比较讨厌的。如果文本改变了,有可能就影响脚本了。还有如果DOM树足够的深入,那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是
- getElementsByTagName()
- getElementsByName()
- getElementById()
首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下
document.getElementsByTagName('p').length;//3
因为返回的是个集合,我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。
document.getElementsByTagName('p')[0];// <p class="opener"> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[0].innerHTML;//first paragraph
访问元素的属性,可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子
document.getElementsByTagName('p')[2].id;//closer
要注意的是,class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。
document.getElementsByTagName('p')[0].className;//opener
我们可以用如下方法访问页面所有元素
document.getElementsByTagName('*').length;//9
注意:在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了,但是返回的是所有节点(node),而不仅仅是元素节点(element nodes)。
Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下
var para = document.getElementById('closer') para.nextSibling;//"\n" para.previousSibling;//"\n" para.previousSibling.previousSibling;//<p> para.previousSibling.previousSibling.previousSibling;//"\n" para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">
body 用来访问body元素的。
document.body;//<body>
firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。
遍历DOM
通过以上的学习,我们可以写个函数,用来遍历DOM
function walkDOM(n) { do { alert(n); if (n.hasChildNodes()) { walkDOM(n.firstChild) } } while (n = n.nextSibling) } walkDOM(document.body);//测试
发表评论
-
Javascript 基本数据类型,数组,循环以及条件 - 基本数据类型
2009-10-13 09:43 0你所使用的任意值都包含一个类型。在javascript中有如下 ... -
Javascript 基本数据类型,数组,循环以及条件 - 运算符
2009-10-12 21:41 1339运算符 运算符对一个或两个值(也可能是变量),进行一个 ... -
Javascript 基本数据类型,数组,循环以及条件-变量
2009-10-12 21:39 1832在深入javascript面向对象特性之前,让我们温习下基础知 ... -
Javascript 在浏览器环境中 (七) XMLHttpRequest
2009-02-17 17:19 2472XMLHttpRequest XMLHttpRequest是一 ... -
Javascript 在浏览器环境中 (六) 事件
2009-02-17 14:17 2593事件 事件的例子很多了。如用户输入,点击按钮等等。可以把一个j ... -
Javascript 在浏览器环境中 (五) HTML DOM
2009-02-12 13:56 1708已经知道了 DOM 适用于 XML和HTML文档。前几部分已经 ... -
Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除
2009-02-12 13:55 5931修改节点 上面一篇我们学习了DOM节点的访问,下面来看看DO ... -
Javascript 在浏览器环境中 (二) BOM
2009-02-05 17:25 1510BOM BOM是Browser Object Model的缩写 ... -
Javascript 在浏览器环境中 (一) 目录
2009-02-05 15:35 1298前言 大家都知道Javascript程序本身不能自己运行。需要 ... -
Javascript 继承 (七)
2009-02-05 15:21 1100混合使用原型继承和复制属性 当使用继承时,更多的是想在现有的功 ... -
Javascript 继承 (六)
2009-01-19 16:36 1074深度拷贝 上一节所说到的extendCopy再深一层的对象 ... -
Javascript 继承 (五)
2009-01-13 17:59 1121要注意复制引用。 很烦的是,在复制引用的时候,有的时候并不是期 ... -
Javascript 继承 (四)
2009-01-12 23:04 1157封装继承 通过上面的学习,我们把继承封装,这样就可复用了。代码 ... -
Javascript 继承 (三)
2009-01-06 00:33 1407从子对象中访问父对象。 经典的面向对象语言都有语法可以在子类中 ... -
Javascript 继承 (二)
2009-01-05 23:04 1402仅仅继承Prototype 添加可以重用的方法和属性到prot ... -
Javascript 继承 (一)
2008-12-31 15:32 1389关于继承前言 到这里如 ... -
Javascript Prototype (二)
2008-12-30 16:59 2298穷举属性(Enumerating Properties) 要列 ... -
Javascript Prototype (一)
2008-12-30 14:22 2148关于prototype 属性 函数(functions)在ja ... -
Javascript 对象 (四)
2008-12-29 16:20 1013函数返回对象 可以用构造函数来创建个对象,也可以通过普通函数返 ... -
Javascript 对象 (三)
2008-12-29 15:33 1097This var hero = { name : 'Ra ...
相关推荐
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构。DOM的最小组成单位叫做...
主要介绍了JavaScript在浏览器标题栏上显示当前日期和时间的方法,实例分析了javascript操作时间及DOM节点实现定时触发的技巧,非常具有实用价值,需要的朋友可以参考下
获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Dom节点,就必须要先获得这个Dom节点。 1 获取Dom节点 获得Dom节点代码: Title 标题一 p1 p2 var h1 = ...
由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。 始终记住DOM是一个树形结构...在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.
本书将这些概念贯穿在书中的所有代码示例中,以便呈现用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建了一个实际的网站。 《javascript dom编程艺术...
shear.js shear.js是一个零依赖的...无需将目标元素设置为块级元素的功能,即可在目标元素内的dom节点之间截断,保持目标元素内的原始dom节点在截断零依赖项末尾插入html字符串,非常轻巧(1.9kb)浏览器支持IE
这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个DOM节点),如果在JavaScript执行的同时还继续进行页面的...
网页开发时,在很多时候我们需要操作相同类名的元素,即...Jeremy Keuth大叔在《JavaScript DOM 编程艺术》(第2版)(英文:DOM Scripting-Web Design with JavaScript and the Document Object Model)一书的第三章第
Vue源码分析之虚拟DOM详解 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。... ----- 元素节点: 元素节点更贴近于我们通常所看到的真实DOM节点,他有描述节点标签名词的tag属性,描述节点属性
隐藏/显示 DOM 节点的小实用程序 介绍 长、图片重、页面是浏览器杀手,尤其是在移动设备上。 加载足够的图像,您的浏览器就会崩溃。 此实用程序的灵感来自“技术 #3:删除页面”。 我不知道他们实际上做了什么,但...
不需要节点环境或特殊的浏览器!!! 支持react,react-native,vue等... 安装 npm install --save react-native-dom-parser 用法 import DomSelector from 'react-native-dom-parser'; const rootNode = ...
演示使用addEventListener()侦听DOM节点上的事件 演示DOM节点上的触发事件侦听器 演示防止DOM节点的默认行为 解释冒泡事件和捕获事件之间的区别 演示使用stopPropagation()停止传播的行为 浏览器学习IDE用户说明 ...
一个简单的 JavaScript 库,用于通过 CSS 选择器查找 DOM 节点。 例子 grail . find ( '#abc' ) ; grail . find ( 'div.alpha' ) ; grail . findAll ( 'div' , document . body ) ; grail . findAll ( '.alpha' ) ;...
通过《DOM启蒙》,读者将学习如何通过文档对象模型(DOM)更有效率地操作HTML,而无需DOM操作库的帮助。...读者将理解jQuery在DOM脚本编写中扮演的角色,并学习如何在移动应用和特定浏览器中直接使用DOM编写应用程序。
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。...由于DOM的使用上的简便,因此它成为了Web浏览器和javascript最喜欢的方法。document对象是BOM的对
DOM 是用来访问或操作HTML文档、XHTML文档、XML文档中的节点元素。 现在基本上所有的浏览器都都执行了W3C发布的DOM规范,所以在浏览器上就可以用DOM的这些API。 DOM提供对脚本友善的网页结构与内容的视图 DOM把...
15.2 理解DOM节点 15.3 节点 15.3.1 父节点和子节点 15.3.2 兄弟节点 15.3.3 nodeName和nodeType属性 15.3.4 空白bug 15.4 遍历DOM 15.5 DOM查看器 15.6 查询DOM的快捷...