JavaScript(四) &DOM

本文主要是介绍JavaScript(四) &DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一，DOM与bom的区别：

二，DOM树

1. DOM的概念：Document Object Model（文档对象模型）

2. DOM树的概念：

DOM树中的节点类型和节点关系

三，element

1.常用属性

2.常用方法

三，具体案例

1.实现图片轮换的效果：

2.操作表格

一，DOM与bom的区别：

DOM是文档对象模型，用来获取或设置浏览器的属性，例如：获取或者设置input表单value
BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如新建窗口、获取屏幕分辨率、浏览器版号等。

二，DOM树

1. DOM的概念：Document Object Model（文档对象模型）

2. DOM树的概念：

DOM树中的节点类型和节点关系

文档（document）：一个网页就是一个文档。
元素（element）：网页中的所有标签都是元素，元素也能够看成是对象。
节点（node）：网页中的内容都是节点：标签，文本。
root：跟。

document就是跟节点。

上级与下级之间就是父子关系，简而言之：上级节点就是下级节点的父节点。相反，下级节点就是上级节点的字节点。同级别的节点称为“兄弟关系”。

三，element

1.常用属性

Element.children	获取该元素中的所有子元素标签
Element.childElementCount	获取该元素中的子元素的个数
Element.firstElementChild	获取第一个子元素
Element.lastElementChild	获取最后一个子元素
Element.nextElementSibling	获得下一个相邻元素
Element.previousElementSibling	获得上一个相邻元素
Element.parentElement	获得父级元素

注意：网页中最大父级元素（element）是document

在获取父级元素或者子级元素的方式有很多，可以根据自己的习惯来，代码示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>text01</title>
	</head>
	<body>
		<div id="div"><!-- 编辑块状标签 -->
			<img src="imgs/3.jpg" alt="此图无效！">
			<img id="img" src="imgs/2.gif" alt="此图无效！">
			<img src="imgs/4.jpg" alt="此图无效！">
		</div>
		<script type="text/javascript">
            //打印父级元素
			console.log(img.parentElement); //打印会输出<div></div>
			
            //给img标签的父级标签设置一个背景颜色:
			img.parentElement.style.background = "red"; //将div块状标签的背景颜色设置为红色
			
            //如何查询一个标签的子元素:
			console.log(div.children); //将会得到子元素的集合

			//如何拿到一个标签的子元素的个数:
			console.log(div.childElementCount);
			//上面一行代码将会得到子元素的个数,当然既然div.children得到是关于子元素的集合，
			//那么就能够使用div.children.length拿到集合的长度，也就是子元素的个数

			//如何得到元素的第一个子元素:
			console.log(div.firstElementChild);
			//同理，拿到最后一个：
			console.log(div.lastElementChild);

			//拿到上一个相邻的元素
			console.log(img.previousElementSibling)
			//拿到下一个相邻的元素
			console.log(img.nextElementSibling)
		</script>
	</body>
</html>

2.常用方法

document.createElement(TagName)	根据标签名创建新的元素
Element.getAttribute(Name)	根据标签中的属性名获取属性值
Element.setAttribute(Name)	根据标签中的属性名设置属性值
Element.appendChild(Node)	采用末尾追加方式插入节点
Element.insertBefore(Node1,Node2)	将Node1插入在element中的子元素Node2的前面，Node2可以为null值，也能够实现末尾插入
Element.after(Node)	在元素后面增加节点
Element.before(Node)	在元素前面增加节点
Element.cloneNode(boolean)	复制节点（是否复制子节点）
Element.removeChild(Node)	移除子节点
Element.replaceChild(Node1,Node2)	用node1节点替换node2节点

