Dom基础内容

最新推荐文章于 2024-06-05 23:20:10 发布

洛意

最新推荐文章于 2024-06-05 23:20:10 发布

阅读量187

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/qq_38565788/article/details/79340408

版权

dom 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

document的范围比body的范围大，body的范围取决于网页中元素所占据的面积

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
	<script type="text/javascript">	
		//如果需要操作页面上的元素，那么就需要页面加载后再执行
		onload = function () {
			document.getElementById('bd').onclick = function () {
				alert('这是body的范围');
			}
			document.onclick = function () {
				alert('这是document的范围');
			}
		}
	</script>
</head>
<body id="bd">
	<input type="button" name="name" value="按钮" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
	<script type="text/javascript">	
		function btnclick() {
			alert('我被点了');
		}
		function cbtn() {
			document.getElementById('btn1').onclick = f2;
		}
		function f2() {
			alert('我改变了');
		}
	</script>
</head>
<body id="bd">
	<input type="button" name="name" value="按钮" id="btn1" οnclick="btnclick()"/>
	<input type="button" name="name" value="改变按钮" id="btnc" οnclick="cbtn()"/>//点击后改变按钮注册的事件
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btn').onclick = function () {
				//window.navigate('http://www.baidu.com');	//只支持IE
				window.location.href = 'http://www.baidu.com';  //支持大多数浏览器
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="进入网站" id="btn"/> 
</body>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		var setId = setInterval(function () {
			alert('计时器');
		}, 2000);//计时器：每2秒执行一次 返回的是计时器的id


		onload = function () {
			document.getElementById('btn').onclick =function () {
				clearInterval(setId);//清除计时器 使计时器直接报废
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="关闭计时器" id="btn" />
</body>
</html>

文本框自增：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			setInterval(function () {
				var txtObj = document.getElementById('txt');//返回的是文本框对象
				var txtNum = parseInt(txtObj.value);
				document.getElementById('txt').value = txtNum + 1;
			}, 2000);
		}
	</script>
</head>
<body>
	<input type="text" name="name" value="0" id="txt" />
</body>
</html>

<!DOCTYPE html> //另一个计时器
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
	<script type="text/javascript">
		//该计时器只执行了一次
		var setId=setTimeout(function () {
			alert('计时器测试');
		}, 2000);
		clearTimeout(setId);//清除掉计时器，释放资源
	</script>
</body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			alert("页面加载后执行");
		}
		onunload = function () {
			alert('关闭之后执行的');
		}
		onbeforeunload = function () {
			alert('关闭之前执行的');
		}
	</script>
	<!--标签选择器-->
	<style type="text/css">
		div {
			border: 2px yellow solid; /*solid是指实线*/
			width: 200px;
			height: 150px;
		}
	</style>
</head>
<body style="margin: 0; padding: 0">
	<!--margin是指元素和元素之间的距离 padding是指元素和里面的内容之间的距离-->
	<div>
		哈哈
	</div>
	<input type="button" name="name" value="测试" />
</body>
</html>

<html><head> <meta charset="utf-8" /> <title>走马灯1234567890</title><script type="text/javascript">setInterval(function () {var tt = document.title;document.title = tt.substr(1, tt.length - 1) + tt.substring(0,1);}, 100);</script></head><body></body></html>

window.location.reload();    //刷新

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btn').onclick = function () {
				window.location.reload();
			}
			//document.getElementById('dv').onmousemove = function () {
			//	document.title = window.event.clientX + ',' + window.event.clientY; //标题变为相对于左上角所在的坐标 只能在IE中使用 
			//}
			document.getElementById('dv').onmousemove = function (e) {
				document.title = e.clientX + ',' + e.clientY;	//可以在火狐中使用，在IE中会报错
			}    //screenX,screenY是相对于屏幕左上角的坐标
		}
	</script>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: gray;
		}
	</style>
</head>
<body>
	<input type="button" name="name" value="按钮" id="btn" />
	<div id="dv">
	</div>
</body>
</html>

