DOM_对同属一个父节点的前一个兄弟节点的引用-CSDN博客

本文链接：https://blog.csdn.net/gongchuanyou/article/details/34427983

DOM相关资料收集：

文档对象模型（DOM）是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准。W3C将文档对象模型定义为：是一个能让程序和脚本动态访问和更新文档内容、结构和样式的语言平台。提供了标准的HTML和XML对象集，并有一个标准接口来访问并操作他们，即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制。

小知识：在文档对象模型出现以前，创建前端web应用程序必须使用JavaApplet或ActiveX等复杂的组件才能完成。

1. DOM概述

文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各个功能组件的标准接口。主要包括以下内容：

● 核心JavaScript语言参考(数据类型、运算符、基本语句、函数等)；

● 与数据类型有关的对象（String,Math,Array,Date等数据类型）；

● 浏览器对象（Window, Location,Histroy, Navigator）；

● 文档对象（document,images,form等）；

小知识：JavaScript使用两种对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器的各个功能组件，如浏览器对象本身，浏览器历史等操作方法；后者提供了访问浏览器窗口内容，如文档，图片等各种HTML元素以及这些元素包含的文档操作方法。

2.基本的文档对象模型

基本的文档对象模型提供了一个非常基础的文档对象层次结构，在这个层次结构中，Window位于对象层次的最高级，包含全部的Document对象，同时具有其他对象所没有的属性与方法，Document对象即为浏览器载入的HTML页面，其上的链接和表单单元元素都作为有属性、方法和事件处理程序的元素对象来对待。

3. W3C DOM

DOM规范必须适应HTML的已知结构，同时适应XML的未知结构，DOM的概念主要有以下几个方面：

● 核心DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。

● DOM事件：使用者所熟悉的键盘事件，鼠标事件，同时还包括DOM特有的事件，当操作文档对象中的各元素对象时发生。

●HTML DOM：提供用于操作HTML文档的以及类似于JavaScript对象模型语法的功能部件，在核心DOM的基础上支持对所有HTML元素进行操作。

●XML DOM:提供操作XML文档的特殊方法。

●DOM CSS:提供了脚本编程实现CSS的接口。

4.文档对象的产生过程

当载入HTML文档时，浏览器解释其代码，当遇到自身支持的HTML元素对象对应的标记时，就按照HTML文档载入的顺序在内存中创建这些对象，而不管JavaScript脚本是否真正的运行这些对象。对象创建后，浏览器为这些对象提供专供JavaScript脚本使用的可选属性，方法和处理程序。通过这些属性、方法和处理程序，Web开发人员可以动态操作HTML文档内容。

小知识：文档对象模型具有层次结构，由于JavaScript是基于对象的编程语言，而不是面向对象的编程语言，所以在JavaScript编程中必须考虑类、实例及继承等术语，只需要充分理解不同浏览器之间文档对象的层次结构，就可以利用JavaScript准确定位并操作该对象。

5.DOM对象的节点

在W3C规范中，每个容器、元素或文本块都看做一个节点；当一个容器包含另外一个容器时，对应的节点之间有父子关系。DOM中定义了HTML文档中6中相关的节点类型。

节点类型数值	节点类型	附加说明	实例
1	元素（Element）	HTML标记元素	<h1></h1>
2	属性（Attribute）	HTML标记元素的属性	Color=”red”
3	文本（Text）	HTML标记文本段	Hello World
4	注释（Comment）	HTML注释段	<!--Comment-->
5	文档（Document）	HTML文档根对象	<Html>
6	文档类型	文档类型	<!DOCTYPE HTML …>

小知识：DOM节点数中的节点有元素节点、文本节点和属性节点三种不同的节点类型，

1. 元素节点

在HTML文档中，各HTML元素如<body>、<p>、<ul>等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成一个节点。元素对象可以包含其他的元素。

2. 文本节点

在节点树中，元素节点构成树的枝条，而文本节点构成树的叶子。文本节点总是包含在元素节点的内部，但是并非所有的元素节点都包含或直接包含文本节点。

3. 属性节点

HTML文档中的元素都或多或少的有一些属性，既便于准确、具体的描述相应的元素，又便于进行进一步操作。

小知识：并非所有的元素都包含属性，但所有的属性都必须在元素的内部。

6.DOM对象的属性

属性一般定义对象的当前设置，在DOM模型中，文档对象有许多初始属性，如果标记没有现显式的设置属性，浏览器使用默认值来给标记的属性值和相应的JavaScript文本属性赋值。DOM文档对象主要有以下重要属性：

节点属性	说明
nodeName	返回当前节点的名字
nodeType	返回与节点类型对应的值
nodue	返回当前节点的值
parentNode	应用当前节点的父节点，如果存在的话
childNodes	访问当前节点的子节点的集合，如果存在的话
firstChild	对标记的子节点集合中的第一个子节点的引用。如果存在的话
lastChild	对标记的子节点集合中的最后一个子节点的引用，如果存在的话
previousSibling	对同属一个父节点的前一个兄弟节点的应用
nextSibling	对同属一个父节点的下一个兄弟节点的引用
Attributes	返回当前节点属性的列表
owenerDocument	指向包含节点的HTML document对象

小知识：firstChild和lastChild指向当前标记的第一个子节点和最后一个子节点，但是大多数情况下使用childNodes集合，使用循环遍历子节点，如果没有子节点。则childNodes为0。

6.DOM的基本操作

对DOM的基本操作分为，对DOM对象的操作、属性的操作、节点的操作。

1. 对象的基本操作

DOM模型提供了两种方法用于获取对象，即getElementById()和getElementByTagName()两种方法。

●getElementById()用于返回指定id属性值的元素节点对象。对应着文档里的一个特定的元素节点。

●getElementByTagName()用于返回文档中指定tag标签名称的元素对象数组，与上一个方法不同，该方法返回的是具有相同标签的对喜爱那个数组

2.对属性的操作

DOM模型提供了相应的方法，来对获取目标对象的属性值、添加目标对象的属性值以及删除特定的属性值。

方法	说明
getAttribute(attribute)	用于返回目标对象指定属性名称的属性值
setAttribute(attribute, value)	用于修改任意元素指定属性名称的属性值
removeAttribute(attribute)	用于删除任意节点的属性

3.对节点的操作

由于节点具有易于操作，对象明确等特点，DOM提供了非常丰富的节点处理方法来对节点进行操作，JavaScript的节点有对象节点和文本节点和属性节点

操作类型	方法原型	附加说明
生成节点	createElement(tagName)	创建由tagName指定类型的标记
	createTextNode(string)	创建包含字符串的文本节点
	createAttribute(name)	创建由name指定的属性
	createComment(string)	创建由string指定的文本注释
插入生成节点	appendChild(newChild)	添加子节点newChild到目标节点上
插入生成节点	insertBefore(newChild,target)	将新节点newChild添加到目标节点前
复制节点	cloneNode(bool)	复制自身， bool指定是否复制子节点
删除替换节点	removeChild(childName)	删除由childName指定的节点
删除替换节点	replaceChild(newchild,old)	新节点替换旧节点
文本节点操作	insertData(offset, String)	从offset指定的位置插入string
	appendData(string)	将string插入到文本节点的末尾处
	deleteDate(offset,count)	从offset起删除count个字符
	replaceData(off,count,string)	从off将count个字符用string替代
	splitData(offset)	从offset起将文本节点分成两个节点
	substring(offset,count)	返回由offset起的count个节点