web前端学习

概述

文档对象模型（document object model，DOM）是由W3C（万维网联盟）组织定义的一个标准。创建一个网页并将该网页添加到网站中时，DOM就会根据这个网页创建一个文档，该文档是元素与内容的数据集合。此外，DOM会将文档解析为树状结构，并以树节点的方式表示文档中的各种内容。

DOM将下面文档解析后的树形结构：

通过DOM，JavaScript能够获取、修改、添加、删除HTML文档的元素、属性、CSS样式，还能够创建新的HTML事件并对页面中所有已有的HTML事件作出反应，从而创建动态网页，实现互动操作。

	
对应文档内容如下：
<html>
	<head>
		<title>标题内容</title>
	</head>
	<body>
		<h2>二号标题</h2>
		<p>段落内容</p>
	</body>
</html>

1.DOM介绍

DOM重要参考资料-下方信息均来于此 DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。文档——表示的就是整个的HTML网页文档对象——表示将网页中的每个部分都转换为对象模型——表示对象之间的关系，这样方便我们获取对象文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。

DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。要改变页面的某个东西，JS就需要获得对网页中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，DOM 4。严格地说，DOM不属于JS，但是操作DOM是JS最常见的任务，而JS也是最常用于DOM操作的语言。DOM是浏览器厂商提供的js操作html的api，不同的浏览器厂商提供的api可能不同，所以dom存在兼容性问题（少部分）

2.DOM节点

任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构。节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系。这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。以下面的 HTML为例：

其中，document节点表示每个文档的根节点。根节点的唯一子节点是html元素，我们称之为文档元素（documentElement）。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内，每个文档只能有一个文档元素。在HTML页面中，文档元素始终是html元素。在XML文档中，则没有这样预定义的元素，任何元素都可能成为文档元素。 HTML中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示HTML元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。 DOM 中总共有 12 种节点类型，这些类型都继承一种基本类型。

	
<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

3.节点类型

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点类型(节点常量)	值
元素节点 Node.ELEMENT_NODE	1
属性节点 Node.ATTRIBUTE_NODE	2
文本节点 Node.TEXT_NODE	3
CDATA节点 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
DTD声明节点 Node.NOTATION_NODE	12

浅谈Javascript中的12种DOM节点类型 1.元素节点:即HTML文档中的HTML标签 2.属性节点:对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。 3.文本节点:即text代表网页中的HTML标签内容 4.CDATA节点:CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域 5.实体引用名称节点:在XML中实体声明中定义的名称，称为实体引用 6.实体名称节点:实体是一个声明，指定了在XML中取代内容或标记而使用的名称 7.处理指令节点:处理指令节点 8.注释节点:表示网页中的HTML注释 9.文档节点:表示HTML文档，也称为根节点，指向document对象 10.文档类型节点:文档类型节点DocumentType包含着与文档的doctype有关的所有信息 11.文档片段节点:在文档中没有对应的标记，是一种轻量级的文档，可以包含和控制节点 12.声明节点DTD:DTD声明节点notation代表DTD中声明的符号

	
//打印各个常量
console.log("Node.ELEMENT_NODE:"+Node.ELEMENT_NODE);
console.log("Node.ATTRIBUTE_NODE:"+Node.ATTRIBUTE_NODE);
console.log("Node.TEXT_NODE:"+Node.TEXT_NODE);
console.log("Node.CDATA_SECTION_NODE:"+Node.CDATA_SECTION_NODE);
console.log("Node.ENTITY_REFERENCE_NODE:"+Node.ENTITY_REFERENCE_NODE);
console.log("Node.ENTITY_NODE:"+Node.ENTITY_NODE);
console.log("Node.PROCESSING_INSTRUCTION_NODE:"+Node.PROCESSING_INSTRUCTION_NODE);
console.log("Node.COMMENT_NODE:"+Node.COMMENT_NODE);
console.log("Node.DOCUMENT_NODE:"+Node.DOCUMENT_NODE);
console.log("Node.DOCUMENT_TYPE_NODE:"+Node.DOCUMENT_TYPE_NODE);
console.log("Node.DOCUMENT_FRAGMENT_NODE:"+Node.DOCUMENT_FRAGMENT_NODE);
console.log("Node.NOTATION_NODE:"+Node.NOTATION_NODE);

4.Node类型的属性

DOM Level1描述了名为Node的接口，这个接口是所有DOM节点类型都必须实现的。Node接口在JavaScript中被实现为Node类型，在除IE之外中都可以直接访问这个类型。在JavaScript中，所有节点类型都继承Node类型，因此所有类型都共享相同的基本属性和方法。

1.nodeName：字符串，其内容是给定节点的名字

节点类型	返回值
元素节点	返回元素的名称
属性节点	返回属性的名称
文本节点	返回“#text”的字符串

2.nodeType：整数，代表着给定节点的类型

