[Javascript] DOM树

最新推荐文章于 2024-07-16 19:32:16 发布

Stephanie翟

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量312

点赞数 1

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/a954553391/article/details/86669847

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

（一）DOM简介

1.是什么

DOM:文档对象模型(Document Object Model，简称DOM)

是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

2.产生背景

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM可以以一种【独立于】平台和语言的方式访问和修改一个【文档的内容和结构】。换句话说，这是表示和处理一个HTML或XML文档的常用方法。

3.图示：
在这里插入图片描述
(二)DOM文档对象模型

1.理解DOM的概念(重点)

（1）DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

（2）DOM作用

HTML页面动态化(DHTML)
提升用户的交互性
提升用户体验
DOM将整个HTML页模拟成一个树

*设计DHTM（Dynamic HTML，动态的HTML）的原则
-> JavaScript效果是很好，但也有不适的时候
-> 对于页面，是要反应的内容
-> 主要的内容不应尝试有js来加入
-> 页面上应该保留主要内容，由js来优化

（3）W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

在这里插入图片描述

2.知道如何对节点进行增删改查

节点是有类型(节点就是对象) (文件节点,元素节点,属性节点)
 
		-> 标准DOM定义中有12种
		-> 元素节点		1
		-> 文本节点		3
		-> 属性节点		2
		-> 获得方式
			<node>.nodeType
			
为节点添加事件的方法
		<node>.onclick = function() {};
		
如何获得节点
		->节点对象 document.getElementById("id的字符串")
			获得页面中指定id的节点对象
		->节点集合 document.getElementsByTagName("标签名"); // 可以使用"*"
			获得页面中所有标签名符合要求的标签
		-> 节点集合 父节点.getElementsByTagName("标签名");
			获得指定父节点下的所有名字符合要求的节点
		-> 属性(如果是元素节点，那么他可以有子节点)
			<node>.childNodes	获得节点下的所有子节点
			<node>.firstChild	<node>.childNodes[0]	
			<node>.lastChild	<node>.childNodes[<node>.childNodes.length - 1]
			-> 父节点
			node.parentNode
			-> 子节点
			node.childNodes
			node.firstNode
			node.lastNode
			-> 兄弟
			node.nextSibling
			node.previousSibling
创建页面元素
			-> write系方法
			document.write()
			document.writeln()
			
			-> inner方法
			node.innerHTML
			node.innerText
			
			-> DOM方法
			document.createElement()
			document.createTextNode()
			父节点.appendChild(子节点)
			父节点.insertBefore(新节点, 旧节点)
修改节点
		-> 所谓的修改节点就是修改节点的属性与包含的文本
		-> 获得节点
		-> 修改属性的标准方法（DOM-Core）
			<node>.setAttribute("属性名", "值");
			文本 <node>.getAttribute("属性名");
		-> DOM-html
			<node>.属性名 = 值;
			var v = <node>.属性名;
修改节点
			node.removeChild()

3.理解事件

（1）C#JavaScript与事件概念区别

C#事件就是一个委托变量(事件的编程概念)
JavaScript事件就是方法，或者说是操作

（2）实例

①onload事件(Form1_Load)

页面的DOM结构加载完毕后会触发这个事件

②描述性概念

浏览器的底层也会有很多触发函数的机制

浏览器加载完毕后
			if(onload != null) {
					onload();
			}
			如果鼠标点击一个div
				if(div.onclick != null) {
					div.onclick();
				}
在发现点击a标签的时候，浏览器内部会执行
				if(a.onclick != null) {
					var res = a.onclick();
					if(res === false) {
						break;// 默认的正常跳转就不做了
					}
				}
如果事件处理函数，返回了false表示这个事件默认处理忽略不做

（三）DOM的优缺点

1.优点

易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。

1.缺点

效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。