编程语言
首页 > 编程语言> > JavaScript(四) &DOM

JavaScript(四) &DOM

作者：互联网

目录

一，DOM与bom的区别：

二，DOM树

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

2. DOM树的概念：

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

三，element

1.常用属性

2.常用方法

三，具体案例

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

2.操作表格

 

一，DOM与bom的区别：

二，DOM树

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

2. DOM树的概念：

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

 

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.操作表格

操作表格的方法：

标签：JavaScript,DOM,cells,元素,文本框,获取,var,节点
来源： https://blog.csdn.net/m0_67376124/article/details/123230708