节点类型	返回值
元素节点	1
属性节点	2
文本节点	3
注释节点	8
文档节点	9

3.nodeValue：返回给定节点的文本值

节点类型	返回值
注释节点	返回注释的文本值
属性节点	返回属性的值
文本节点	返回文本的值

4.其他属性

属性名	作用
length	length属性将返回一个元素所有可能的节点书数目
innerHTML	设置或获取位于对象起始和结束标签内的HTML
attributes	attributes属性返回指定节点的属性集合，即NamedNodeMap
parentNode	parentNode属性以Node对象的形式返回指定节点的父节点
childNodes	childNodes属性返回节点的子节点集合，以NodeList对象
firstChild	firstChild属性返回指定节点的首个子节点，以Node对象
lastChild	lastChild属性返回被选节点的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL
previousSibling	previousSibling属性返回选定节点的上一个同级节点。如果不存在这样的节点，则该属性返回null
nextSibling	nextSibling属性返回指定节点之后紧跟的节点，在相同的树层级中。被返回的节点以Node对象返回

5.Node类型的方法

注意：前四个方法都需要父节点对象进行调用!

方法名	描述
appendChild()	该方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。返回值就是插入文档的子节点。
insertBefore()	该方法用于将某个节点插入父节点内部的指定位置。
removeChild()	该方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。
replaceChild()	该方法用于将一个新的节点，替换当前节点的某一个子节点。
cloneNode()	该方法返回调用该方法的节点的一个副本。

	
parentNode.appendChild(newNode);
parentNode.insertBefore(newNode, referenceNode);
parentNode.removeChild(sonNode);
parentNode.replaceChild(newNode,oldNode);
//false时，复制子节点，并不会去复制其属性值和后代
//true时，复制子节点，且复制其属性值和后代
//该方法将复制并返回调用它的节点的副本
newNode = Node.cloneNode(true/false);

6.Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用，HTMLDocument继承自Document。

document属性

属性	描述
documentElement	始终指向HTML页面中的<html>元素
body	直接指向<body>元素
doctype	访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title	获取文档的标题
URL	取得完整的URL
domain	取得域名，并且可以进行设置，在跨域访问中经常会用到
referrer	取得链接到当前页面的那个页面的URL，即来源页面的URL
images	获取所有的img对象，返回HTMLCollection类数组对象
forms	获取所有的form对象，返回HTMLCollection类数组对象
links	获取文档中所有带href属性的a元素

document方法

方法	描述
getElementById()	通过元素id查找元素
getElementsByTagName()	通过标签名查找元素
getElementsByClassName()	通过类名查找元素
querySelector()	返回文档中匹配指定的CSS选择器的第一元素
querySelectorAll()	返回文档中匹配的CSS选择器的所有元素节点列表
createElement()	创建一个新的HTML元素
write()	向文档写入文本、HTML表达式、JavaScript代码
createTextNode(text)	创建文本节点，参数为要插入节点中的文本

	
//document表示整个html文档页面
console.log(document)
// html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain);
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer);

7.Element类型

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。

Element属性

属性	描述
attributes	返回一个与该元素相关的所有属性的集合
classList	返回该元素包含的class属性的集合
className	获取或设置指定元素的class属性的值
clientHeight	获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距
clientTop	返回该元素距离它上边界的高度
clientLeft	返回该元素距离它左边界的宽度
clientWidth	返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距
innerHTML	设置或获取HTML语法表示的元素的后代
attribute	修改属性的值
style.property	改变HTML元素的样式

Element方法

方法	描述
getAttribute()	返回元素节点的指定属性值
setAttribute(att,val)	把指定属性设置或更改为指定值

	
<div id="d1" class="div1" title="hello"><p>hello</p></div>
<div id="d2" class="div1"></div>

	
var d1 = document.getElementById('d1')
console.log(d1.attributes);
console.log(d1.classList);
console.log(d1.className);
console.log(d1.clientHeight);
console.log(d1.clientTop);
console.log(d1.clientLeft);
console.log(d1.clientWidth);
console.log(d1.innerHTML);
console.log(d1.tagName);

8.Text类型

Text节点由Text类型表示，包含按字面解释的纯文本，也可能包含转义后的HTML字符，但不含HTML代码

Text属性

属性	描述
length	文本长度

Text方法

appendData(text)	追加文本
deleteData(Index,count)	删除文本
insertData(Index,text)	插入文本
replaceData(Index,count,text)	替换文本
splitText(Index)	从Index位置将当前文本节点分成两个文本节点
substringData(Index,count)	从Index开始提取count个子字符串

	
<div id="container"></div>

	
// 创建文本节点
var textNode = document.createTextNode('Hello World!');
// 获取container
var div = document.getElementById('container');
// 将文本节点插入container
div.appendChild(textNode);
// 替换文本 从0开始，替换5位，替换值为'Hi'
textNode.replaceData(0,5,'Hi');
// 插入文本 
textNode.insertData(0, '你好');