示例代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>常用方法</title>
	</head>
	<body>
		<div id="div">
			<!-- 编辑块状标签 -->
			<img src="imgs/1.gif" alt="">
			<img id="img" src="imgs/2.gif" alt="">
			<img src="imgs/3.gif" alt="">
		</div>
		<script>
			//创建增加图片的函数
			function add1() {
				//创建一个图片标签
				var i = document.createElement("img");
				//设置标签上的属性
				//i.setAttribute("src","img/4.gif")建议大家使用，因为这种方式通用于所有的属性
				i.src = "img/4.gif";
				//把图片标签放到div中
				div.appendChild(i); //在节点的末尾增加节点
			}
			//其实在很多时候我们通常把node和element看成一个东西

			//创建删除图片的函数
			function del2() {
				//每点击一次  删除最后一张
				var i = div.lastElementChild;
				//删除 通过父元素 来删除 子元素
				div.removeChild(i); //删除
			}

			//创建复制图片的函数
			function copy3() {
				//复制节点
				var d = div.cloneNode(true); //节点复制的时候将属性带过去了
				//此时一定不要忘了将ID变了，以便确保元素的唯一性
				// d.id=""可以使用这个代码
				d.setAttribute("id", "");
				//将元素加到body中
				document.body.appendChild(d);
			}
		</script>
		<button onclick="add1()">增加一张图片</button>
		<button onclick="del2()">删除一张图片</button>
		<button onclick="copy3()">复制div</button>
	</body>
</html>

三，具体案例

1.实现图片轮换的效果：

原理：

先获取需要更换的图片，然后传对应的图片名称进去，在a标签中调用换图的函数就行了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业一&实现图片轮换</title>
	</head>
	<body>
		<script type="text/javascript">
			function change1(iname){//参数为图片的名字
			var sa =document.getElementById("photo");//根据元素的ID拿到img
				sa.src=iname;//给sa对象增加图片，还使用sa.setAttribute("src",iname)设置标签上的属性
			}
		</script>
		<table width="360" border="0" cellspacing="0" cellpadding="0">
			<tr><td style="height: 190px;">
			<div id="apDiv1"><!-- 定义一个块状标签，里面放五个跳转链接，当数字几被点击就跳转到哪一张图片 -->
				<a href="javascript:change1('imgs/1.gif')">1</a><!-- 使用a标签调用js函数进行跳转 -->
				<a href="javascript:change1('imgs/2.gif')">2</a>
				<a href="javascript:change1('imgs/3.jpg')">3</a>
				<a href="javascript:change1('imgs/4.jpg')">4</a>
				<a href="javascript:change1('imgs/5.gif')">5</a>
			</div>
			<img src="imgs/1.gif" alt="图片无效" id="photo"/></td><!-- 定义图片标签，设置ID以便函数设置标签属性 -->
			</tr>
		</table>
		
	</body>
</html>

2.操作表格

操作表格的方法：

table表格对象，在DOM结构中table的子节点是tbody

table.rows	返回表格中行的数组
table.insertrow(i)	在表格第i行的位置插入一行
table.deleterow(i)	在表格第i行的位置删除一行
row.cells	返回该行中包括的所有列的数组
row.rowindex	返回该行在表格中的位置
row..insertcell(i)	在该行第i列的位置插入一列
row..deletecell(i)	在该行第i列的位置删除一列
cell.cellindex	返回该列在行中的位置
cell.align	设置或返回单元格内部数据的水平排里排列方式
cell.className	设置护着返回元素的class属性
cell.innerHTML	设置或者返回单元格的标签内容

