JavaScript:DOM对象模型(二)

最新推荐文章于 2021-06-09 13:33:58 发布

年少有为✘

最新推荐文章于 2021-06-09 13:33:58 发布

阅读量293

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46454139/article/details/115970631

版权

文章目录

一、操作DOM

一、操作DOM

DOM元素特性

特性	说明
attributes	返回元素的所有特性
setAttribute(name,value)	设置元素的指定特性
getAttribute(name)	获取元素的指定特性
removeAttribute(name)	删除元素的指定特性

下面进行举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
		<input type="text" name="t1" id="t1" value="aaa" /><br />
		<input type="button" value="获取" name="check" onclick="dis()" />
		<script type="text/javascript">
			function dis(){
				var aa=document.getElementById('t1'); //通过id获取输入框的值
				console.log("aa.attributes:"+aa.attributes); //打印输出aa.attributes的返回值
				aa.setAttribute('value','123'); //重新设置输入框value的值
				console.log("aa.getAttribute('value'):"+aa.getAttribute('value'));//打印输出查看修改后value的值有无变化
				aa.removeAttribute('id'); //删除输入框的id属性
			}
		</script>
	</body>
</html>

页面效果如下：
在这里插入图片描述
从上面的动图中我们可以就看到，我们在点击了按钮之后，输入框中的值发生了改变，这是下面这串代码引起的效果，我们通过操作DOM的特性setAttribute改变了输入框中的值

aa.setAttribute('value','123'); //重新设置输入框value的值

下面我们看看控制台中的效果
在这里插入图片描述
从上面的动态图我们可以看出，首先是input输入框中的id消失了，value值也变为了123。

aa.setAttribute('value','123'); //重新设置输入框value的值
aa.removeAttribute('id'); //删除输入框的id属性

上面这两句代码就是“始作俑者”啦。然后在下面我们可以看到aa.attributes和**aa.getAttribute(‘value’)**的返回值结果。

注意：这里有一个特殊之处，即我在这里并没有说DOM的属性，而是DOM元素的特性。这是因为DOM元素的特性和属性并不相同，但是我们在平时使用的时候并没有做严格的区分。实际使用中，也可以忽略两者的区别。
最主要的区别如下：
在这里插入图片描述
即使用元素实属性并不能够真正改变其属性的值，而使用DOM元素的特性可以真正做到改变

DOM对象值table对象

在DOM元素中，table是一个比较特别的对象，也算是DOM对象中比较常用的一个对象。它拥有一系列独有的属性和方法

属性/方法	说明
Rows	返回包含表格中所有子元素的数组，数组中是子元素标签的各种属性
insertRow(index)	常用于在表格中的指定位置插入一个新行,不指定index则默认从末尾添加
deleteRow(index)	从表格删除指定位置的行,参数index必选，否则会报错
cells
insertCell(index)	在行中插入一个单元格并返回该列参数为索引值，如不输入，则在末尾添加
deleteCell(index)	在行中删除一列参数为索引值，必选
rowIndex	返回该行在表格中的索引位置
cellIndex	返回该单元格在行中的索引位置

具体应用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题</title>
	</head>
	<body>
		<table border="1" cellspacing="0" id="table">
			<tr>
				<td>aa</td><td>bb</td>
			</tr>
			<tr>
				<td>11</td><td>22</td>
			</tr>
		</table>
		<script type="text/javascript">
			var table = document.getElementById('table');
			var row = table.insertRow(2); //向表格插入一个新行
			var cell1 = row.insertCell(0); //像新行里插入一个新的单元格，即<td></td>
			var cell2 = row.insertCell(1);
			cell1.innerHTML='fxg'; //向新添加的单元格添加文本元素
			cell2.innerHTML='hhh';
			console.log(table.rows);
			console.log(table.rows[0].cells.length); //返回第表格第一行单元格的个数
		</script>
	</body>
</html>

在这里插入图片描述
练习：

练习代码如下：

