JavaScript——DOM

栏目: JavaScript · 发布时间: 5年前

内容简介：DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树。DOM允许开发人员：添加、移除、修改页面的某一部分。

DOM是什么

DOM是针对HTML和XML文档的一个API。

DOM描绘了一个层次化的节点树。

DOM允许开发人员：添加、移除、修改页面的某一部分。

现在DOM已经成为表现和操作页面标记的真正跨平台、语言中立的方式了。

DOM1级

DOM1提供了基本的文档结构及查询的接口。

节点层次

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

节点分为几种不同的类型。每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，以及和其他节点存在的某种关系。

每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，注释通过注释节点表示。

总共有12中节点类型，这些类型都继承自一个基类：Node类型

Node类型

DOM1级定义了一个Node接口，这个接口将由DOM中的所有节点类型实现。

Node接口，在JavaScript中是作为Node类型实现的。（除了IE之外，其他浏览器都可以访问到这个类型。）

所有节点类型都共享相同的基本属性和方法：

nodeType属性用于表明节点的类型。节点类型在Node中定义类12个常量

(1)Node.ELEMENT_NODE(1)

(2)Node.ATTRIBUTE_NODE(2)

(3)Node.TEXT_NODE(3)

(4)Node.CDATA_SECTION_NODE(4)

(5)Node.ENTITY_REFERENCE_NODE(5)

(6)Node.ENTITY_NODE(6)

(7)Node.PROCESSING_INSTRUCTION_NODE(7)

(8)Node.COMMENT_NODE(8)

(9)Node.DOCUMENT_NODE(9)

(10)Node.DOCUMENT_TYPE_NODE(10)

(11)Node.DOCUMENT_FRAGMENT_NODE(11)

(12)Node.NOTATION_NODE(12)

可以通过比较上面的常量，以确定节点的类型：

if (someNode.nodeType == Node.ELEMENT_NODE) {
  alert("Node is an element");
}

// 由于在IE中无法访问Node，故上述代码无效。
// 可用以下代码代替：

if (someNode.nodeType == 1) {
   alert("Node is an element");
}

nodeName和nodeValue属性

通过nodeName和nodeValue可以了解节点的具体信息。

节点关系

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

以HTML中为例： <body> 元素可以看成是 <html> 元素的子元素，而 <html> 就是 <body> 的父元素。

而 <head> 元素和 <body> 元素是同胞元素，因为都是 <html> 的直接子元素。

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

NodeList对象是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。

var firstChild = someNode.childNodes[0];
var secondeChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

length属性表示的是，访问NodeList的那一刻，其中包含的节点数。

可以使用Array.prototype.slice()方法将NodeList转换为数组。

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

但是，如果想要在IE中将NodeList转换为数组，必须手动枚举所有成员：

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.lengthm i < len; i++) {
      array.push(nodes[i]);
    }
  }
}

每个节点有一个parentNode属性，用于指向父节点。而在同一个父元素下的每个子节点中有previousSibling和nextSibling属性，用于访问同一列表中的其他节点。

另外，父节点有firstChild何lastChild属性来指向第一个和最后一个子节点。

最后，所有节点都有一个属性：ownerDocument，用于访问整个文档的文档节点。

操作节点

由于关系指针都是只读的，故DOM提供了一些操作节点的方法；

appendChild():用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点以之前的最后一个子节点的关系指针都会得到更新。

更新后，appendChild()返回新增的节点：

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode);
alert(someNode.lastChild == newNode);

如果传入到appendChild()的节点已经是文档的一部分了。那么这个节点将会从原来的位置移到新的位置。因为任何DOM节点都不能同时出现在文档中的多个位置上。

var returnedNode = someNode.appendChild(someNode.firstNode);
alert(returnedNode == someNode.firstChild); // false
alert(returnedNode == someNode.lastChild); // true

insertBefore()方法，能够将把节点放在childNoes列表中的某个特定的位置上。需要传入两个参数：要插入的节点和作为参照的节点：插入节点后，被插入的节点会变成参照节点的前一个通报节点，同事被方法返回。

returnedNode = someNode.insertBefore(newNode, null); // 插入后成为最后一个子节点
alert(newNode == someNode.lastChild); // true

var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); // 插入后城后第一个子节点
alert(returnedNode == newNode); // true
alert(newNode == someNode.firstChild); // t

returnedNode = someNode.insertBefore(newNode, someNode.lastChild); // 插入到最后一个子节点前
alert(newNode == someNode.childNodes[someNode.childNodes.lenght - 2]);// true

replaceChild()能够移除节点，接收两个参数：要插入的节点和要替换的节点：要替换的节点，将会由这个方法返回，并且从文档树中被移除。同时，由要插入的节点占据其位置。

var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); // 替换第一个子节点

returnedNode = someNode.replaceChild(newNode, someNode.lastChild); // 替换最后一个子节点

