JavaScrip（9）_bom 和 dom

原创

wx5b04e97300ec7 2021-08-19 15:31:59 博主文章分类：JavaScript（待更） ©著作权

文章标签 dom html javascript dom对象封装 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者wx5b04e97300ec7的原创作品，请联系作者获取转载授权，否则将追究法律责任

本系列博客汇总在这里：JavaScript 汇总

dom

一、bom 简介
二、dom 简介
三、bom 和 dom 的区别
四、dom 获得
- 1、根据元素的 id 获得 dom 对象
- 2、根据元素的 name 来获得 dom 对象
- 3、根据元素标签名获得 dom 对象
五、innerText 和 innerHTML
- 1、innerText 和 innerHtml 的设置
- 2、innerText 和 innerHtml 的获得
六、删除和添加行
七、替换
八、克隆

一、bom 简介

浏览器它本身支持一个文档对象。那么，除了文档对象外，还有什么呢？比如说：地址栏，历史记录等。所以为了方便于操作，我们就把浏览器也封装成了一个对象，叫做BOM。
BOM:Browser Object Model 浏览器对象模型。浏览器本身是一个窗体，所以它有一个 windows 对象，windows 包含如下对象：
（1）navigator ：包含关于 Web 浏览器的信息。
（2）history：包含了用户已浏览的 URL 的信息。
（3）location：包含关于当前 URL 的信息。
（4）document：代表给定浏览器窗口中的 HTML 文档，也就是我们的 DOM 对象。（重点）

二、dom 简介

1、DOM：Document Object Model 文档对象模型。该技术的出现,将标记型文档封装成了对象，并将该标记型文档中的所有内容(标签，属性，文本)都封装成了对象。
2、DOM 的好处，目前,我们只能在页面上做一些显示的效果，不能做动态的效果，何谓动态的效果呢？必如说，我们点击一个按钮，做数据的现实和隐藏等。这些动态效果，都是在操作标签，那么，最简单的操作标签，让它能做一些功能就是怎么做呢？就是把它封装成对象。怎么把它封装成对象呢？那么，这就是 dom 技术的作用，dom 的作用就在于此。这样就可以将对象中封装更多的属性和行为，我们就可以操作这些对象。这样就可以实现静态页面的具备动态的效果。动态效果，就是说让用户可以和我们的页面进行简单的交互，比如说：下拉菜单等。
3、当标记型文档被 DOM 解析器解析后，会按照标签的层次关系，产生一颗 dom 树结构，这个树的每个分支被称为一个节点。我们就是研究如何获取每个节点，并对节点进行操作的。而浏览器本身具备了 DOM 解析器，所以可以对标记型文本进行 DOM 解析。

三、bom 和 dom 的区别

1、BOM和浏览器关系密切，DOM和文档有关，这里的文档指的是网页，也就是HTML文档。
2、BOM是Browser Object Model的缩写，即浏览器对象模型。DOM是Document Object Model的缩写，即文档对象模型。
3、BOM没有相关标准。DOM是W3C的标准。
4、BOM的最根本对象是window。DOM最根本对象是document（实际上是window.document）。

二者之间的关系说明如图：
JavaScrip（9）_bom 和 dom_html

四、dom 获得

文档对象的加载顺序是从上到下的，所以 js 想要获得 dom 对象，一定要等到文档对象加载完毕再获得。

1、根据元素的 id 获得 dom 对象

通过该标签的 id 属性值来获取该标签节点对象。如果有多个同 id 属性的标签，则返回的是一个节点数组。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function myclick() 
	{
		//根据文档对象的id来获得dom对象
		var obj = document.getElementById("username");
		alert(obj);
		//获得用户名的值
		var username = obj.value;
		alert(username);
		//给input设置值
		obj.value = "魏宇轩";
		//设置元素的样式
		obj.style.background = "skyblue";
		//获得password的对象
		var obj1 = document.getElementById("password");
		alert(obj1.value);
	}
</script>
</head>
<body>
用户名：<input id="username" type="text" name="username" value="weiyuxuan"><br>
密码：<input id="password" type="password" name="password" value="123">
<input type="button" value="点击" onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_dom对象_02

2、根据元素的 name 来获得 dom 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">	
function myclick()
{
	//根据元素的name来获得元素，返回的是数组
	var favors = document.getElementsByName("favor");
	for(var i = 0; i < favors.length; i++){
		//获得数组中的每一个元素
		var f = favors[i];
		//alert(f.value);
		//alert(f.checked);
		/* 原生的js中获得多选的的checked属性是true而不是checked
		if(f.checked == "checked"){
			alert(f.value);
		}
		*/		
		if(f.checked){
			alert(f.value);
		}
	}
}
function chkAll()
{
	var favors = document.getElementsByName("favor");
	for(var i = 0; i < favors.length; i++)
	{
		//获得数组中的每一个元素
		var f = favors[i];
		f.checked = true;
	}
}
function reverChkAll()
{
	var favors = document.getElementsByName("favor");
	for(var i = 0; i < favors.length; i++)
	{
		//获得数组中的每一个元素
		var f = favors[i];
		if(f.checked){
			f.checked = false;
		}
		else
		{
			f.checked = true;
		}
	}
}
</script>
</head>
<body>
爱好：<input type="checkbox" name="favor" value="1">看电影
<input type="checkbox" name="favor" value="2">打台球
<input type="checkbox" name="favor" value="3">处对象
<input type="button" value="点击" onclick="myclick()">
<input type="button" value="全选" onclick="chkAll()">
<input type="button" value="反选" onclick="reverChkAll()">
</body>
</html>

