Node节点类型[第10章-文档对象模型DOM 笔记1]

DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) 。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape 及微软公司创始的 DHTML (动态 HTML) , 但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

节点

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。

每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。

以HTML 为例:

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

例子中,文档节点只有一个子节点,即 <html> 元素,我们称之为文档元素。

文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中,文档元素始终都是 <html> 元素。在 XML 中,没有预定义的元素,因此任何元素都可能成为文档元素。

Node 类型

DOM1 级定义了一个 Node 接口,该接口将由 DOM 中的所有节点类型实现。在JavaScript 中是作为 Node 类型实现的;除了 IE 之外,在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型,因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个 nodeType 属性,用于表明节点的类型。节点类型由在 Node 类型中定义的下列12 个数值常量来表示,任何节点类型必居其一:

Node.ELEMENT_NODE (1);

Node.ATTRIBUTE_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)。

通过比较上面这些常量,可以很容易地确定节点的类型,例如:

if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中无效

alert("Node is an element.");

}

为了确保跨浏览器兼容,最好还是将 nodeType 属性与数字值进行比较,如下所示:

if (someNode.nodeType == 1){ // 适用于所有浏览器

alert("Node is an element.");

}

要了解节点的具体信息,可以使用 nodeName 和 nodeValue 这两个属性。如:

if (someNode.nodeType == 1){

value = someNode.nodeName; //nodeName 的值是元素的标签名

}

文档中所有的节点之间都存在这样或那样的关系。

每个节点都有一个 childNodes 属性,其中保存着一个NodeList 对象。 NodeList 是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。

虽然可以通过方括号语法来访问 NodeList 的值,而且这个对象也有 length 属性,但它并不是 Array 的实例。

它实际上是基于 DOM 结构动态执行查询的结果,因此 DOM 结构的变化能够自动反映在 NodeList 对象中。我们常说, NodeList 是有生命、有呼吸的对象,而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。

可以将 NodeList 对象转换为数组:

//在 IE8 及之前版本中无效

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

考虑兼容性:

function convertToArray(nodes){

var array = null;

try {

array = Array.prototype.slice.call(nodes, 0); //针对非 IE 浏览器

} catch (ex) {

array = new Array();

for (var i=0, len=nodes.length; i < len; i++){

array.push(nodes[i]);

}

}

return array;

}

每个节点都有一个 parentNode 属性,该属性指向文档树中的父节点。以及previousSibling

和 nextSibling 属性,指向前一个或者后一个同级节点。

父节点的 firstChild 和 lastChild属性分别指向其 childNodes 列表中的第一个和最后一个节点。节点不存在是均返回null。

在反映这些关系的所有属性当中, childNodes 属性与其他属性相比更方便一些,因为只须使用简单的关系指针,就可以通过它访问文档树中的任何节点。另外, hasChildNodes() 也是一个非常有用的方法,这个方法在节点包含一或多个子节点的情况下返回 true ;应该说,这是比查询 childNodes列表的 length 属性更简单的方法。

所有节点都有的最后一个属性是 ownerDocument ,该属性指向表示整个文档的文档节点,因此可以直接访问文档节点。

虽然所有节点类型都继承自 Node ,但并不是每种节点都有子节点。

时间: 2024-07-29 08:58:14

Node节点类型[第10章-文档对象模型DOM 笔记1]的相关文章

Document类型[第10章-文档对象模型DOM 笔记2]

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

第10章 文档对象模型DOM 10.1 Node节点类型

DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始的 DHTML (动态 HTML) , 但现在它已经成为表现和操作页面标记的真正的跨平台.语言中立的方式. 节点 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标

第10章 文档对象模型DOM 10.3 Element类型

Element 类型用于表现 XML或 HTML元素,提供了对元素标签名.子节点及特性的访问. 要访问元素的标签名,可以使用 nodeName 属性,也可以使用 tagName 属性:这两个属性会返回相同的值.如下所示: <div id="myDiv"></div> var div = document.getElementById("myDiv"); alert(div.tagName); //"DIV" alert(d

第10章 文档对象模型DOM 10.2 Document类型

Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 类型可以表示 HTML 页面或者其他基于 XML 的文档.不过,最常见的应用还是作为HTMLDocument 实例的 document 对象.通过这个文档对象,不

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作 文档片段节点的三个node属性——nodeType.nod

005_01文档对象模型DOM

DOM:document object model  文档对象模型.是W3C织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容.结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 左边为HTML文档树,右边为结构树示意图 XML DOM 定义了访问和处理 XML 文档的标准方法. HTML文档格式 符合X

文档对象模型DOM

1.节点:      文档节点Document      元素节点Element      文本节点Text      属性节点Attr      注释节点Comment        2.节点的属性和方法:      nodeType:判断节点类型      ownerDocument:指向这个节点所属的文档      firstChild:指向在childNodes列表中的第一个节点      lastChild:指向在childNodes列表中的最后一个节点      childNodes

文档对象模型DOM(二)

练习: 要求:界面上有个登录按钮,点击登录的时候,界面中弹出一个登录的方框,点击登录方框中的×的,登录方框消失. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--<link href="../css/lianxi1.css"

JavaScript文档对象模型DOM

节点关系属性:(带element的属性ie低版本不支持) childNodes—所有子节点(元素,注释,文本): nodeType——属性代表节点类型: children——获取元素子节点 firstChild——第一个子节点(元素,注释,文本) *firstElementChild ——第一个元素子节点 lastChild ——最后一个子节点 (元素,注释,文本) *lastElementChild ——最后一个元素子节点 parentNode——父元素 offsetParent ——定位父级