web前端学习笔记22-文档对象模型DOM、Node节点

一、DOM

DOM是文档对象模型，全称Document Object Model。DOM是js操作文档（html文档/XML文档）的一个中间接口。DOM操作的范围就是视窗区域，也就是浏览器的白色区域，专门用于显示HTMLbody相关内容的位置。DOM的本质是window对象中的一个子对象：document子对象。
【节点】页面中的所有内容都是节点，标签、文字、声明、注释、js哦都是节点
【节点层次】节点之间的关系就是节点层次

// DOM
console.log(window.document);
// Node 节点对象
console.log(Node);  //获取节点的构造方法
// 构造方法访问对象原型
console.log(Node.prototype);

二、Node节点（Node对象）

js中所有内容都是对象创建的
DOM中所有内容都是节点创建的，节点是对象创建的

2.1 Node对象的描述属性

【nodeType 节点类型】用来表示内容创建使用的节点

关键字	释义
ELEMENT_NODE	★ 元素节点1（html标签）
ATTRIBUTE_NODE	★ 属性节点2（标签中的属性）
TEXT_NODE	★ 文本节点3（标签中的文本内容）
CDATA_SECTION_NODE	CDATA数据节点4
ENTITY_REFERENCE_NODE	实体字符参考节点5
ENTITY_NODE	实体节点6
PROCESSING_INSTRUCTION_NODE	处理指令节点7
COMMENT_NODE	注释节点8
DOCUMENT_NODE	★ 文档节点9（document对象）
DOCUMENT_TYPE_NODE	文档声明节点10
DOCUMENTFRAGMENT_NODE	文档片段节点11
NOTATION_NODE	符号节点12

<div id="txt01">也许相爱太快欠佳火候</div>
<div id="txt02" title="only" class="tx1">彼此只沉迷于片刻温柔</div>
<div id="txt03">我还没来得急好好运筹</div>

// Node节点常用属性：节点名称(nodeName)、节点类型(nodeType)、节点值(nodeValue)
// 元素节点
var n1=document.getElementById('txt01');  //通过id查找元素节点
console.log(n1,typeof n1);
console.log(n1.nodeName);  //名称是DIV
console.log(n1.nodeType);   // 1 类型是1号类型：元素节点
console.log(n1.nodeValue);  //元素节点的值为null
// 属性节点(必须先获取其元素节点)
var n2=document.getElementById('txt02');  //通过id查找元素节点
var n2_title=n2.attributes.getNamedItem('title');  //通过元素节点获取其中的属性节点
console.log(n2_title,typeof n2_title);  //title="only"
console.log(n2_title.nodeName);  //名称是title
console.log(n2_title.nodeType);   // 2 类型是2号类型：属性节点
console.log(n2_title.nodeValue);  //元素节点的值为only
// 文本节点(必须先获取其元素节点)
var n3=document.getElementById('txt03');
var n3_text=n3.childNodes[0];  //通过元素节点获取其内部的文本节点
console.log(n3_text,typeof n3_text);
console.log(n3_text.nodeName);  //名称是#text
console.log(n3_text.nodeType);   // 3 类型是3号类型：文本节点
console.log(n3_text.nodeValue);  //元素节点的值为文本内容

4个常用节点及其属性

	节点名称 nodeName	节点类型 nodeType	节点值 nodeValue
元素节点	大写标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容
文档节点	#document	9	null

2.2 关系属性

关键字	释义
firstChild	获取元素/文档节点的第一个子节点
lastChild	获取元素/文档节点的最后一个子节点
childNodes	获取指定元素的节点集合列表，返回一个多节点组成的数组
parentNode	获取当前节点的父节点
previousSibling	获取指定节点的上一个兄弟节点
nextSibling	获取指定节点的下一个兄弟节点

<ul>
	<li>彼此只沉迷于片刻温柔</li>
	<li>我还没来得急好好运筹</li>
	<li id="txt04">而你却选择悄然离开</li>
	<li>撇下我在风中苦苦守候</li>
</ul>

// 关系属性
// 找到任意一个元素节点
var n4=document.getElementById('txt04');
// 1. 查找父节点
var n4_fte=n4.parentNode;
console.log(n4_fte);  //找到ul
var n4_fte_fte=n4_fte.parentNode;
console.log(n4_fte_fte);  //找到body
// 2. 查找子节点 (不可见字符被浏览器处理为文本节点，对ie8以下无效)
console.log(n4_fte.childNodes);
console.log(n4_fte.childNodes[1]);
console.log(n4_fte.childNodes[3]);
console.log(n4_fte.childNodes.length);
// 查找第一个和最后一个字节点
console.log(n4_fte.firstChild);
console.log(n4_fte.lastChild);
// 查找上一个和下一个兄弟节点
console.log(n4.nextSibling);
console.log(n4.previousSibling);
// 直接找下一个元素节点(元素属性内容)
console.log(n4.nextElementSibling);