JavaScrip（9）_bom 和 dom_html_03

3、根据元素标签名获得 dom 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick()
{
	//根据元素的标签名获得dom对象，返回的是数组
	var objs = document.getElementsByTagName("input");
	for(var i = 0; i < objs.length; i++)
	{
		alert(objs[i].value);
	}
}
</script>
</head>
<body>
用户名：<input id="username" type="text" name="username"  value="renliang"><br>
密码：<input id="password" type="password" name="password" value="123">
<input type="button" value="点击" onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_封装_04

五、innerText 和 innerHTML

1、innerText 和 innerHtml 的设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass
{
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript">
function myclick()
{
	document.getElementById("div1").innerText = "我是div1";
	//innerText是指的元素中的 内容，如果有html不会被浏览器解析
	document.getElementById("div2").innerText = "<font color='red'>我是div1</font>";
	//innerText是指的元素中的 内容，如果有html会被浏览器解析
	document.getElementById("div3").innerHTML = "<font color='red'>我是div1</font>";	
}
</script>
</head>
<body  id="mybody">
<div id="div0">
	<div id="div1" class="myclass"></div>
	<div id="div2"  class="myclass"></div>
	<div id="div3"  class="myclass"></div>
</div>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_封装_05

2、innerText 和 innerHtml 的获得

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass
{
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript">
function myclick()
{
	//innerText获取的时候只能拿到元素内的除了html元素外的文本内容
	var t1 = document.getElementById("div2").innerText;
	alert(t1);
	//获得到元素内的所有内容
	var t2 = document.getElementById("div3").innerHTML;
	alert(t2);	
}
</script>
</head>
<body  id="mybody">
<div id="div0">
	<div id="div1" class="myclass"></div>
	<div id="div2"  class="myclass">aaa<font color='red'>我是div1</font></div>
	<div id="div3"  class="myclass">aaa<font color='red'>我是div2</font></div>
</div>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_javascript_06

六、删除和添加行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 .mytable
 {
 	width: 300px;
 	border-collapse: collapse;
 }
 
 tr
 {
 	height: 25px;
 
 }
</style>
<script type="text/javascript">
function addrow()
{
	//获得表体的dom对象
	var tbObj = document.getElementById("tb");
	//创建 tr  dom对象
	var trObj = document.createElement("tr");
	//创建td  dom对象
	var td0 = document.createElement("td");
	//创建一个input类型的多选
	var ck = document.createElement("input");
	//设置属性
	ck.setAttribute("type", "checkbox");
	//把ck的dom对象追加到td0内部
	td0.appendChild(ck);
	
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	//把3个td追加到tr里面
	trObj.appendChild(td0);
	trObj.appendChild(td1);
	trObj.appendChild(td2);
	trObj.appendChild(td3);
	//把tr对象追加到tb里面
	tbObj.appendChild(trObj);
	
}

function deleteRow()
{
	//获得表体的dom对象
	var tbObj = document.getElementById("tb");
	//获得所有的表体的内部的input
	var is = tbObj.getElementsByTagName("input");
	for(var i = is.length-1; i > 0; i--)
	{
		//获得被选中的多选
		if(is[i].checked)
		{
			//删除被选中的元素，获得父元素
			var trObj = is[i].parentNode.parentNode;
			tbObj.removeChild(trObj);
		}
	}
}
</script>
</head>
<body  id="mybody">
<input type="button" value="添加一行" onclick="addrow()">
<input type="button" value="删除" onclick="deleteRow()">

<table  border="1" class="mytable">
	<thead>
		<tr>
			<td></td>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
	</thead>
	<tbody id="tb">
		<tr>
			<td><input type="checkbox"></td>
			<td>魏宇轩</td>
			<td>18</td>
			<td>男</td>
		</tr>
	</tbody>
</table>
</body>
</html>

JavaScrip（9）_bom 和 dom_dom_07

七、替换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass
{
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript">
function myclick()
{	
	var parentDom = document.getElementById("div0");	
	//获得div3的dom
	var div1Dom = document.getElementById("div1");
	var div3Dom = document.getElementById("div3");	
	parentDom.replaceChild(div3Dom, div1Dom);
}
</script>
</head>
<body  id="mybody">
<div id="div0">
	<div id="div1" class="myclass">div1</div>
	<div id="div2"  class="myclass">aaa<font color='red'>我是div2</font></div>
	<div id="div3"  class="myclass">aaa<font color='red'>我是div3</font></div>
</div>
<input type="button" value="替换" onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_dom_08

八、克隆

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass
{
	border: 1px solid black;
	width: 100px;
	height: 100px;
}
</style>
<script type="text/javascript">
function myclick()
{	
	var parentDom = document.getElementById("div0");	
	//获得div1的dom
	var div1Dom = document.getElementById("div1");
	//复制一个dom对象
	var cn = div1Dom.cloneNode(true);
	parentDom.appendChild(cn);
}
</script>
</head>
<body  id="mybody">
<div id="div0">
	<div id="div1" class="myclass">div1</div>	
</div>
<input type="button" value="克隆"  onclick="myclick()">
</body>
</html>

JavaScrip（9）_bom 和 dom_javascript_09
如有错误，欢迎指正！