百木园-与人分享，
就是让自己快乐。
当前位置：百木园 > 野生技术 > 正文

JavaScript(四) &DOM

2022-03-05 分类：野生技术 阅读(254) 评论(0)

目录

一，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>

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

来源：https://blog.csdn.net/m0_67376124/article/details/123230708
本站部分图文来源于网络，如有侵权请联系删除。

未经允许不得转载：百木园 » JavaScript(四) &DOM
标签：

相关推荐

  • 暂无文章

热门文章