jsDOM模型详解一之DOM核心

DOM简介

DOM（Document Object Model），文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。
DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。

DOM三大组成部分

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCxJIhhk-1596373636862)(C:\Users\dell\Desktop\我的前端博客\images2\dom1.png)]$

dom核心-节点

DOM认为：

XML 文档中的每个成分都是一个节点。
整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点

节点树

XML DOM 把 XML DOM 文档视为一棵节点树 (node-tree)。树中的所有节点彼此之间都有关系。
可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素。
节点树中的节点彼此之间都有等级关系。
父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（或兄弟节点）。
在节点树中，顶端的节点称为根节点
根节点之外的每个节点都有一个父节点
节点可以有任何数量的子节点
没有子节点的节点称为叶子
同级节点是拥有相同父节点的节点

假设nodeObj是某个节点对象：

节点属性：

nodeObj.nodeName - nodeObj 的名称
nodeObj.nodeValue - nodeObj 的值
nodeObj.nodeType - nodeObj 的节点类型
nodeObj.parentNode - nodeObj 的父节点
nodeObj.childNodes - nodeObj 的子节点
nodeObj.attributes - nodeObj 的属性节点

节点方法：

nodeObj.getElementsByTagName(name) - 获取节点的后代中带有指定标签名称的所有元素
nodeObj.appendChild(node) - 向 nodeObj 插入子节点
nodeObj.removeChild(node) - 从 nodeObj 删除子节点

属性：

nodeName属性：
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

nodeValue属性：
对于文本节点，nodeValue属性包含文本。
对于属性节点，nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4T60oH1H-1596373636865)(C:\Users\dell\Desktop\我的前端博客\images2\dom2.png)]$

操作DOM对象

访问DOM节点可以通过以下种方法：
通过使用 getElementsByTagName() 方法
通过利用节点的关系在节点树中导航
通过使用 getElementsByName() 方法
通过使用 getElementById() 方法

<body>
<ol id="myOl">
<li >《鹿鼎记》</li>
<li>《天龙八部》</li>
<li>《神雕侠侣》</li>
<li>《倚天屠龙记》</li>
<li>《射雕英雄传》</li>
</ol>
<script type="text/javascript">
	//按照Id获取元素对象
	var myOl = document.getElementById('myOl');
	
    cleanWhitespace(myOl);
	
	//通过childNodes属性获取其子对象集合
	var myOlChilds = myOl.childNodes;
	 
	for(var i in myOlChilds){ //遍历元素节点集合 
		
		if(myOlChilds[i].nodeName){
		document.write('nodeName : '+myOlChilds[i].nodeName+' , nodeType : '+myOlChilds[i].nodeType+' , nodeValue : '+myOlChilds[i].nodeValue+'<br/>');
		}
 
	}
</script>
</body>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取全部样式_CSS样式操作</title>
<style type="text/css">
	.myClass {
		border:#C00 10px solid;
		background-color:#FC0;
		font-family:'微软雅黑';
	}
</style>
</head>

<body>
	<div id="myBox" class="myClass" style="color:#C00;font-size:20px;padding:10px;margin:10px;">
        我不想因为现实把头低下<br/>
		我以为我并不差能学会虚假
     </div>
	<script language="javascript">
		var myBox = document.getElementById('myBox');
		
		//IE下使用HTML对象的属性currentStyle获取作用于该对象上的所有样式
		//其他浏览器使用window.getComputedStyle(对象名,null)
		var myBoxCSS = myBox.currentStyle || window.getComputedStyle(myBox,null);
		//与遍历style属性的结果相比，我们找到了在class选择器中定义的属性
		for(var i in myBoxCSS){
			document.write(i+':'+myBoxCSS[i]+'<br/>');
		}
	</script>
</body>
</html>

方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HgkSAEB-1596373636867)(C:\Users\dell\Desktop\我的前端博客\images2\dom3.png)]$