JavaScript学习（三）

最新推荐文章于 2025-12-18 10:02:55 发布

转载最新推荐文章于 2025-12-18 10:02:55 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/are1OfBlog/blog/299238

文章标签：

#javascript #python #ViewUI

本文详细介绍了JavaScript DOM操作的基础知识，包括节点操作、属性获取、元素获取、表格操作及模糊搜索应用，通过实例展示了如何利用DOM操作实现网页的动态交互与内容管理。

2019独角兽企业重金招聘Python工程师标准>>>

JavaScript DOM基础

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>子节点</title>
		<style type="text/css">
			#div1 {width: 200px; height: 200px; background: red;}
			#div2 {width: 50px; height: 50px; background: #CCC; position: absolute; left: 50px; top: 50px}
		</style>
		<script type="text/javascript">
			// 节点知识
			// 此处，div的父节点是body，ul的父节点是ul
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				// 输出的是5，即5个节点
				// 因为空白处也算一个节点，叫文本节点
				// 标签处算是一个节点，叫元素节点
				// 所以，在ul中有三个本文节点，两个元素节点总共5个节点
				// 文本节点没有style
				// 所以如果用循环来给childNodes设置背景的话，会出错
				// 属性nodeType用来返回节点的类型
				// nodeType == 3  ->  文本节点
				// nodeType == 1  ->  元素节点
				alert(oUl.childNodes.length);
				for (var i = 0; i < oUl.childNodes.length; i++) {
				    alert(oUl.childNodes[i].nodeType);
				};

				// DOM还有一个属性，children，children只包括元素，不包括文本
				alert(oUl.children.length);

				// parentNode父节点
				// var aA = document.getElementsByTagName('a');
				for (var i = 0; i < aA.length; i++) {
				    aA[i].onclick = function() {
				        // 这里的this指的是a标签
				        this.parentNode.style.display = 'none';
				    }
				};

				// offsetParent是获取用来定位的父级节点
				// 在上面的div1样式表中，将position: relative去掉的话，
				// 下面语句返回的是body，就不是div了
				// 因为div2的相对定位变成了body
				var oDiv2 = document.getElementById('div2');
				alert(oDiv2.offsetParent);

			}
		</script>
	</head>
	<body>
		<!-- <div>
			<ul id="ul1">
				<li>fdfasfdsafsafa<a href="javascript:;">隐藏</a></li>
				<li>fggnntytytw<a href="javascript:;">隐藏</a></li>
				<li>321fa<a href="javascript:;">隐藏</a></li>
				<li>ff432asffsafa<a href="javascript:;">隐藏</a></li>
			</ul>
		</div> -->

		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>firstChild和firstElementC</title>
		<script type="text/javascript">
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				// firstChild在低版本的浏览器中适用
				// firstChild指的是第一个文本节点
				// 所以设置背景颜色会出错
				// oUl.firstChild.style.background = 'red';

				// 高版本的浏览器中用firstElementChild
				// oUl.firstElementChild.style.background = 'red';

				if (oUl.firstElementChild) {
					oUl.firstElementChild.style.background = 'red';
				} else {
					oUl.firstChild.style.background = 'red';
				};

				// DOM方式获取元素的属性
				// 前面讲过用.和[]来获取元素的属性
				// DOM获取元素属性的用法比较少，先记住，有必须用的时候
				var oTxt = document.getElementById('txt');
				var oBtn = document.getElementById('btn');
				oBtn.onclick = function() {
					oTxt.setAttribute('value', 'dfsafasfasdf');
				}
			}
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li></li>
			<li></li>
			<li></li>
		</ul>

		<input id="txt" type="text" />
		<input id="btn" type="button" value="按钮" />
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>className获取标签</title>
		<script type="text/javascript">
			// className获取标签就是将所有标签或取出来然后通过className过滤标签
			function getClassName(oParent, oClassName) {
				// 获取父节点下的所有子节点
				var oElem = oParent.getElementsByTagName('*');
				var arry = [];
				for (var i = 0; i < oElem.length; i++) {
					if (oElem[i].className == oClassName) {
						arry.push(oElem[i]);
					};
				};
				return arry;
			}
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				var arryElem = getClassName(oUl, 'box');
				for (var i = 0; i < arryElem.length; i++) {
					arryElem[i].style.background = 'red';
				};
			}
		</script>
	</head>
	<body>
		<div>
			<ul id="ul1">
				<li class="box"></li>
				<li></li>
				<li class="box"></li>
			</ul>
		</div>
	</body>
</html>