removeChild()方法可以移除一个节点，接收一个参数：要移除的节点

var formerFirstChild = someNode.removeChild(someNode.firstChild); // 移除第一个子节点

var formerLastChild = someNode.removeChild(someNode.lastChild); // 移除最后一个子节点

其他方法

cloneNode()方法用于创建调用这个方法的节点的一个完全相同的副本；其接收一个参数: 是否执行深拷贝在参数为true的时候，会复制节点及其整个子节点树。在参数为false的时候，只赋值节点本身。

复制后返回的节点副本属于文档所有，但没有为它指定父节点。如果不使用节点操作方法将其添加到文档中，他会成为一个”孤儿“

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length);

var shallowList = myList.cloneNode(false);
alert(shallow.childnodes.length);

normalize()方法，可以处理文档树中的文本节点。

由于文本节点可能不包含文本，或者接连出现两个文本节点的情况。这个方法能够在调用该方法的节点的后代节点中查找这两种情况的节点，并删除它们。

Document类型

js通过Document类型表示文档。

在浏览器中，document对象是HTMLDocument的一个实例。表示了整个HTML页面。document对象是window对象的一个属性。

Document节点具有下列特征：

1.nodeType: 9

2.nodeName: "#document"

3.nodeValue: null

4.parentNode: null

5.ownerDocument: null

其子节点可能是一个DocumentType、Element、ProcessingInstruction或Comment；

Document类型表示HTML页面或者其他基于XML的文档。

通过document对象，我们可以取得与页面有关的信息，并且能够操作页面的外观及其底层结构。

文档的子节点

访问子节点的方式：

1.通过documentElement访问HTML页面中的 <html> 元素。

2.通过childNodes列表访问文档元素。

3.通过body访问 <body> 元素。

4.通过doctype可以访问 <!DOCTYPE> 的信息

var html = document.documentElement;

var body = document.body;

文档信息

document对象提供了一些网页的信息；

1.title: 包含了 <title> 元素中的文本。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

顺势而为--雷军传

采文 / 哈尔滨出版社 / 2014-9 / 29.80

主要介绍了雷军上大学开始创业到加入金山再到成为天使投资人一直最后创立小米公司的过程，以及他的“站在风口的猪”等个人名言思想的涉及。一起来看看《顺势而为--雷军传》这本书的介绍吧!

码农工具

JavaScript——DOM

DOM是什么

DOM1级

节点层次

Node类型

nodeName和nodeValue属性

节点关系

NodeList对象是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。

length属性表示的是，访问NodeList的那一刻，其中包含的节点数。

可以使用Array.prototype.slice()方法将NodeList转换为数组。

每个节点有一个parentNode属性，用于指向父节点。而在同一个父元素下的每个子节点中有previousSibling和nextSibling属性，用于访问同一列表中的其他节点。

另外，父节点有firstChild何lastChild属性来指向第一个和最后一个子节点。

最后，所有节点都有一个属性：ownerDocument，用于访问整个文档的文档节点。

操作节点

如果传入到appendChild()的节点已经是文档的一部分了。那么这个节点将会从原来的位置移到新的位置。因为任何DOM节点都不能同时出现在文档中的多个位置上。

removeChild()方法可以移除一个节点，接收一个参数：要移除的节点

其他方法

normalize()方法，可以处理文档树中的文本节点。

Document类型

文档的子节点

访问子节点的方式：

文档信息

顺势而为--雷军传

HTML 压缩/解压工具

RGB转16进制工具

HEX CMYK 转换工具

JavaScript——DOM

DOM是什么

DOM1级

节点层次

Node类型

nodeName和nodeValue属性

节点关系

NodeList对象是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList对象中。

length属性表示的是，访问NodeList的那一刻，其中包含的节点数。

可以使用Array.prototype.slice()方法将NodeList转换为数组。

每个节点有一个parentNode属性，用于指向父节点。而在同一个父元素下的每个子节点中有previousSibling和nextSibling属性，用于访问同一列表中的其他节点。

另外，父节点有firstChild何lastChild属性来指向第一个和最后一个子节点。

最后，所有节点都有一个属性：ownerDocument，用于访问整个文档的文档节点。

操作节点

如果传入到appendChild()的节点已经是文档的一部分了。那么这个节点将会从原来的位置移到新的位置。因为任何DOM节点都不能同时出现在文档中的多个位置上。

removeChild()方法可以移除一个节点， 接收一个参数：要移除的节点

其他方法

normalize()方法，可以处理文档树中的文本节点。

Document类型

文档的子节点

访问子节点的方式：

文档信息

顺势而为--雷军传

HTML 压缩/解压工具

RGB转16进制工具

HEX CMYK 转换工具

removeChild()方法可以移除一个节点，接收一个参数：要移除的节点