window.event后面.出来的东西只能在IE浏览器中使用，火狐里面需要一个事件源（e），因此可以使用下面这种方式：

	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btn').onclick = function () {
				window.location.reload();
			}
			document.getElementById('dv').onmousemove = function () {
				if (arguments.length == 0) {
					document.title = window.event.clientX + ',' + window.event.clientY;  //IE
				}
				else {
					document.title = arguments[0].clientX + ',' + arguments[0].clientY;  //火狐
				}
			}
		}
	</script>

	<script type="text/javascript">	
		onload = function () {
			document.getElementById('dv').onclick = function () {
				if (window.event.ctrlKey) {
					alert('用户按下了ctrl键');
				} else if (window.event.shiftKey) {
					alert('用户按下了shift键');
				} else if (window.event.altKey) {
					alert('用户按下了alt键');
				} else {
					alert('用户按下了鼠标');
				}
			}
		}
	</script>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		//直接用鼠标点击这个超链接，会跳转进该网页，如果按shift再点击超链接，会显示时间
		onload = function () {
			document.getElementById('ak').onclick = function () {
				if (window.event.shiftKey) {
					alert(new Date().toLocaleTimeString());
					return false;//什么也不执行 取消默认事件
				}
			}
		}
	</script>
</head>
<body>
	<a href="http://www.baidu.com" id="ak">百度</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btn').onclick = function () {
				alert(window.screen.width + ',' + window.screen.height);
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="显示分辨率" id="btn" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('dv').onmousedown = function () {//显示按下的是鼠标哪个键
				alert(window.event.button);
			}
		}
	</script>
</head>
<body>
	<div style="width:300px;height:200px;background-color:green" id="dv">
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('bd').oncopy = function () {
				alert('禁止复制');
				return false;
			}
			document.getElementById('bd').onpaste = function () {
				alert('禁止粘贴'); //在当前网页禁止粘贴
				return false;
			}
		}
	</script>
</head>
<body id="bd">
	long long ago
</body>
</html>

<!DOCTYPE html>
<html>
<head>	<!--设置粘贴板内容 限制在IE中使用-->
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('bd').oncopy = function () {
				setTimeout(function () {
					//首先获取粘贴板的内容
					var txt = clipboardData.getData('text') + '本文出自网络';//获取粘贴板中的文本内容
					clipboardData.setData('text', txt);//第一个参数：设置的是文本内容
				}, 10);
			}
		}
	</script>
</head>
<body id="bd">
	文本内容
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		//可以动态的创建标签 但是如果在页面加载后执行 那么，页面的其他标签都没有了
		document.write('文字内容');
		document.write('<font name="微软雅黑" color="red" size="7">文字内容</font>');//writeln，浏览器会把换行解析成空格
	</script>