案例：订单得到案例，实现以下功能（删除订单，确认订单，修改订单，增加订单）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作表格</title>
		<!-- 需要实现的操作：
		 1.增加用户
		 2.删除用户
		 3.修改用户
		 4.确认用户
		 -->
	</head>
	<body>
		<script type="text/javascript">
			var i = 2; //定义全局变量行数，当前已经存在两行

			//创建增加的用户的函数
			function addrow() {
				//先获取要操作的表格
				var mytable = document.getElementById("order");
				/* 	获取表格的最后一行的下标（注意咱们拿表格的下标的时候一定一定要注意的一个点，
				拿到rows只是的得到表格的行数，还需要再次基础上减一）
				 */
				var rindex = mytable.rows.length - 1;
				//在表格最后一行的位置插入一行
				var newrow = mytable.insertRow(rindex);
				//并给新增加的行设置ID以确保其唯一性（注意很多人到这个地方就会忽略这个点）
				newrow.id = 'row' + i; //将其ID设置为row+i
				i++; //设置完ID后表示已经新增了一行，就需要在此基础上将i增加1
				//在新建的行里面增加列（四列）
				var r0 = newrow.insertCell(0); //第0列（文本框）
				r0.innerHTML = "小美";
				var r1 = newrow.insertCell(1); //第1列（文本框）
				r1.innerHTML = "小美";
				var r2 = newrow.insertCell(2); //第2列（文本框）
				r2.innerHTML = "小美";
				var r3 = newrow.insertCell(3); //第3列（两个按钮->确定和删除）
				r3.innerHTML = "<input type='button' value='删除' onclick=\"delrow('" + newrow.id + "')\" />&nbsp; <
				input type = 'button'
				value = '确定'
				onclick = \"qdrow('" + newrow.id + "')\" / > ";
			}

			//创建确定的函数
			function qdrow(rid) { //参数为需要确定的行的ID
				//通过行ID获取需要确定的行
				var row = document.getElementById(rid);
				//获取改行得到所有列
				var cells = row.cells;
				//第0列
				//获取第0列文本框的值
				var vc0 = cells[0].firstChild.value;
				/* 注意咱们在这里使用的firstchild和lastchild是没有区别的，
				 因为该行中只有一个子节点，所有我们采用两种方法都行*/
				//将文本框的值赋给对应的列
				cells[0].innerHTML = vc0;
				//第1列
				//获取第1列文本框的值
				var vc1 = cells[1].firstChild.value;
				//将文本框的值赋给对应的列
				cells[1].innerHTML = vc1;
				//第2列
				//获取第2列文本框的值
				var vc2 = cells[2].firstChild.value;
				//将文本框的值赋给对应的列
				cells[2].innerHTML = vc2;
				//第3列
				//将第三列的第二个确定的按钮改为修改
				cells[3].lastChild.value = '修改'; //因为该列只有两个子节点所以我们采用lastchild的方法
				/* 注意：我们在将其外壳换掉的同时也要将其内在换掉，所以咱们能够使用setattribute函数来设置其属性onclick */
				cells[3].lastChild.setAttribute("onclick", "updaterow('" + rid + "')");

			}

			//创建删除用户的方法
			function delrow(rid) {
				//先获取要操作的表格
				var mytable = document.getElementById("order");
				//通过ID获取需要删除的行对象
				var row = document.getElementById(rid);
				//在通过行获取需要删除行的下标
				var rindex = row.rowIndex;
				//跟行下标删除行
				mytable.deleteRow(rindex);
			}

			//创建修改的函数
			function updaterow(rid) {
				//通过行ID获取需要确定的行
				var row = document.getElementById(rid);
				//获取改行得到所有列
				var cells = row.cells;
				//第0列
				//获取第0列文本框的值
				var vc0 = cells[0].innerHTML;
				//将获取到的第0列的赋值给文本框，并将文本框在赋值给第0个单元格
				cells[0].innerHTML = "<Input type='text' value='" + vc0 + "'/>";
				//第1列
				//获取第1列文本框的值
				var vc1 = cells[1].innerHTML;
				//将获取到的第1列的赋值给文本框，并将文本框在赋值给第1个单元格
				cells[1].innerHTML = "<Input type='text' style='width:20px' value='" + vc1 + "'/>";
				//第2列
				//获取第2列文本框的值
				var vc2 = cells[2].innerHTML;
				//将获取到的第2列的赋值给文本框，并将文本框在赋值给第2个单元格
				cells[2].innerHTML = "<Input type='text' style='width:20px' value='" + vc2 + "'/>";
				//第3列
				//点击修改后，再将第三列第二个按钮的内容由修改改为确定
				cells[3].lastChild。 value = '确定';
				//再次调用确定的函数
				cells[3].lastChild.setAttribute("onclick", "qdrow('" + rid + "')");
			}
		</script>
		<table border="1" cellspacing="0" id="order" align="center">
			<!-- 编辑表头 -->
			<tr bgcolor="bisque">
				<!-- 设置表头的背景颜色 -->
				<th>用户名字</th>
				<th>用户性别</th>
				<th>用户年龄</th>
				<th>操作</th>
			</tr>
			<!-- 编辑第一行 -->
			<tr id="row1">
				<td>小明</td>
				<td>男</td>
				<td>23</td>
				<td><input type="button" value="删除" onclick="delrow("row1")" /></td>
			</tr>
			<tr id="row1">
				<td colspan="4" align="center"><input type="button" value="增加用户" onclick="addrow()" /></td>
			</tr>
		</table>
	</body>
</html>

在这个案例中我们，还有很多我们需要完善的点还有很多，比如，将案例动态化，实现动态传值，并对一些输入框做一些规则判定（使用正则），还能增加的功能有修改表格的属性，感兴趣的小伙伴可以练练手。

这篇关于JavaScript(四) &DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程