文章目录

Document Object Model 文档对象模型
文档的加载

解决方式一：
解决方式二：

DOM查询

Document 对象查询

方法
补充：innerHTML和innerText

document对象的其他的属性和方法
元素对象查询

方法
属性

DOM修改

Document Object Model 文档对象模型

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。JavaScript通过DOM可以来任意来修改网页中各个内容。

文档：文档指的是网页，一个网页就是一个文档
对象：对象指将网页中的每一个节点都转换为对象，（所见都是对象嗷）
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
模型：模型用来表示节点和节点之间的关系，方便操作页面
节点（Node）：节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点。节点有不同类型。
- 常用的节点
  - 文档节点（Document），代表整个网页
    - 文档节点代表整个HTML文件档，网页中所有节点都是它的子节点
    - document对象作为window对象的属性存在，我们不用获取，可以直接使用
    - 通过该对象，我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点
  - 元素节点（Element），代表网页中的标签
    - HTML中各种标签都是元素节点，是我们最常用的节点
    - 浏览器会将页面中的所有标签都转换为一个元素节点
  - 属性节点（Attribute），代表标签中的属性
    - 表示标签中的一个一个的属性
    - 这里要注意的是属性节点不是元素节点的子节点，而是元素节点的一部分
    - 可以通过元素节点来获取指定的属性节点
  - 文本节点（Text），代表网页中的文本内容
    - 文本节点表示的是HTML标签以为的文本内容，任意非html的文本都是文本节点
    - 文本节点一般是作为元素节点的子节点存在的
    - 获取文本节点时一般要获取元素节点，通过元素节点获取文本节点
  - 举个栗子：<p id="hhh">这是一个段落</p>
    - <p id="hhh">这是一个段落</p>元素节点
    - id="hhh属性节点
    - 这是一个段落文本节点
- 节点的属性 nodeType
  nodeType 属性返回节点的类型。nodeType 是只读的。
  比较重要的节点类型有：

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。
在这里插入图片描述

这就会报错，点击按钮也不弹出hahaha

解决方式一：

可以将js代码编写到body的下边

<html>
	<head></head>
	<body>
		<button id="btn">按钮</button>
		<script>
			var btn = document.getElementById("btn");
			btn.onclick = function() {

			};
		</script>
	</body>
</html>

解决方式二：

将js代码编写到window.onload = function(){}中 window.onload对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了

<html>
	<head>
		<script>
			window.onload = function() {
				
			};
		</script>
	</head>
	<body></body>
</html>

DOM查询

Document 对象查询

方法

document.getElementById("id属性值"); 根据元素的id属性查询一个元素节点对象
document.getElementsByName("name属性值");根据元素的name属性值查询一组元素节点对象，将其封装在数组中，即使只有一个，也会封装进数组中。
document.getElementsByClassName("class属性值");根据元素的class属性值查询一组元素节点对象，将其封装在数组中，即使只有一个，也会封装进数组中。不支持IE8及以下的浏览器。
document.getElementsByTagName("标签名");根据标签名来查询一组元素节点对象，将其封装在数组中，即使只有一个，也会封装进数组中。

补充：innerHTML和innerText

这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
两个属性作用类似，都可以获取到标签内部的内容，不同是innerHTML会获取到html标签，而innerText会自动去除标签
如果使用这两个属性来设置标签内部的内容时，没有任何区别的
对于自结束标签，这两个属性没有意义

document对象的其他的属性和方法

document.documentElement 获取页面中html根元素，保存的是html根标签
document.body 获取页面中的body元素，保存的是body的引用
document.all获取页面中的所有元素，相当于document.getElementsByTagName("*");
document.querySelector()根据CSS选择器去页面中查询一个元素，如果匹配到的元素有多个，则它会返回查询到的第一个元素
document.querySelectorAll() 根据CSS选择器去页面中查询一组元素，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个

元素对象查询

方法

element.getElementsByTagName()返回指定标签名的所有子元素集合

属性

element.childNodes获取当前元素的所有子节点，标签之间的空白也会当成文本节点（IE8以下不会把空白节点当子节点）
element.children 获取当前元素的所有子元素
注意这个和上个的区别，使用的时候建议使用这个。
element.firstChild 获取当前元素的第一个子节点，包括空白文本
element.lastChild 获取当前元素的最后一个子节点，包括空白文本
element.firstElementChild 获取当前元素的第一个子元素，包括空白文本
不兼容ie8及以下
element.parentNode 获取当前元素的父元素
element.previousSibling 获取当前元素的前一个兄弟节点，包括空白文本
element.nextSibling 获取当前元素的后一个兄弟节点，包括空白文本
element.previousElementSibling 获取当前元素的前一个兄弟元素
element.nextElementSibling 获取当前元素的后一个兄弟元素

		<ul id="city">
			<li>北京</li>
			<li>西安</li>
			<li id="ly">洛阳</li>
			<li>开封</li>
			<li>安阳</li>
			<li>南京</li>
			<li>杭州</li>
		</ul>
		<script>
			var lc=document.getElementById("ly");
			var re=lc.parentNode;			//输出 city
			var pre1=lc.previousSibling;	//输出 undefined
			var nex1=lc.nextSibling;		//输出 undefined
			var pre2=lc.previousElementSibling;	//输出 西安
			var nex=lc.nextElementSibling;		//输出 开封
		</script>

DOM修改

document.createElement()可以根据标签名创建一个元素节点对象
document.createTextNode() 可以根据文本内容创建一个文本节点对象
document.createAttribute() 可以根据属性创建一个文本节点对象
父节点.appendChild(子节点)向父节点中添加指定的子节点
父节点.insertBefore(新节点,旧节点)将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)使用一个新的节点去替换旧节点
父节点.removeChild(子节点)删除指定的子节点
子节点.parentNode.removeChild(子节点)
例如：

增加一个杭州的<li>

			//增加一个 杭州的<li>   方法1
			var city=document.getElementById("city");
			var li=document.createElement("li");		//新建一个<li>
			var text=document.createTextNode("杭州");	//新建一个text
			li.appendChild(text);						//将text设置为li的子节点
			city.appendChild(li);						//将li设置为city的子节点

			//增加一个 杭州的<li>   方法2
			var city=document.getElementById("city");
			city.innerHTML+="<li>广州</li>"

			//增加一个 杭州的<li>   方法3   前两种方法的结合，推荐使用
			var city=document.getElementById("city");
			var li=document.createElement("li");
			li.innerHTML="广州";
			city.appendChild(li);

在洛阳前插入一个上海
上海替换洛阳

			var city=document.getElementById("city");
			var ly=document.getElementById("ly");
			var li=document.createElement("li");		//新建一个<li>
			var text=document.createTextNode("杭州");	//新建一个text
			li.appendChild(text);						//将text设置为li的子节点
			//在洛阳前插入一个上海
			city.insertBefore(li,ly);
			//上海替换洛阳
			city.replaceChild(li,ly);

删除洛阳

			//删除洛阳 方法1
			var city=document.getElementById("city");
			var ly=document.getElementById("ly");
			city.removeChild(ly);

			var ly=document.getElementById("ly");
			//删除洛阳 方法2    推荐使用
			ly.parentNode.removeChild(ly);

LolitaSian

发布了107 篇原创文章 · 获赞 402 · 访问量 50万+

私信关注

HTML DOM对象 dom查询 | dom修改