DOM基础和DOM的简单应用

最新推荐文章于 2021-03-07 14:44:19 发布

熊喵先生

最新推荐文章于 2021-03-07 14:44:19 发布

阅读量1.2k

点赞数 1

分类专栏： web前端---JavaScript JavaScript浅谈系列文章标签： javascript html dom 表格

本文链接：https://blog.csdn.net/u013064109/article/details/43977825

版权

web前端---JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript浅谈系列

6 篇文章 2 订阅

订阅专栏

1 DOM基础：

1.2 浏览器兼容性？
IE9.0 40%;
Chrome 60%;
Firefox 99%;

1.3 DOM节点：
.子节点（childNode，nodeType）
.父节点（parentNode）不受样式影响
.offsetParent//用来寻找已经定位的父级元素。根据样式不同

CSS
绝对定位元素，是根据谁来定位？
它是根据已经定位父级元素来定位的，一直往上寻找已经定位的父级元素
1.4 首尾节点
.firstChild，firstElementChild
.lastChild，lastElementChild
1.5 兄弟节点
.nextSibling，nextElementSibling
.previousSibling，previousElementSibling

1.6 利用DOM来操纵元素属性
元素属性操作的方法：
第一种：oDiv.style.display='block'//只能改属性值的方法
第二种：oDiv.style['display']='block'//即可以修改属性值，又可以修改属性名
第三种:使用DOM方式
.DOM方式操作元素属性
.获取：getAttribute（名称）
.设置：setAttribute（名称，值）
.删除：removeAttribute（名称）
1.7 利用className来获取元素
.如何用className选择元素
   .选出所有元素
   .通过className条件筛选
.封装成函数
1.8 创建，插入和删除元素
.创建DOM元素
createElement（标签名）创建一个节点、
appendChild（节点）将创建的节点插入，在尾部追加节点
.插入元素
.insertBefore（节点，原有节点）在已有元素前插入节点
.删除DOM元素
removeChild（节点）   删除一个节点
父级.removeChild(子节点) 删除一个节点
1.9 文档碎片//就是为了解决当我们需要往页面中插入很多节点时，如果不采用文档碎片，我们首先是插入一个节点，页面就要渲染一次，这样会降低DOM性能，如果我们这样做，我们把创建好的节点首先不急着插入页面而是先插入文档碎片中，最后一次性地把文档碎片中的节点全部插入，那么此时页面只需要渲染一次，大大提高DOM的性能。
.文档碎片可以提高DOM的操作性能
.文档碎片原理
.document.createDocumentFragment();

2 DOM的简单应用

应用一：表格的隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		window.οnlοad=function(){
			var oTab=document.getElementById('tab');
			var color='';//为了保持原来的颜色不被覆盖，当鼠标的移出时，还需要还原原来的颜色，所以设一个color的字符串全局变量
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{
				oTab.tBodies[0].rows[i].οnmοuseοver=function(){
					color=this.style.background;//但鼠标移入时，一方面的保存当前原来的颜色
					this.style.background='yellow';	//另一方面则是改变当前的颜色，即换成新颜色		
					}
				oTab.tBodies[0].rows[i].οnmοuseοut=function(){
					this.style.background=color;
				}
				if(i%2){oTab.tBodies[0].rows[i].style.background='blue';}
				else{oTab.tBodies[0].rows[i].style.background='';}
			}
		}
		
		</script>
	</head>
	<body>
		<table border="1" bordercolor="blue" id="tab">
			<thead>
					<td><h2>ID</h2></td>
					<td><h2>Name</h2></td>
					<td><h2>Age</h2></td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Blue</td>
					<td>15</td>
				</tr>
					<tr>
					<td>2</td>
					<td>Mikyou</td>
					<td>26</td>
				</tr>
					<tr>
					<td>3</td>
					<td>weak</td>
					<td>24</td>
				</tr>
					<tr>
					<td>4</td>
					<td>sky</td>
					<td>35</td>
				</tr>
					<tr>
					<td>5</td>
					<td>李四</td>
					<td>18</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

应用二：表格的添加和删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script type="text/javascript">
		window.οnlοad=function(){
			var oTab=document.getElementById('tab');
			var oBt=document.getElementsByTagName('input');
			var id=oTab.tBodies[0].rows.length+1;
			oBt[2].οnclick=function(){
				var oTr=document.createElement('tr');
				var oTd=document.createElement('td');
				oTd.innerHTML=id++;
				oTr.appendChild(oTd);
				var oTd=document.createElement('td');
				oTd.innerHTML=oBt[0].value;
				oTr.appendChild(oTd);
				var oTd=document.createElement('td');
				oTd.innerHTML=oBt[1].value;
				oTr.appendChild(oTd);
				var oTd=document.createElement('td');
				oTd.innerHTML='<a href="javascript:;">删除</a>';
				oTr.appendChild(oTd);
				var oA=oTd.getElementsByTagName('a')[0];
				oA.οnclick=function(){
					oTab.tBodies[0].removeChild(this.parentNode.parentNode);
				}
				oTab.tBodies[0].appendChild(oTr);
			}
			for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			{
				var oA=oTab.tBodies[0].rows[i].cells[3].getElementsByTagName('a')[0];
			        oA.οnclick=function(){
			        	oTab.tBodies[0].removeChild(this.parentNode.parentNode);
			        }
			}
		}
	</script>
	</head>
	<body>
	姓名:<input type="text" />
	年龄:<input type="text" />
	<input type="button" value="添加数据"/>
		<table border="1" bordercolor="blue" id="tab" width="300" style="text-align: center;">
			<thead>
					<td><h2>ID</h2></td>
					<td><h2>Name</h2></td>
					<td><h2>Age</h2></td>
					<td><h2>操作</h2></td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Blue</td>
					<td>15</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
					<tr>
					<td>2</td>
					<td>Mikyou</td>
					<td>26</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
					<tr>
					<td>3</td>
					<td>weak</td>
					<td>24</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
					<tr>
					<td>4</td>
					<td>sky</td>
					<td>35</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
					<tr>
					<td>5</td>
					<td>李四</td>
					<td>18</td>
					<td><a href="javascript:;">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>