DOM基础和DOM的简单应用

Myth丶恋晨 2022-08-07 02:40 148阅读 0赞

## 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>