JavaScript DOM操作应用

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建元素</title>
		<script type="text/javascript">
			window.onload = function() {
				// 正序插入
				var oBtn = document.getElementById('btn');
				var oUl = document.getElementById('ul1');
				var oTxt = document.getElementById('txt');
				oBtn.onclick = function() {
					var oLi = document.createElement('li');
					oLi.innerHTML = oTxt.value;
					oUl.appendChild(oLi);
				}

				// 倒序插入
				var oBtn = document.getElementById('btn');
				var oUl = document.getElementById('ul1');
				var oTxt = document.getElementById('txt');
				var aA = null;

				oBtn.onclick = function() {
					var aLi = document.createElement('li');
					var oLi = document.getElementsByTagName('li');
					aLi.innerHTML = oTxt.value + "<a href='javascript:;'>删除</a>";
					aA = document.getElementsByTagName('a');
					// 在一组li标签的第一个标签进行插入
					oUl.insertBefore(aLi, oLi[0]);
					for (var i = 0; i < aA.length; i++) {
						aA[i].onclick = function() {
							// 删除插入的标签
							oUl.removeChild(this.parentNode);
						}
					};
				}
			}
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<input id="btn" type="button" value="添加li元素" />
		<ul id="ul1"></ul>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格操作</title>
		<style type="text/css">
			#div1 {margin: 50px}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oTab = document.getElementById('tab');
				var oTxt1 = document.getElementById('txt1');
				var oTxt2 = document.getElementById('txt2');
				var oBtn = document.getElementById('btn');
				// tBodies属性，取得tbody标签下的所有元素
				// 因为一个表格中可以有很多的body，所以tbody获取的参数是负数形式
				// 还有属性，tHead（表头），tFoot（表尾）
				// 一般写表格tbody省略了，浏览器可以自动的加上
				// rows取得第n行的元素
				// cells取得第n列的元素
				// alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);			
				// toLowerCase()忽略大小写
				
				oBtn.onclick = function() {
					var oTr = document.createElement('tr');
					var oTd = document.createElement('td');
					var oNum = oTab.tBodies[0].rows.length;
					
					oTd.innerHTML = parseInt(oTab.tBodies[0].rows[oNum - 1].cells[0].innerHTML) + 1;
					oTr.appendChild(oTd);

					var oTd = document.createElement('td');
					oTd.innerHTML = oTxt1.value;
					oTr.appendChild(oTd);

					var oTd = document.createElement('td');
					oTd.innerHTML = oTxt2.value;
					oTr.appendChild(oTd);

					var oTd = document.createElement('td');
					oTd.innerHTML = "<a href='javascript:;'>删除</a>";
					oTr.appendChild(oTd);

					oTab.tBodies[0].appendChild(oTr);

					var aA = document.getElementsByTagName('a');
					for (var i = 0; i < aA.length; i++) {
						aA[i].onclick = function() {
							oTab.tBodies[0].removeChild(this.parentNode.parentNode);
						}
					};

					for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
						oTab.tBodies[0].rows[i].onmouseover = function() {
							// 不写this的话，没反应
							this.style.background = '#CCC';
						}
						oTab.tBodies[0].rows[i].onmouseout = function() {
							this.style.background = '';
						}
					};
				}
			}
		</script>
	</head>
	<body>
		<div align="center">
			姓名：<input id="txt1" type="text" />
			年龄：<input id="txt2" type="text" />
			<input id="btn" type="button" value="添加表单" />
		</div>
		<div id="div1" align="center">
			<table id="tab" border="1" width="500px">
				<thead>
					<td>ID</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Tom</td>
						<td>22</td>
						<td></td>
					</tr>
					<tr>
						<td>2</td>
						<td>Jack</td>
						<td>31</td>
						<td></td>
					</tr>
					<tr>
						<td>3</td>
						<td>smith</td>
						<td>322</td>
						<td></td>
					</tr>
					<tr>
						<td>4</td>
						<td>fd</td>
						<td>322</td>
						<td></td>
					</tr>
					<tr>
						<td>5</td>
						<td>ifdsah</td>
						<td>322</td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8" />
		<title>javaScript_模糊搜索</title>
		<script type="text/javascript">
			var str = 'abcdefg';
			// search()方法找到后返回字母下标，没找到就返回-1
			// 进行模糊搜索的话，就判断search()函数返回值是否是-1
			// 不是-1的话就把结果都显示出来
			// 即，包含关键字的搜索结果都会被检索出来

			// appendChild()是先把元素从原有的父级上删掉，然后放到插入的地方
			alert(str.search('c'));
		</script>
	</head>

	<body>
	</body>
</html>

转载于:https://my.oschina.net/are1OfBlog/blog/299238