5.JavaScript核心BOM操作学习（界面交互功能）——DOM操作的总结，通过JavaScript动态生成表格

最新推荐文章于 2022-05-22 00:35:23 发布

愿时间能学会宽恕

最新推荐文章于 2022-05-22 00:35:23 发布

阅读量410

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： javascript java js css

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/107980846

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

案例：动态生成表格

<style>
	td{
		border-width:1px;
		border-style:solid;
		width:50px;
		height:20px;
		background-color:pink;
	}
	tr{
		background-color:pink;
	}
	table{
		border-collapse:collapse;
		margin:0px auto;
		text-align:center;
		font-size:10px;
	}
</style>
<body>
	<table>
		<thead>
			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>成绩</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<script>
		var data=[
		{name:'柏晓凤',sex:'女',grade:'100'},
		{name:'朱泽玉',sex:'男',grade:'100'},
		{name:'黑大龙',sex:'女',grade:'0'}];
		var numb=data.length;
		var tbody=document.querySelector('tbody');
		for(var i =0;i<numb;i++){
		
			//添加元素
			var tr = document.createElement('tr');
			tbody.appendChild(tr);
			for(var k in data[i]){
				var td = document.createElement('td');
				td.innerText=data[i][k];
				tbody.children[i].appendChild(td);
			}
			//添加删除
			var td = document.createElement('td');
			td.innerHTML="<a href='javascript:;'>删除</a>";
			tr.appendChild(td);

			//删除
			var a = document.querySelector('tbody').querySelectorAll('a');
			a[i].onclick=function(){
				del=this.parentNode.parentNode;
				tbody.removeChild(del);
				var tbodylength=tbody.children.length;
				if(tbodylength==0){
					alert('已删除最后一条数据');
				}
			}
		}
	</script>
</body>

7.三种动态创建元素区别

document.write()
document.innerHTML()
document.createElement()

区别：
1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂
数组忘记的点击这里可以跳转，进行复习一下
4.createElement()创建多个元素效率稍低一些，但是结构更清晰

<script>
	function fn(){
		var d1 = +new Date();
		var array = [];
		for(var i=0;i<1000;i++){
			array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
		}
		document.body.innerHTML = array.join('');
		var d2 = +new Date();
		console.log(d2-d1);
	};
	fn();
</script>

五.DOM重点核心

既然标题是DOM BOM操作，那么什么是DOM
什么？我学到第5天才学到重点？哭了哭了

DOM是什么

DOM:文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
获取过来的DOM元素是一个对象（object），所以称为文档对象模型

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有自己的dom编程接口
2.对于HTML，dom使得html形成一棵dom树，包含文档、元素、节点

关于dom操作，我们主要针对元素操作。主要有创建、增、删、改、查、属性操作、事件操作

1.创建

1.document.writh
2.innerHTML
3.createElement

2.增加

1.appendChild
2.insertBefore

3.删除

1.removeChild

4.修改

1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.修改元素样式：style、className

5.查询

1.DOM提供的API方法：getElementById、getElementsBytagName
2.H5新增的方法：querySelector、querySelectorAll (提倡)
3.利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡

6.属性操作

主要朕对自定义属性
1.setAttribute：设置dom的属性值
2.getAttribute：得到dom的属性值
3.removeAttribute：移除属性

7.事件操作

给元素注册时间，采取：事件源.事件类型=事件处理程序
回看第1天onclick事件操作

①注册事件

1.传统注册事件

利用on开头的事件onclick
html<button onclick="alert("hi~")"></button>
btn.onclick=function(){}
特点：注册事件的唯一性
同一元素同一事件只能设置一个处理函数，最后注册的处理函数

2.方法监听注册方式

w3c标准推荐方式
addEventListener()它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent()代替
特点：同一元素同一事件可以注册多个监听器
按注册顺序依次执行

①监听注册
eventTarget.addEventListener(type,listener[,useCapture])
将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数
参数：
type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。

<script>
	var btns = document.querySelectorAll('button');
	//1.传统方式注册事件
	btns[0].onclick=function(){
		alert('hi');
	}
	//2.事件侦听注册事件 addEventListener里面的事件类型是字符串，必加引号，而且不带on
	//	同一个元素 同一个功能 可以添加多个侦听器
	btn[1].addEventListener('click',function(){
		alert('hello')
	})
	btn[1].addEventListener('click',function(){
		alert('world')
	})
</script>

今天又结束了，因为某些原因，和其他人喷，今天喷了两个多小时，唉，明天继续，慢慢来

愿时间能学会宽恕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5.JavaScript核心BOM操作学习（界面交互功能）——DOM操作的总结，通过JavaScript动态生成表格

案例：动态生成表格<style> td{ border-width:1px; border-style:solid; width:50px; height:20px; background-color:pink; } tr{ background-color:pink; } table{ border-collapse:collapse; margin:0px auto; text-align:center; font-size:10px;
复制链接

扫一扫