<!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:96},
				{name:'王五',score:97},
				{name:'赵六',score:98}
			]
			var table = document.getElementById('table');
			var row = table.insertRow(); //向表格插入一个新行
			row.insertCell().innerHTML='姓名'; //插入固定表头
			row.insertCell().innerHTML='分数'; //插入固定表头
			for(var i in data){
				row=table.insertRow(); //data对象有多少行就新插入多少行，并保存在row变量之中
				for(var key in data[i]){
					 cell=row.insertCell(); //向新行插入一个新的单元格，data[i]的范围是[0,1],即插入两个单元格
					cell.innerHTML=data[i][key]; //向新插入的单元格添加文本元素
				}
			}
		</script>
	</body>
</html>

运行效果如下：
在这里插入图片描述

创建和修改DOM对象

方法	描述
document.createElement(TagName)	创建一个元素节点
document.createTextNode(文本内容)	创建一个文本节点
element.appendChild(子节点)	向父元素末尾添加子节点
element.removeChild(子节点)	删除一个子节点
element.replaceChild(新节点,旧节点)	替换一个子节点
element.insertBefore(新节点, 已有节点)	在已有的子节点前插入一个新的子节点

通过上面的表格，我们知道了如何通过操作DOM来创建元素节点，下面我们就通过一个小练习来巩固一下吧
在这里插入图片描述
不知道你看到这个题的时候是怎么想的呢？我们可以大概分析一下这个题目，这个题目主要是创建三个元素节点并显示在页面下方。分别是用户名，评论，和评论时间。那么我们就应该思考一下几个问题：
1、如何创建元素节点？其创建需要哪些条件
2、元素节点怎样显示在页面下方
下面是我写的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text" name="" id="name" /><br /><br />
		留言：<textarea id="Message_Board" style="width: 170px;height: 140px;vertical-align: top;" rows="5"></textarea><br /><br />
		<input type="button" name="" id="" value="评论" onclick="add_Message()" /><br /><br />
		留言区:
		<hr size="2" color="#FFC0CB" id="hr" />
		<script type="text/javascript">
			function add_Message(){
				var p1=document.createElement('p'); //创建一个<p>标签的元素节点
				var txt1=document.createTextNode("用户名："+document.getElementById('name').value); //通过获取到输入框里的值用作文本节点的具体文本
				p1.appendChild(txt1); //将文本节点添加到新创建的p1元素节点中
				document.body.appendChild(p1); //将p1元素节点添加为body的子节点，让p1文本显示在页面上
				
				var p2=document.createElement('p');
				var txt2=document.createTextNode("评论："+document.getElementById('Message_Board').value);
				p2.appendChild(txt2);
				document.body.appendChild(p2);
				
				var p3=document.createElement('p');
				var txt3=document.createTextNode("评论时间："+showdate());//调用showdate()方法显示评论的创建时间
				p3.appendChild(txt3);
				document.body.appendChild(p3);
				
				var hr=document.createElement('hr');
				hr.size=2
				hr.color="#FFC0CB";
				document.body.appendChild(hr);
			}
			function showdate(){
				var myDate= new Date();
				var year=myDate.getFullYear();
				var month=myDate.getMonth()+1;
				var time=myDate.getDate();
				var hour=myDate.getHours();
				var minutes=myDate.getMinutes();
				var seconds=myDate.getSeconds();
				function fixedDigit(num){
					return num<10 ? "0"+num:num;
				}
				var dateString=year+"年"+fixedDigit(month)+"月"+fixedDigit(time)+"日 "+fixedDigit(hour)+
				":"+fixedDigit(minutes)+":"+fixedDigit(seconds)
				return dateString;
			}
		</script>
	</body>
</html>

效果如下：
在这里插入图片描述

年少有为✘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript:DOM对象模型(二)

文章目录一、操作DOMDOM元素特性DOM对象值table对象创建和修改DOM对象一、操作DOMDOM元素特性特性说明attributes返回元素的所有特性setAttribute(name,value)设置元素的指定特性getAttribute(name)获取元素的指定特性removeAttribute(name)删除元素的指定特性下面进行举例说明：<!DOCTYPE html><html> <head>
复制链接

扫一扫