第十四讲 DOM编程（二）

最新推荐文章于 2024-05-16 09:11:52 发布

鵼鷡

最新推荐文章于 2024-05-16 09:11:52 发布

阅读量171

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/llXlI/article/details/115950896

版权

系列课程目录

第十四讲 DOM编程（二）

前言

JavaScript 操作DOM对象

提示：以下是本篇文章正文内容，下面案例可供参考

一、操作DOM

1.DOM元素特性

element.attributes
返回元素的所有特性
element.setAttribute(name,value)
设置元素的指定特性
element.getAttribute(name)
获取元素的指定特性
element.removeAttribute(name)
删除元素的指定特性
特性和属性的区别
理论上，特性(attribute)与属性(property)是两个不同的概念，特性(attribute)是DOM元素的子节点，属性(property)是DOM元素的特性映射到JS后对应对象的属性(property)。实际使用中，可以忽略两者的区别

2.table对象

table为DOM元素中的一个特别对象，拥有一系列独有的属性和方法

table对象的属性和方法

在这里插入图片描述
tableRow对象的属性和方法

tableCell对象的属性和方法

练习：使用JS操作DOM，将data数据转化为表格元素插入到以下table元素
在这里插入图片描述

答案：

document.createElement(TagName)

创建一个元素节点
document.createTextNode(文本内容)

创建一个文本节点
element.appendChild(子节点)

向父元素末尾添加子节点

在这里插入图片描述

练习：使用JS创建table
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" id="table">

		</table>
		<script type="text/javascript">
			var data=[{
				name:'张三',score:95
			},{
				name:'李四',score:90
			},{
				name:'王五',score:98
			},{
				name:'赵六',score:88
			},]
			var table=document.getElementById("table");
			
			for(var i=0;i<4;i++){
			var tr=document.createElement('tr')
			var td=document.createElement('td')
			var text=document.createTextNode(data[i]['name'])
			tr.appendChild(td)
			td.appendChild(text)
			var text=document.createTextNode(data[i]['score'])
			var td1=document.createElement('td')
			tr.appendChild(td1)
			td1.appendChild(text)
			table.appendChild(tr)
			}
			
		</script>
	</body>
</html>

2.修改DOM对象

element.removeChild(子节点)

删除一个子节点
element.replaceChild(新节点,旧节点)

替换一个子节点
element.insertBefore(新节点, 已有节点)

在已有的子节点前插入一个新的子节点

二、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

2.解析代码

任务14-1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text" name="" id="name" value="" />
		<br>
		评论：<textarea id="comment">

		</textarea>
		<br>
		<input type="button" name="" id="" value="评论" onclick="add()" /><br>

		留言区：
		<div id="d">

		</div>
		<script type="text/javascript">
			function time() {
				var myDate = new Date();

				function gs(m) {
					if (m < 10) {
						m = "0" + m;
					}
					return m;
				}
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var hour = myDate.getHours();
				var min = myDate.getMinutes();
				var sec = myDate.getSeconds();
				var dateString = year + "年" + gs(month) + "月" + gs(date) + "日 " + gs(hour) + ":" + gs(min) + ":" + gs(sec);
				return dateString;
			}

			function add() {
				var div = document.getElementById("d");
				var text1 = document.createTextNode("姓名：" + document.getElementById("name").value)
				var text2 = document.createTextNode("评论：" + document.getElementById("comment").value)
				var text3 = document.createTextNode("时间：" +time())
				var a1 = document.createElement('a')
				var hr = document.createElement('hr')
				div.appendChild(hr)
				div.appendChild(a1)
				a1.appendChild(text1)
				var br1 = document.createElement('br')
				div.appendChild(br1)
				var a2 = document.createElement('a')
				div.appendChild(a2)
				a2.appendChild(text2)
				var br2 = document.createElement('br')
				div.appendChild(br2)
				var a3 = document.createElement('a')
				div.appendChild(a3)
				a3.appendChild(text3)
				document.body.appendChild(div)
			}
		</script>
	</body>
</html>

鵼鷡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十四讲 DOM编程（二）

系列课程目录第十四讲 DOM编程（二）目录系列课程目录前言一、操作DOM1.DOM元素特性2.table对象2.修改DOM对象二、课堂作业1.按照要求完成任务2.解析代码前言JavaScript 操作DOM对象提示：以下是本篇文章正文内容，下面案例可供参考一、操作DOM1.DOM元素特性element.attributes返回元素的所有特性element.setAttribute(name,value)设置元素的指定特性element.getAttribute(name)
复制链接

扫一扫