JavaScript插入DMO的两种操作对比

最新推荐文章于 2024-03-14 19:32:21 发布

菜鸟程序员1号

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量643

点赞数

分类专栏：技术类文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/caiji4/article/details/100042895

版权

技术类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript插入DMO的两种操作

下面就来讲讲用到的一些知识的小总结

JavaScript概述

JavaScript简称JS，一种直译式(无需编译)脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，属于浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用
标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

JavaScript事件部分总结：

1.ondblclick() 鼠标被双击
2.onmouseover() 当鼠标悬浮时触发
3.onmouseout() 当输入从元素中移除时触发
4.onmouseenter() 当鼠标进入触发
5.onmouseleave 当鼠标离开时触发
6.onmousedown() 当鼠标按下时触发
7.onmouseup() 当鼠标抬起时触发
8.onkeydown() 当按键按下时触发
9.onkeyup() 当按键抬起时触发
10.onkeyPress() 当指定按键按下时
11.onchange() 输入框文本改变时
12.onreset() 表单重置时
13.onsubmit() 表单提交时

DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

Doucment对象获取元素的几种方式：
1. document.getElementById() 根据id获取元素
2. document.getElementsByTagName() 根据标签名获取元素集合
3. document.getElementsByName() 根据元素的name属性获取元素集合
4. document.getElementsByClassName(); 根据元素的class属性获取元素的集合
5. document.querySelector() 根据元素的css选择器获取元素
6. document.querySelectorAll() 根据元素的css选择器获取元素集合

插入Dom

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？
如果这个DOM节点是空的，例如，

，那么，直接使用 innerHTML = ‘ child’ 就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。
有两个办法可以插入新的节点。一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子节点。

我们这个例子就是利用的第一种直接用 innerHTML的的方法插入，因为只有这样才会使原来css样式生效，而第二种不能的插入不会让css样式生效，应为页面加载了html代码后在运行的js文件，所以之前的样式失效了，第一种是直接把html代码插入到原来的html文件中。
下面是第一种直接用 innerHTML的的方法插入的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #000000;
			}

			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			#box {
				position: absolute;
				left: 50%;
				right: 50%;
				width: 600px;
				height: 700px;
				/* 在y轴加滚动条 */
				overflow-y: scroll;
				transform: translate(-50%,10%);
				background: #999999;
			}

			table {
				width: 100%;
				height: 600px;
				/* 去掉边距 */
				border-collapse: collapse;
				font-size: 1.2em;
			}

			th {
				color: #eee;
				text-align: center;
				background: #34495e;
			}

			th,
			td {
				width: 50%;
				height: 50px;
				font-size: 1.2em;
				text-align: center;
			}

			table tr:not(:first-child):hover {
				color: #FFF;
				background: #00FFFF;
			}

			table tr:not(:first-child):nth-child(2n) {
				background: rgba(0, 0, 0, 0.3);
			}
		</style>
	</head>
	<body>
		<div id="box">
			<table id="tab">
				<tr id="r">
					<th id="d1">歌名</th>
					<th id="d2">大小</th>
				</tr>
			</table>
		</div>
		<script src="../js/data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//musics是引入的外部js文件里面的一个数组
			var html = "<tr><th>歌名</th><th>大小</th></tr>";
			for (var i = 0; i < musics.length; i++) {
				html += '<tr>';
				html += '<td>' + musics[i].name + '</td>';
				html += '<td>' + (musics[i].size / (1024 * 1024)).toFixed(1) + 'MB' +'</td></tr>';             
			}
			document.getElementById('tab').innerHTML = html;
		</script>
	</body>
</html>

效果图如下：
在这里插入图片描述
下面是第二种使用 appendChild方法插入的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #000000;
			}

			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			#box {
				position: absolute;
				left: 50%;
				right: 50%;
				width: 600px;
				height: 700px;
				/* 在y轴加滚动条 */
				overflow-y: scroll;
				transform: translate(-50%,10%);
				background: #999999;
			}

			table {
				width: 100%;
				height: 600px;
				/* 去掉边距 */
				border-collapse: collapse;
				font-size: 1.2em;
			}

			th {
				color: #eee;
				text-align: center;
				background: #34495e;
			}

			th,
			td {
				width: 50%;
				height: 50px;
				font-size: 1.2em;
				text-align: center;
			}

			table tr:not(:first-child):hover {
				color: #FFF;
				background: #00FFFF;
			}

			table tr:not(:first-child):nth-child(2n) {
				background: rgba(0, 0, 0, 0.3);
			}
		</style>
	</head>
	<body>
		<div id="box">
			<table id="tab">
				<tr id="r">
					<th id="d1">歌名</th>
					<th id="d2">大小</th>
				</tr>
			</table>
		</div>
		<script src="../js/data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//musics是引入的外部js文件里面的一个数组
			for (var i = 0; i < musics.length; i++) {
				 var tr = document.createElement('tr');
				 var td1 = document.createElement('td');
				 var td2 = document.createElement('td');
				 td1.innerText = musics[i].name;
				 td2.innerText = (musics[i].size / (1024 * 1024)).toFixed(1) + 'MB';
				 document.getElementById('tab').appendChild(tr);
				 document.getElementById('tab').appendChild(td1);
				 document.getElementById('tab').appendChild(td2);
			}
		</script>
	</body>
</html>