javascriptDOM操作页面元素方法（二）

最新推荐文章于 2024-04-27 05:56:04 发布

qindayong！

最新推荐文章于 2024-04-27 05:56:04 发布

阅读量163

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44036436/article/details/96501394

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述
javascriptDOM操作页面元素方法（二）

1、根据层次查看节点

1、父节点名称.childNodes:获取元素的所有子节点。包括回车和文本节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var body = document.getElementsByTagName('body')[0];
				console.log(body.childNodes);
				/*返回NodeList(7)
						0: text
						1: div
						2: text
						3: p
						4: text
						5: span
						6: text
				*/
				//这里的text表示每两个元素之间有空格返回一个文本类型
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

2、 .children: 获取当前元素的所有元素节点（只获取标签）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var body = document.getElementsByTagName('body')[0];
				console.log(body.children);
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

3、.firstChild:获取元素的第一个子节点。包括回车等文本节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var body = document.getElementsByTagName('body')[0];
				console.log(body.firstChild);//返回#text
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

4、 .firstElementChild：获取元素的第一个元素子节点。不包括回车等文本节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var body = document.getElementsByTagName('body')[0];
				console.log(body.firstElementChild);//返回<div></div>
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

5、 .lastchild:获取元素的最后一个子节点。包括回车等文本节点。（方法同例3）

6、 .lastElementChild：获取元素的最后一个子节点。不包括回车等文本节点。（方法同例4）

7、.parentNode:获取当前节点的父节点；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var div = document.getElementsByTagName('div')[0];
				console.log(div.parentNode);//返回body内所有元素
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

8、.previousSibling：获取当前节点的前一个兄弟节点；包括回车等文本节点。（方法同例9 ）

9、 .previousElementSibling：获取当前节点的前一个兄弟元素节点；不包括回车等文本节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var p = document.getElementsByTagName('p')[0];
				console.log(p.previousElementSibling);//返回上个兄弟元素，没有是返回null，不包括回车等文本节点。
			}
		</script>
	</head>
	<body>
		<div></div>
		<p></p>
		<span></span>
	</body>
</html>

10、.nextSibling：获取当前节点的后一个兄弟节点；包括回车等文本节点。（方法同例9 ）

11、.nextElementSibling：获取当前节点的后一个兄弟元素节点；不包括回车等文本节点。（方法同例9 ）

2、表格元素

【表格对象】

1、rows属性：返回表格中的所有行，是一个数组格式；

2、insertRow(index):在指定位置插入一行，index从0开始；

3、deleteRow(index):删除指定的一行，index从0开始；

【行对象】

1、cells属性：返回这一行中的所有单元格，是一个数组格式；

2、rowIndex属性：返回这一行，是表格中的第几行，从0开始；

3、insertCell(index):在这一行的指定位置，插入一个单元格，index从领开始；

4、deleteCell(index):删除这一行的指定单元格，index从0开始

【单元格对象】

1、cellIndex属性：返回这个单元格是这一行的第几个单元格

2、innerText    inner HTML

qindayong！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascriptDOM操作页面元素方法（二）

javascriptDOM操作页面元素方法（二）1、根据层次查看节点1、父节点名称.childNodes:获取元素的所有子节点。包括回车和文本节点。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script...
复制链接

扫一扫