JavaScript文档对象模型（DOM）文档对象模型（Document Object Model）

56 阅读 0 评论 37 点赞

我是靠谱客的博主丰富硬币，最近开发中收集的这篇文章主要介绍JavaScript文档对象模型（DOM）文档对象模型（Document Object Model），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文档对象模型（Document Object Model）

一、文档对象模型的概述

文档对象模型(DOM)是针对HTML和XML文档的一个API(应用程序编程接口)。一般来讲，所有支持JavaScript的浏览器都支持DOM。它以树形结构表示HTML和XML文档定义了遍历树、检查和修改树的节点的方法和属性。
W3C组织把DOM分成下面的不同的部分和三个不同的版本(DOM1/2/3)。
(1)Core DOM：定义了任意结构文档的标准对象集合。
(2)XML DOM:定义了针对XML文档的标准对象集合。
(3) HTML DOM:定义了针对HTML文档的标准对象集合。
(4)DOM CSS:定义了在程序中操作CSS规则的接口。
(5) DOM Events:给DOM添加事件处理。

二、HTML DOM 树状结构图

在DOM中，这样规定节点，整个文档是一个文档节点，每个HTML文档的标签是一个元素节点，包含在HTML元素中的文本是文本节点，每一个HTML 属性是一个属性节点，注释属于注释节点。

三、使用DOM访问文档对象的元素

(1)通过使用getElementByld()方法、getElementsByTagNameO方法和getElementsByName方法。

(2)通过使用一个元素节点的parentNode、firstChild及lastChild属性。

getElementByld()和getElementsByTagName()两种方法，可查找整个HTML文档中的任何HTML元素。

getElementsByName()方法可返回带有指定名称的对象的集合。

getElementByld)可通过指定的ID来返回元素，使用document.getElementByld(”元素的ID")就可以得到该元素。

	<input type="button" name="" id="btn" value="单击" />
		<div id="aa">
			库洛米
		</div>
		<div id="bb">
			美乐蒂
		</div>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
		</ul>
		<span id="zz">
			这是一个span标签
		</span>
		<input type="text" name="names" id="" value="" />
		<p class="one"></p>
		<script type="text/javascript">
			document.getElementById("btn").onclick = function(){
				//通过标签的id属性来获取元素
				var div1 = document.getElementById("aa");
				div1.innerHTML = "玉桂狗";
				var div2 = document.getElementById("bb");
				div2.innerHTML = "玉桂狗";
				
				//通过标签名来获取标签
				var div2 = document.getElementsByTagName("div");
				console.log("div2");
				for (var i = 0; i < div2.length;i++) {
					console.log(div2[i]);
					div2[i].innerHTML = "布丁狗";
					
					var ul = document.getElementsByTagName("ul")[0]
					console.log(ul);
					
					//获取所有属性class的值使one的标签
					var cla = document.getElementsByClassName("one");
					console.log("cla");
					
					//通过name属性来获取标签
					var names = document.getElementsByName("names");
					console.log("names[0]");
					
					//通过选择器名称来获取，只能获取一个
					var queryS = document.querySelector(".one");
					console.log(query);
					
					//通过对应的选择器获取所有满足条件的标签
					var queryA = document.querySelectorAll(".one");
					console.log("queryA");
					
					//通过标签中的id属性的值获取标签
					console.log(div1);
					
					console.log(document.body);
				}
				
			}
		</script>

四、DOM可以干什么?

(1)获取一个元素
(2)移除一个元素
(3)创建一个元素
(4)向页面里面添加一个元素
(5)给元素绑定一些事件
(6)获取元素的属性
(7)给元素添加一些css样式
DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

<input type="button" name="" id="add" value="添加节点" onclick="add()" />&nbsp;
		<input type="button" name="" id="delete" value="删除节点" onclick="del()" />&nbsp;
		<input type="button" name="" id="update" value="修改节点" onclick="update()" />
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector("ul");
			// 添加一个新的li标签
			function add(){
				//创建一个节点
				var li = document.createElement("li");
				li.innerHTML = "新添加的节点";
				//appendChild() :向一个标签中添加子标签（子元素）
				ul.appendChild(li);
			}

			function del(){
				//删除第一个子元素
				//document.firstElementChild
				var li = document.querySelectorAll("li")[0];
				
				ul.removeChild(li);//删除的使标签中的指定的子元素
				ul.remove();//将所有的子元素清空，包括元素本身
			}

			function update(){
				
				var li = document.querySelectorAll("li")[2];
				li.innerHTML = "修改后的";
				
			}
		</script>