`

JavaScript DOM学习笔记1——DOM节点层次

阅读更多

当讨论DOM树的时候,一般讨论的是节点的层次。DOM定义了Node的接口以及许多种节点类型来表现XML节点的多方面:

Document 顶层节点,所有其他节点依附于该节点
DocumentType DTD引用。它不能包含子节点
DocumentFragment 可以像Document节点一样保存其他节点
Element 其实标签和结束标签之间的内容<tag></tag>或者<tag/>这是唯一一个能够包含特性和子节点的节点类型
Attr 代表一对特性名和特性值,该节点类型不能包含子节点
Text 代表XML文档中在起始标签和结束标签中或者CData Section中的普通文本。该节点不能包含子节点。
CDataSection <![CDATA[]]>的对象表现形式,该节点类型只能包含Text作为子节点。
Entity 在DTD中定义的一个实体对象,这个节点类型不能包含子节点。
EntityReference 代表一个实体引用,这个节点类型不能包含子节点。
ProcessingInstruction 代表一个PI,这个节点类型不能包含子节点。
Comment 代表注释。这个节点类型不能包含子节点。
Notation 代表在DTD中定义的记号

 

一个文档是有任意多个节点的层次组成的。看看下面的XML文档:

<?xml version="1.0"?>
<employees>
	<!--only employee-->
	<employee>
		<name>Michael Smith</name>
		<position>Software Engineer</position>
		<comments><![CDATA[
				His Birthday is 8/14/68
			]]>
		</comments>
	</employee>
</employees>

下面的图对应上面的XML文档。

 

 

 

 

Node接口中定义了不同节点类型对应的常量,它们将在讨论nodeType属性时用到:

Node.ELEMENT_NODE (1)

Node.ATTRBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.ENTITY_NODE(6)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

Node接口还定义了一些所有节点都包含的特性与方法。这里就不列举,后面讲到了再详细说。

 

参考书目:

《JavaScript高级编程》Nicolas C. Zakas著, 曹力 张欣 等译。

分享到:
评论

相关推荐

    比较详细的javascript DOM 学习笔记第1/2页

    一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用&lt;!DOCTYPE&gt;语法)的对象表现形式,它不能包含子节点。DocumentFragment--可以像Document...

    Dom编程学习笔记

    韩顺平老师的javascript之dom编程的笔记

    js DOM学习笔记11

    如果父节点没有子节点, 则firstChild和lastChild都为nullparentNode 父节点previousSibling 第一个节点的previ

    JavaScript学习笔记之DOM基础操作实例小结

    文本节点1 &lt;li&gt;&lt;/li&gt; 文本节点2&lt;li&gt;&lt;/li&gt; 文本节点3&lt;li&gt;&lt;/li&gt; 文本节点4&lt;li&gt;&lt;/li&gt; 文本节点5&lt;li&gt;&lt;/li&gt; 文本节点6 &lt;!--文本节点adsasda--&gt; &lt;!--元素节点 qeqweq&lt;/span&gt;--&gt; &lt;/body&gt; javascript ...

    javascript学习基础笔记之DOM对象操作

    DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API,意味...

    JavaScript高级程序设计 DOM学习笔记

    节点层次 1) 文档节点:document,每个文档的根节点。 2) 文档元素:即&lt;html&gt;元素,文档最外层元素,文档节点第一个子节点。 3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。 ...

    JavaScript学习笔记之DOM操作实例分析

    本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”:Object,指的是对象,在javascript有三种对象:用户定义对象、内建对象...

    Jquery学习笔记分享

    1. 插入节点 8 2. 删除节点 8 3. 复制节点 9 4. 替换节点 9 5. 包裹节点 9 6. 属性操作 9 7. 样式操作 9 8. 设置和获取html,文本和值 10 9. 遍历节点 10 10. css-DOM 操作 10 第4章. jQuery的事件 12

    JavaScript 学习笔记(十二) dom

    Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement(“p”)...

    javascript 学习笔记(一)DOM基本操作

    html部分代码: 当点击show按钮时,触发showValue函数,将input value的值动态添加到id=”text”的元素节点中! 代码如下: &lt;p&gt; &lt;...&lt;/span&gt; &lt;/p&gt; ”text”&gt;&lt;/p&gt; javascript 部分代码: 页面加载时,使inpu

    JavaScript 学习笔记之基础中的基础

     DOM把整个页面映射为一个多层节点结构,HTML或者XML等页面中的每个组成部分都是某种类型的节点,这些节点又包含不同类型的数据。 1.3 BOM  控制浏览器显示的页面以外的部分 二、[removed]元素

    Javascript入门学习资料收集整理篇

    Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

    jQuery学习笔记之创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...

    JavaScript高级程序设计 事件学习笔记

    事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。 □所有浏览器均支持事件冒泡。...

    Javascript笔记

    学习Javascript要分清 1. js语言本身的语法 2. DOM对象(把body,div,p等节点树看成一个对象) 3. BOM对象(把浏览器的地址栏,历史记录,DOM等庄子啊一个对象)

    Java学习笔记-个人整理的

    \contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...

    Xpage学习笔记

    XPAGE学习笔记 1 Theme 2 2 在Xpage中使用Dojo 2 2.1 加载dojo.js 2 2.2 设置应用程序主题引入tundra.css 2 2.3 设置xpage属性引入dojo模块 3 2.4 Xpage的页面html代码 4 2.5 在xpage中使用dojo编程 4 2.5.1 按钮...

    前端笔记.zip

    这个文档包含了HTML/css的一些基础,还有JavaScript中的基础语法、DOM、BOM还有一些学习js中面向对象、和移动web开发、AJAX、jQuery的一些总结,还有些Web前端与移动开发面试宝典; 6、什么是事件冒泡/捕获? 事件...

Global site tag (gtag.js) - Google Analytics