DOM2

曾经终败给现在 2022-07-15 11:53 106阅读 0赞

**1getElementsByClassName**

doucment.getElementsByClassName();   IE9以下不兼容

**2 封装addClass();**

**3.封装removeClass函数**

**4.表格操作**

tHead:表格头

tBodies：表格主体

tFoot：表格尾部

rows：行

cells：列

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    <table id="tb1" width=100% border=1>
    	<thead>
    		<tr>
    			<td>编号</td>
    			<td>name</td>
    			<td>sex</td>
    			<td>操作</td>
    		</tr>
    	</thead>
    	<tbody>
    	</tbody>
    </table>
    <script>
    var data = [
    	{id:1,username:'leo',sex:'男'},
    	{id:2,username:'hu',sex:'男'},
    	{id:3,username:'wang',sex:'女'},
    	{id:4,username:'ma',sex:'男'}
    ];
    var oTb = document.getElementById('tb1');
    var oTbody = oTb.tBodies[0];
    for(var i=0;i<data.length;i++){
    	var oTr = document.createElement('tr');
    	var oTd = document.createElement('td');
    		if(i%2 ==0){
    				oTr.style.background='white';
    			}else{
    				oTr.style.background='gray';
    			}
    	oTd.innerHTML = data[i].id;
    	oTr.appendChild(oTd);
    	var oTd = document.createElement('td');
    	oTd.innerHTML = data[i].username;
    	oTr.appendChild(oTd);
    	var oTd = document.createElement('td');
    	oTd.innerHTML = data[i].sex;
    	oTr.appendChild(oTd);
    	var oTd = document.createElement('td');
    	oTd.innerHTML = ' ';
    	oTr.appendChild(oTd);
    	var aA = document.createElement('a');
    	aA.innerHTML ='删除';
    	aA.href = 'javascript:;';
    	aA.onclick = function(){
    		oTbody.removeChild(this.parentNode.parentNode);
    		for(var i=0;i<oTbody.rows.length;i++){
    			if(i%2 ==0){
    				oTbody.rows[i].style.background='white';
    			}else{
    				oTbody.rows[i].style.background='gray';
    			}
    		}
    	}
    	oTd.appendChild(aA);
    	oTbody.appendChild(oTr);
    	 
    }
    </script>
    
    	
    </body>
    </html>

**5.BOM**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /* BOM : Browser Object Model 浏览器对象模型 */ window.onload = function() { var aInput = document.getElementsByTagName('input'); var opener = null; aInput[0].onclick = function() { //open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口 //window.open('http://www.baidu.com', '_self'); opener = window.open();//返回值 返回的新开页面的window对象 //alert(opener == window) //opener.document.body.style.background = 'red'; } aInput[1].onclick = function() { window.close(); /* ff : 无法关闭 chrome : 直接关闭 ie : 询问用户 */ } aInput[2].onclick = function() { opener.close(); //可以通过关闭用window.open方法打开的窗口 } } </script> </head> <body> <input type="button" value="打开新窗口" /> <input type="button" value="关闭窗口" /> <input type="button" value="关闭新窗口" /> </body> </html>

**6.BOM属性**

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    //window.navigator.userAgent : 浏览器信息
    
    //alert( window.navigator.userAgent )
    
    if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {
    	alert('我是ie');
    } else {
    	alert('我不是ie');
    }
    </script>
    </head>
    
    <body>
    </body>
    </html>

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    //window.location : 地址
    /*
    window.location.href = window.location内容
    window.location.search = url?后面的内容
    window.location.hash = url#后面的内容
    */
    
    //alert( window.location );
    
    //alert( window.location.href );//地址
    
    //alert( window.location.search );
    
    //alert( window.location.hash );
    </script>
    </head>
    
    <body>
    </body>
    </html>

**7.窗口尺寸**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { //可视区尺寸 //alert( document.documentElement.clientHeight ); document.onclick = function() { //滚动距离 //alert( document.documentElement.scrollTop ); //alert( document.body.scrollTop ); //document.documentElement.scrollTop = 100 //var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //alert(scrollTop) var oDiv = document.getElementById('div1'); //scrollHeight : 内容实际宽高 alert(oDiv.scrollHeight); } } </script> </head> <body style="height:2000px;"> <div id="div1" style="width:100px;height:100px;border: 1px solid red; overflow: -auto; padding: 10px;"> <div style="height: 600px;width: 90px; background: red;"></div> </div> </body> </html>

**8.文档高**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { //offsetHeight //alert( document.body.offsetHeight ); //ie : 如果内容没有可视区高，那么文档高就是可视区 //alert( document.documentElement.offsetHeight ); alert( document.body.offsetHeight ); } </script> </head> <body style="margin:0"> sdfdsf </body> </html>

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    //onscroll : 当滚动条滚动的时候触发
    var i = 0;
    
    window.onscroll = function() {
    	document.title = i++;
    }
    
    //onresize : 当窗口大小发生变化的时候触发
    window.onresize = function() {
    	document.title = i++;
    }
    </script>
    </head>
    
    <body style="height:2000px;">
    </body>
    </html>

**弹窗案例**

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body {margin: 0;} #mask {background: black; opacity: 0.3; filter: alpha(opacity=30); position: absolute; left: 0; top: 0; display: none;} #box { width: 300px; height: 200px; padding: 10px; background: white; border: 5px solid #333; position: absolute; display: none;} #close { position: absolute; right: 5px; top: 5px; text-decoration: none; color: black;} #close:hover {background: #333; color: white;} </style> <script> //Math.max();返回数值参数中最大的一个值 //Math.min() //alert( Math.max( 123,234,324,3,345 ) ); window.onload = function() { var oBtn = document.getElementById('btn'); var oMask = document.getElementById('mask'); var oBox = document.getElementById('box'); var oClose = document.getElementById('close'); oClose.onclick = function() { oMask.style.display = 'none'; oBox.style.display = 'none'; } oBtn.onclick = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; //遮罩层 oMask.style.display = 'block'; //oMask.style.width = document.body.offsetWidth + 'px'; //oMask.style.height = document.body.offsetHeight + 'px'; oMask.style.width = Math.max( document.body.offsetWidth, document.documentElement.clientWidth ) + 'px'; oMask.style.height = Math.max( document.body.offsetHeight, document.documentElement.clientHeight ) + 'px'; //弹出层 oBox.style.display = 'block'; oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px'; oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px'; } window.onscroll = function() { if (oBox.style.display == 'none') return ; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px'; oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px'; } window.onresize = function() { if (oMask.style.display == 'none') return ; oMask.style.width = Math.max( document.body.offsetWidth, document.documentElement.clientWidth ) + 'px'; oMask.style.height = Math.max( document.body.offsetHeight, document.documentElement.clientHeight ) + 'px'; if (oBox.style.display == 'none') return ; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; oBox.style.left = ( document.documentElement.clientWidth - oBox.offsetWidth ) / 2 + scrollLeft + 'px'; oBox.style.top = ( document.documentElement.clientHeight - oBox.offsetHeight ) / 2 + scrollTop + 'px'; } } </script> </head> <body style="height:2000px;"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <input type="button" value="登陆" id="btn" /> <div id="mask"></div> <div id="box"> <a href="javascript:;" id="close">×</a> 这里是登陆的表单等内容 </div> </body> </html>