</head>
<body>
</body>
</html>

		onload = function () {//三种获取元素的方法
			//通过id获取元素
			//document.getElementById('btn')

			//通过name属性的值获取元素，返回的是一个元素的数组(集合)
			var btns = document.getElementsByName('name');
			for (var i = 0; i < btns.length; i++) {
				alert(btns[i].value);
			}


			var ips = document.getElementsByTagName('input');
			for (var i = 0; i < ips.length; i++) {
				alert(ips[i].value);
			}
		}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			var n1 = document.getElementsByName('name1');
			for (var i = 0; i < n1.length; i++) {
				n1[i].onclick = function () {
					alert('呜呜');
				}
			}
			var n2 = document.getElementsByName('name');
			for (var i = 0; i < n2.length; i++) {
				n2[i].onclick = function () {
					alert('哈哈');
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name1" value="呜呜" />
	<input type="button" name="name" value="哈哈" />
	<input type="button" name="name" value="哈哈" />
	<input type="button" name="name" value="哈哈" />
	<input type="button" name="name" value="哈哈" />
	<input type="button" name="name" value="哈哈" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			var i = 9;
			var setId = setInterval(function () {
				i--;
				var btnObj = document.getElementById('btn');
				if (i == 0) {
					clearInterval(setId);
					btnObj.value = '同意';
					btnObj.disabled = false;
				} else {
					btnObj.value = '请仔细阅读协议(' + i + ')';
				}
			}, 1000);
		};
	</script>
</head>
<body>
	<input type="button" name="name" value="请仔细阅读协议(10)" disabled="disabled" id="btn" />
	<!--disabled使按钮失效-->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('dv').onclick = function () {
				//alert(this.id);
				alert(window.event.srcElement.id);//表示记录事件源
			}
			document.getElementById('p1').onclick = function () {
				//alert(this.id);
				alert(window.event.srcElement.id);
				window.event.cancelBubble = true;
			}
			document.getElementById('sp').onclick = function () {
				//alert(this.id);
				alert(window.event.srcElement.id);
				window.event.cancelBubble = true;//取消事件冒泡
			}
		}
	</script>
	<style type="text/css">
		div {
			width: 300px;
			height: 200px;
			background-color: green;
			cursor: pointer;
		}

		p {
			width: 100px;
			height: 150px;
			background-color: orange;
			cursor: pointer;
		}

		span {
			background-color: yellow; /*设置宽高没有效果，只是把文本包围起来*/
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="dv">
		<p id="p1">
			<span id="sp">this is a span
			</span>
		</p>
	</div>
</body>
</html>

动态创建元素:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btn').onclick = function () {
				//创建
				var dvObj = document.createElement('div');//创建一个层，并且返回一个层对象
				dvObj.style.width = '300px';
				dvObj.style.height = '200px';
				dvObj.style.backgroundColor = 'orange';
				//加到body中去
				document.body.appendChild(dvObj);
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="创建一个层" id="btn" />
</body>
</html>

createElement('element'):创建一个节点

appendChild(node):追加一个节点

removeChild(node):移除一个节点

replaceChild(new,old):替换一个节点

insertBefore(new, 参照) 把节点加到前面

属性：

firstChild

lastChild

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btn').onclick = function () {
				//创建
				var dvObj = document.createElement('div');//创建一个层，并且返回一个层对象
				dvObj.style.width = '300px';
				dvObj.style.height = '200px';
				dvObj.style.backgroundColor = 'orange';
				dvObj.id = 'dv';
				//加到body中去
				document.body.appendChild(dvObj);
			};
			document.getElementById('btnAdd').onclick = function () {
				var inpObj = document.createElement('input');
				inpObj.type = 'button';//声明是一个按钮
				inpObj.value = '我是按钮';
				document.getElementById('dv').appendChild(inpObj);
			}
			document.getElementById('btnRem').onclick = function () {
				while (document.getElementById('dv').firstChild) {
					document.getElementById('dv').removeChild(document.getElementById('dv').firstChild);
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="创建一个层" id="btn" />
	<input type="button" name="name" value="添加按钮" id="btnAdd" />
	<input type="button" name="name" value="移除层中所有的按钮" id="btnRem" />
</body>
</html>

innerText和innerHTML:(innerText在IE中使用，innerHTML在哪个浏览器中都可以使用，火狐对应innerText的是textContent)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btnText').onclick = function () {
				//只显示文本内容
				alert(document.getElementById('dv').innerText);
			}
			document.getElementById('btnHtml').onclick = function () {
				//显示的是文本和标签
				alert(document.getElementById('dv').innerHTML);
			}


			document.getElementById('btnT').onclick = function () {
				//设置文本和标签
				document.getElementById('dv').innerHTML = '<font color="blue">飞流直下三千尺</font>';
			}
			document.getElementById('btnH').onclick = function () {
				//设置的是效果
				document.getElementById('dv').innerHTML = '<font color="blue">飞流直下三千尺</font>';
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="显示innerText" id="btnText" />
	<input type="button" name="button" value="显示innerHtml" id="btnHtml" />
	<input type="button" name="name" value="设置innerText" id="btnT" />
	<input type="button" name="name" value="设置innerHtml" id="btnH" />
	<div style="width: 300px; height: 200px; border: 1px solid yellow" id="dv">
		<font face="微软雅黑" size="7" color="red">
			我爱天安门
		</font>
	</div>
</body>
</html>

三种创建元素的方式：
write
createElement
innerHTML
================
typeof()能力检测判断是不是string类型来借此判断使用哪种浏览器的方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			if (typeof (document.getElementById('dv').innerText) == 'string') {//IE浏览器（有innerText）
				document.getElementById('dv').innerText = '<strong>哈哈哈</strong>';//粗体
			} else {//火狐浏览器（没有innerText）
				document.getElementById('dv').textContent = '<strong>哈哈哈</strong>';
			}
		}
	</script>
</head>
<body>
	<div id="dv">
		<font>
			哈哈哈
		</font>
	</div>
</body>
</html>

动态创建表格：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itvast.cn", "谷歌": "http://www.google.com" };
			document.getElementById('btn').onclick = function () {
				//创建表格
				var tbObj = document.createElement('table');
				tbObj.border = '1';
				for (var key in dic) {
					//创建行
					var trObj = document.createElement('tr');
					//创建单元格
					var tdObj1 = document.createElement('td');
					if (typeof (tdObj1.innerText) == 'string') {
						tdObj1.innerText = key;//文字
					} else {
						tbObj1.textContent = key;
					}
					var tdObj2 = document.createElement('td');
					tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
					//单元格加到行中
					trObj.appendChild(tdObj1);
					trObj.appendChild(tdObj2);
					//行添加到表中
					tbObj.appendChild(trObj);
				}
				//表添加到body中
				document.body.appendChild(tbObj);
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="创建表格" id="btn" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btn').onclick = function () {
				//获取昵称
				var name = document.getElementById('txt').value;
				//获取内容
				var txtContentObj = document.getElementById('txtContent').innerText;
				//创建行
				var trObj = document.createElement('tr');
				//创建单元格
				var tdObj1 = document.createElement('td');
				var tdObj2 = document.createElement('td');
				tdObj1.innerText = name;
				tdObj2.innerText = txtContentObj;
				//单元格加到行中
				trObj.appendChild(tdObj1);
				trObj.appendChild(tdObj2);
				//行添加到表中
				document.getElementById('tb').appendChild(trObj);
			}
		}
	</script>
