DOM之节点层次

1.1 Node类型

  DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JS中是作为Node类型实现的;除了IE之外,其他浏览器可访问这个类型。JS中的所有节点类型都继承自Node类型。注意:不是所有节点类型都受到了Web浏览器的支持。

  每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,并不是Array的实例。它实际是基于DOM结构动态执行查询的结果。除了在IE8-中,可以使用Array.prototype.slice()方法来转换成数组。而兼容IE8-的版本如下:

function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0);
    } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

如果传入appendChild()中的节点已经是文档的一部分,那么结果就是把该节点从原来的位置转移到新位置。replaceChild()和removeChild()节点还是为文档所有,是不过文档中没有了位置。

  cloneNode()方法用于创建一个副本。但传入参数为true时,执行深复制,复制节点以及整个子节点树;在参数为false时,执行浅复制,只复制节点本身。副本节点属于文档,但没有位置。在使用childNodes时,注意在IE8-中,不会为空白符创建节点。cloneNode()方法不会复制添加到DOM节点中的JS属性,比如事件处理程序。IE在此存在一个bug,会复制事件处理程序。所以,建议在使用方法前移除事件处理程序。

  normalize()方法的作用是处理文档树中的文本节点,包括空文本节点和相邻文本节点问题。

1.2 Document类型

  JS通过Document类型表示文档。document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性,因此可作为全局对象来访问。

1.2.1 文档的子节点

  DOM规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment,但有两个内置的访问其子节点的快捷方式。第一个就是documentElement属性,该属性始终指向HTML页面中的<html>元素。另一个是通过childNodes列表访问文档元素。document对象还有一个body属性,直接指向<body>元素。

  注意各浏览器在处理文档类型说明和<html>元素之外的注释之间的差别。会导致<html>不是document的第一个子节点。

1.2.2 文档信息

  作为HTMLDocument的一个实例,document对象有一些标准Document对象没有的属性。比如:title,包含<title>元素中的文本。其中的URL、domain和referrer都是从请求的HTTP头部中取出来的。其中只有domain可以设置,但也只可以设置URL中存在的域。而且只能变紧。

  当页面中包含来自其他子域的框架或内嵌框架时,能过设置document.domain就非常方便了。由于跨域安全限制,不同子域页面无法通过JS通信,可以将每个页面的document.domain设置为一样的值,就可以互相访问。

1.2.3 查找元素

  主要的方法有getElementById()、getElementsByTagName()和getElementsByName()。

1.3 Element类型

  Element元素用于表现XML或HTML元素。

1.3.1 HTML元素

  所有的HTML元素都由HTMLElement类型表示,或者由更具体的子类型。

1.3.2 取得特性

  操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。此处要注意:HTML元素的特性和对应的DOM元素的属性之间有些差别。比如特性中的class对应到了属性中的className。

  两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。第一类是特性是style,通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问会返回一个对象。这说明,style属性并没有直接映射到style特性。第二类特性是onclick这样的事件处理程序。通过getAttribute()访问,则会返回相应代码的字符串,而访问onclick属性时,则返回一个JS函数(没有指定时,返回null)。

1.3.3 设置特性

  setAttribute()方法可以操作HTML特性,特性名统一转换为小写形式。因为所有特性都是属性,直接给属性赋值可以设置特性的值,不过为DOM元素添加自定义的属性,该属性不会自动成为元素的特性。

  removeAttribute(),这个方法用于彻底删除元素的特性。

1.3.4 atttibutes属性

  Element类型是使用attributes属性的唯一一个DOM节点类型。该属性中包含一个NamedNodeMap,与NodeList类似,也是一个动态的集合。

1.3.5 创建元素

  使用document.createElement()方法可以创建新元素。在IE中,为这个方法传入完整的元素标签,可以用来避开IE7-中动态创建元素的某些问题。注意此种方式需要浏览器检测。

1.3.6 元素的子节点

  注意各浏览器对待childNodes属性时的差异性。可利用nodeType来辅助获得目标节点。

1.4 Text类型

  文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。里面的内容不能包含HTML代码,会被转义。

1.4.1 创建文本节点

  使用document.createTextNode()创建文本节点。如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。

1.4.2 规范化文本节点

  使用normalizez()方法可以合并多个相邻的文本节点。

1.4.3 分割文本节点

  Text类型提供了一个splitText()函数,将一个文本节点分成两个文本节点。分割文本节点是从文本节点中提取数据的一种常见DOM解析技术。

1.5 Comment类型

  注释在DOM中是通过Comment类型来表示的。Comment类型与Text类型继承自相同的基类,因此它拥有除了splitText()之外的其他方法。

1.6 DocumentType类型

  DocumentType类型仅有Firefox、Safari和Opera支持它。

1.7 DocumentFragment类型

  所有节点类型中,只有DocumentFragment在文档中没有对应的标记。虽然不能把文档片段直接添加到文档中,但可以将它作为一个“创库"来使用,提高效率。文档片段中的节点不属于文档树。通过appendChild()或insertBefore()将文档片段中内容添加到文档中,即使文档片段作为参数,也只会将子节点添加过去,文档片段本身永远不会成为文档树的一部分。

1.8 Attr类型

  元素的特性在DOM中以Attr类型来表示。从技术角度讲,特性就是存在于元素的attributes属性中的节点。尽管它们也是节点,但特性却不被认为是DOM文档树的一部分。

时间: 2024-10-22 05:51:02

DOM之节点层次的相关文章

第10章 DOM (1 节点层次)

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 10.1 节点层次 DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的HTML 为例:

javascript DOM中的节点层次和节点类型概述

针对JS高级程序设计这本书,主要是理解概念,大部分内容源自书内.写这个主要是当个书中的笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个

DOM树节点和事件

一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点     文本节点,属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:     可以使用getElement系列方法,取到元素节点 .      1.查看元素节点      getElementById: 通过ID取到唯一节点.如果id重名,则id只能取到第一个      ge

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

DOM 处理 节点

js 父节点: parentNode; 子节点: childNode firstChild; lastChild; function func(o) { //alert(o.parentNode.nextSibling.nextSibling.lengh); my=o.parentNode.parentNode.getElementsByTagName("p"); alert(my[2].firstChild.nodeValue); //注意firstChild } </scri

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

通过节点层次关系获取节点

<!--通过节点的层次关系获取节点对象. 关系:1.父节点:parentNode:对应一个节点对象.2.子节点:childNodes:对应一个节点集合.3.兄弟节点: 上一个兄弟节点:parviousSibling下一个兄弟节点:nextSibling--> <script type="text/javascript"> function getNodeByLevel(){ //获取页面中的表格节点var tabNode = document.getElemen

dom操作节点之常用方法

DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名className): 通过class类名找到节点,返回的是一个集合3. document.getElementsByTagName (标签名):通过标签名找到节点,返回一个集合 标签名:如<a>\ <p>\ <div> ....4. document.getElementsByNam

《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有各自的特点.数据和方法.另外,每个节点都与其余节点存在一些关系. 一.节点树 以下面代码为例,先简单介绍一下: <html> <head> <title>Sample Page</title> </head> <body> <p&g