</head>
<body>
	<table border="1" id="tb">
		<tr>
			<td>mao</td>
			<td>sleep</td>
		</tr>
	</table>
	昵称:
	<input type="text" name="name" value="" id="txt" />
	<br />
	<textarea rows="10" clos="10" id="txtContent"></textarea>
	<br />
	<input type="button" name="name" value="提交" id="btn" />
</body>
</html>

推荐这种方法创建表格（兼容性方式）：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btn').onclick = function () {
				var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itvast.cn", "谷歌": "http://www.google.com" };
				//创建表格
				tbObj = document.createElement('table');
				tbObj.border = '1';
				for (var key in dic) {
					var trObj = tbObj.insertRow(-1);//追加一行 返回行
					//创建单元格
					var tdObj1 = trObj.insertCell(-1);
					tdObj1.innerText = key;
					var tdObj2 = trObj.insertCell(-1);
					tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
				}
				document.body.appendChild(tbObj);
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="创建表格" id="btn" />
</body>
</html>

移动层：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btn').onclick = function () {
				if (typeof (document.getElementById('dv').style.styleFloat) == 'string') {
					//ie的写法
					document.getElementById('dv').style.styleFloat = 'right';
				} else {
					document.getElementById('dv').style.cssFloat = 'right';//火狐的写法
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="移动" id="btn" />
	<div style="width: 300px; height: 200px; background-color: green" id="dv">
	</div>
</body>
</html>

失去焦点事件：onblur

焦点进入控件：onfocus

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
	<script type="text/javascript">
		onload = function () {
			var inputs = document.getElementsByTagName('input');
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].onblur = function () {//失去焦点
					if (this.value.length == 0) {
						this.style.backgroundColor = 'red';
					} else {
						this.style.backgroundColor = '';//默认颜色
					}
				}
			}
		}
	</script>
</head>
<body>
	<input type="text" name="name" value="" />
	<input type="text" name="name" value="" />
	<input type="text" name="name" value="" />
	<input type="text" name="name" value="" />
	<input type="text" name="name" value="" />
	<input type="text" name="name" value="" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">	
		onload = function () {
			document.getElementById('btn').onclick = function () {
				var trs = document.getElementById('tb').getElementsByTagName('tr');
				for (var i = 0; i < trs.length; i++) {
					if (i % 2 == 0) {
						trs[i].style.backgroundColor = 'yellow';
					} else {
						trs[i].style.backgroundColor = 'orange';
					}
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="变色" id="btn" />
	<table border="1" id="tb">
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
	</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			var trs = document.getElementById('tb').getElementsByTagName('tr');
			for (var i = 0; i < trs.length; i++) {
				trs[i].onclick = function () {
					for (var j = 0; j < trs.length; j++) {
						trs[j].style.backgroundColor = '';
					}
					this.style.backgroundColor = 'orange';
				}
			}
		}
	</script>
</head>
<body>
	<table border="1" id="tb" style="cursor: pointer">
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
		<tr>
			<td>第一个单元格</td>
			<td>第二个单元格</td>
		</tr>
	</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btnYC').onclick = function () {
				document.getElementById('dv').style.display = 'none';//隐藏
			}
			document.getElementById('btnXS').onclick = function () {
				document.getElementById('dv').style.display = 'block';//显示
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="隐藏" id="btnYC" />
	<input type="button" name="name" value="显示" id="btnXS" />
	<div style="display:none;width: 30px; height: 200px; background-color: green; border: 1px solid red" id="dv">
	</div>
</body>
</html>

如果在div标签的属性中设置 display那么通过js可以获取里面的值

如果是在style标签中设置的display找那个，在js中是获取不到的

超链接显示图片：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('ak').onmouseover = function () {
				//创建层
				if (!document.getElementById('dv')) {//判断是否有dv这个层
					var dvObj = document.createElement('div');
					dvObj.id = 'dv';
					dvObj.style.width = '300px';
					dvObj.style.height = '200px';
					dvObj.style.backgroundColor = 'green';
					dvObj.style.position = 'absolute';//脱离文档流
					dvObj.style.left = this.offsetLeft + 'px';//距离左侧和超链接一样
					dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
					document.body.appendChild(dvObj);
				}
			}
		}
	</script>
</head>
<body>
	<br />
	<br />
	<br />
	<br />
	<br />
	传说中有个神奇的网站 <a id="ak" href="http://www.baidu.com">百度</a>
	<div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			var setId;
			document.getElementById('btnYC').onclick = function () {
				setId = setInterval(function () {
					if (document.getElementById('dv').style.height) {//截取字符串取出像素值并减去相对应的要减少的像素，在加上'px'赋值给height，达到层逐步消失的效果
						var strObj = document.getElementById('dv').style.height;
						var num = parseInt(strObj.substr(0, strObj.length - 2));
						num -= 5;
						document.getElementById('dv').style.height = num + 'px';
					} else {
						clearInterval(setId);
						document.getElementById('dv').style.display = 'none';
					}
				}, 1000);
			}
			document.getElementById('btnXS').onclick = function () {//判断计时器是否关闭，并且将层原样显示出来
				if (setId) {
					clearInterval(setId);
				}
				document.getElementById('dv').style.height = '300px';
				document.getElementById('dv').style.display = 'block';
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name" value="隐藏" id="btnYC" />
	<input type="button" name="name" value="显示" id="btnXS" />
	<div style="display: block; width: 400px; height: 300px; background-color: orange" id="dv">
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.onmousemove = function () {
				var imObj = document.getElementById('im');
				imObj.style.position = 'absolute';//脱离文档流
				imObj.style.left = window.event.clientX - imObj.offsetWidth + 'px';
				imObj.style.top = window.event.clientY + 'px';
			}
		}
	</script>
</head>
<body>
	<img src="4.jpg" id="im" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		table {
			width: 300px;
			height: 30px;
			text-align: center; /*居中*/
			font-size: 20px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">
		onload = function () {
			var tds = document.getElementById('tb').getElementsByTagName('td');
			for (var i = 0; i < tds.length; i++) {
				//添加属性并赋值
				tds[i].setAttribute('score', (i + 1) * 10);
				tds[i].onclick = function () {
					//获取该属性中的值
					alert(this.getAttribute('score'));
				};
			}
		};
	</script>
</head>
<body>
	<table border="1" id="tb">
		<tr>
			<td>☆</td>
			<td>☆</td>
			<td>☆</td>
			<td>☆</td>
			<td>☆</td>
			<td>☆</td>
		</tr>
	</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			document.getElementById('btnAll').onclick = function () {
				var inputs = document.getElementsByName('name');
				for (var i = 0; i < inputs.length; i++) {
					inputs[i].checked = true;//选中
				}
			}
			document.getElementById('btnCA').onclick = function () {
				var inputs1 = document.getElementsByName('name');
				for (var i = 0; i < inputs1.length; i++) {
					inputs1[i].checked = false;
				}
			}
			document.getElementById('btnOp').onclick = function () {
				var inputs2 = document.getElementsByName('name');
				for (var i = 0; i < inputs2.length; i++) {
					inputs2[i].checked = !inputs2[i].checked;
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="name1" value="全选" id="btnAll" />
	<input type="button" name="name1" value="取消全选" id="btnCA" />
	<input type="button" name="name1" value="反选" id="btnOp" />
	<input type="checkbox" name="name" value="1" />a
	<input type="checkbox" name="name" value="1" />b
	<input type="checkbox" name="name" value="1" />c
	<input type="checkbox" name="name" value="1" />d
	<input type="checkbox" name="name" value="1" />e
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			var datas = {
				"mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
				"mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
				"mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
			}
			//根据这个键值对，创建图片标签，并显示图片
			for (var key in datas) {
				//创建图片
				var imObj = document.createElement('img');
				imObj.src = key;
				imObj.setAttribute('path', key);
				imObj.style.marginRight = '10px';//距离右边10px
				document.getElementById('dvSmall').appendChild(imObj);
				imObj.onmouseover = function () {
					var dvb = document.getElementById('dvBig');
					dvb.style.position = 'absolute';
					dvb.style.display = 'block';
					dvb.style.left = this.offsetLeft + 'px';
					dvb.style.top = this.offsetTop + this.offsetHeight + 'px';
					dvb.getElementById('imBig').src = datas[this.getAttribute('path')][0];
					document.getElementById('spName').innerText = datas[this.getAttribute('path')][1];
					document.getElementById('spHeight').innerText = datas[this.getAttribute('path')][2];
				}
			}
		}
	</script>
</head>
<body>
	<div id="dvSmall">
	</div>
	<div id="dvBig" style="background-color: orange; border: 1px solid green; width: 630px; display: none">
		大头像：<br />
		<img src="#" alt="Alternate Text" id="imBig" />
		姓名：<span id="spName"></span><br />
		身高：<span id="spHeight"></span>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// g代表全局模式，i代表忽略大小写，m代表多行匹配
		var reg = /\d{5}/g;
		var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
		//alert(reg.test(msg));//判断是否匹配  
		while ((result = reg.exec(msg)) != null) {//exec()找到了匹配的文本，则返回一个结果数组，否则返回null
			alert(result);
		}
	</script>
</head>
<body>
</body>
</html>

将中间的手机号隐藏：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		var msg = '样中科：13888888888苏坤:13999999999小虎:13111111111';
		var result = msg.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3');//第一组$1 第三组$3
		alert(result);
	</script>
</head>
<body>
</body>
</html>

切掉前后空格：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		var txt = '             哈哈哈               ';
		function trimString(msg) {
			return msg.replace(/^\s+/, '').replace(/\s+$/, '');
		}
		var result = trimString(txt);
		alert(result);
	</script>
</head>
<body>
</body>
</html>

密码强弱：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		function checkPwd(msg) {
			var lvl = 0;
			if (msg.match(/[0-9]/)) {
				lvl++;
			}
			if (msg.match(/[a-zA-Z]/)) {
				lvl++;
			}
			if (msg.match(/[^a-zA-Z0-9]/)) {
				lvl++;
			}
			if (msg.length < 6) {
				lvl--;
			}
			return lvl;
		}
		onload = function () {
			document.getElementById('txt').onkeyup = function () {//键抬起的时候
				var tds = document.getElementById('tb').getElementsByTagName('td');
				for (var i = 0; i < tds.length; i++) {
					tds[i].style.backgroundColor = '';
				}
				if (this.value.length > 0) {
					var num = checkPwd(this.value);
					if (num == 3) {
						tds[2].style.backgroundColor = 'blue';
						tds[1].style.backgroundColor = 'blue';
						tds[0].style.backgroundColor = 'blue';
					} else if (num == 2) {
						tds[0].style.backgroundColor = 'yellow';
						tds[1].style.backgroundColor = 'yellow';
					} else if (num <= 1) {
						tds[0].style.backgroundColor = 'red';
					}
				}
			}
		}
	</script>
</head>
<body>
	<input type="text" name="name" value="" id="txt" style="width: 300px; height: 30px; border: 1px solid green; font-size: 25px" />
	<table border="1" style="width: 300px; height: 30px; font-size: 25px; text-align: center" id="tb">
		<tr>
			<td>弱</td>
			<td>中</td>
			<td>强</td>
		</tr>
	</table>
</body>
</html>

window.event.keyCode 对应键的值

搜索栏：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		setInterval(function () {
			document.getElementById('txt').onchange();
		}, 1000);
		onload = function () {
			var keyWords = {
				"传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"],
				"杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],
				"杨": ["杨利伟", "杨振宁", "杨过"],
				"杨忠": ["杨忠科", "杨忠学", "杨忠爱国"]
			};
			document.getElementById('txt').onchange = function () {
				//判断用户输入的内容在键值对中是否存在
				if (keyWords[this.value]) {
					//判断是否有层，有就删除掉
					if (document.getElementById('dv')) {
						document.body.removeChild(document.getElementById('dv'));
					}
					//开始创建层
					var dvObj = document.createElement('div');
					dvObj.id = 'dv';
					dvObj.style.width = '300px';
					dvObj.style.position = 'absolute';
					dvObj.style.border = '1px solid red';
					dvObj.style.left = this.offsetLeft + 'px';
					dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
					document.body.appendChild(dvObj);
					//创建可以显示文件的标签（循环创建）
					for (var i = 0; i < keyWords[this.value].length; i++) {
						var pObj = document.createElement('p');
						pObj.innerText = keyWords[this.value][i];
						pObj.style.cursor = 'pointer';
						pObj.style.margin = '5px';
						pObj.onmouseover = function () {
							this.style.backgroundColor = 'red';
						}
						pObj.onmouseout = function () {
							this.style.backgroundColor = '';
						}
						document.getElementById('dv').appendChild(pObj);
					}

				}
			}
		}
	</script>
</head>
<body>
	请输入搜索内容: 
	<input type="text" name="name" value="" id="txt" style="width: 300px; height: 25px; font-size: 20px; border: 1px solid green" />
	<input type="button" name="name" value="百度一下" id="btn" />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		onload = function () {
			//firefox下检测状态改变只能用oninput,且需要用哪个addEventListener来注册事件
			if (/msie/i.test(navigator.userAgent))//ie浏览器
			{
				document.getElementById('txt').onpropertychange = handle;
			}
			else {//非ie浏览器
				document.getElementById('txt').addEventListener('input', handle, false);
			}
			function handle() {
				document.getElementById('msg').innerHTML = '输入的文字长度为:' + document.getElementById('txt').value.length;
			}
		}
	</script>
</head>
<body>
	<span id="msg"></span>
	<input type="text" name="name" value="" id="txt" />
</body>
</html>

洛意

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom基础内容

document的范围比body的范围大，body的范围取决于网页中元素所占据的面积&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascrip
复制链接

扫一扫