DOM2

最新推荐文章于 2023-03-16 23:38:15 发布

jiaody111

最新推荐文章于 2023-03-16 23:38:15 发布

阅读量163

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/weixin_42139212/article/details/89606867

版权

DOM 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

注：要注意for循环和响应函数的执行顺序。在onLoad中的for循环在页面加载时已经执行完毕。而响应函数只有在请求响应时才会执行（即在for循环执行完毕之后）

replaceChild()

<body>

  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
  
    <script type="text/javascript">
      function replaceMessage(){
          var oldnode = document.getElementById('oldnode');
          var newnode = document.createElement('i');
          newnode.innerHTML ='加粗改成斜体';
          oldnode.parentNode.replaceChild(newnode,oldnode);
       }    
  </script>
  
 </body>

removeChild()

语法：父节点.removeChild(子节点）== 子节点.parentNode.removeChild(子节点）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数
  var kids = content.childNodes;
  console.log(kids.length);
  for(var i = 0 ; i < kids.length; i ++)
  {
      content.removeChild(kids[i])
  }
  
}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				function myClick(idStr, func) {
					var btn = document.getElementById(idStr)
					btn.onclick = func
				}
				//添加"广州"节点
				myClick('btn01', function() {
					//创建"广州"节点 1.创建<li/>元素节点 2.创建"广州"文本节点
					//创建元素节点
					var li = document.createElement('li')
					//创建文本节点
					var gzText = document.createTextNode("广州")
					//将"广州"文本节点设置为li元素节点的子节点
					li.appendChild(gzText)
					var city = document.getElementById('city')
					//在city下添加该li节点
					city.appendChild(li)
				})
				//将"广州"节点插入到"北京"节点前
				myClick('btn02', function() {
					var li = document.createElement('li')
					var gzText = document.createTextNode('广州')
					li.appendChild(gzText)
					var city = document.getElementById('city')
					var bj = document.getElementById('bj')
					// 父节点.insertBefore(新节点,旧节点)
					city.insertBefore(li, bj)
				})
				//使用"广州"节点替换"北京"节点
				myClick('btn03', function() {
					var li = document.createElement('li')
					var gzText = document.createTextNode('广州')
					li.appendChild(gzText)
					var city = document.getElementById('city')
					var bj = document.getElementById('bj')
					//replaceChild() 可以用指定的子节点替换已有的子节点
					//语法: 父节点.replaceChild(新节点，旧节点)
					city.replaceChild(li,bj)
				}) 
				//删除"北京"节点 语法:父节点.removeChild(子节点)
				myClick('btn04',function(){
					var city = document.getElementById('city')
					var bj = document.getElementById('bj')
					//city.removeChild(bj)
					//在父节点未知的情况下,使用parentChild获取父节点
					bj.parentNode.removeChild(bj)
				})
				//读取"city"中的html代码
				myClick('btn05',function(){
					var city = document.getElementById('city')
					console.log(city.innerHTML)
				})
				//设置"北京"的html代码
				myClick('btn06',function(){
					var bj = document.getElementById('bj')
					bj.innerHTML = 'BeiJing'
					console.log(bj.innerHTML)
				})
				//使用innerHTML添加"广州"节点
				myClick('btn07',function(){
					var city = document.getElementById('city')
					//city.innerHTML +='<li>广州</li>'
					var li = document.createElement('li')
					li.innerHTML = '广州'
					city.appendChild(li)
				})
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

练习2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type='text/javascript'>
			function delFunc(){
				//点击超链接以后,需要删除超链接所在的行
				//点击哪个超链接,this就指代哪个超链接
				//根据超链接获取该行所对应的tr节点并删除
				var tr = this.parentNode.parentNode
				//confirm()用于弹出一个带有确认和取消按钮的提示框
				//需要传递一个字符串作为参数,该字符串会作为提示文字显示
				//如果用户点击确认,返回true 如果用户点击取消,返回false
				//动态获取要删除的员工的名字
				var name = tr.getElementsByTagName('td')[0].innerHTML
				var flag = confirm('确认删除'+ name +'吗？')
				if(flag){
					tr.parentNode.removeChild(tr)
				}
				return false;
			}
			window.onload = function() {
				//删除记录操作
				var allA = document.getElementsByTagName("a");
				for (var i = 0; i < allA.length; i++) {
					allA[i].onclick = delFunc
				}
				//添加员工操作 点击submit按钮 获取用户填写的员工信息，并添加到上面的表格中
				var btn = document.getElementById('subBtn')
				btn.onclick = function(){
					var name = document.getElementsByName('name')[0].value
					var email = document.getElementsByName('email')[0].value
					var salary = document.getElementsByName('salary')[0].value
					var td1 = document.createElement('td')
					td1.innerHTML = name;
					var td2 = document.createElement('td')
					td2.innerHTML = email;
					var td3 = document.createElement('td')
					td3.innerHTML = salary;
					var td4 = document.createElement('td')
					var aHref = document.createElement('a')
					aHref.href = "javascript:;"
					aHref.innerHTML = 'Delete'
					aHref.onclick= delFunc
					td4.appendChild(aHref)
					var tr = document.createElement('tr')
					tr.appendChild(td1)
					tr.appendChild(td2)
					tr.appendChild(td3)
					tr.appendChild(td4)
					var table = document.getElementById('employeeTable')
					//将新添加的员工信息,添加到table中的tbody中
					var tbody = table.getElementsByTagName('tbody')[0]
					tbody.appendChild(tr)
				}
			}
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="name" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="subBtn" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

练习2 修改版：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type='text/javascript'>
			function delFunc(){
				//点击超链接以后,需要删除超链接所在的行
				//点击哪个超链接,this就指代哪个超链接
				//根据超链接获取该行所对应的tr节点并删除
				var tr = this.parentNode.parentNode
				//confirm()用于弹出一个带有确认和取消按钮的提示框
				//需要传递一个字符串作为参数,该字符串会作为提示文字显示
				//如果用户点击确认,返回true 如果用户点击取消,返回false
				//动态获取要删除的员工的名字
				var name = tr.getElementsByTagName('td')[0].innerHTML
				var flag = confirm('确认删除'+ name +'吗？')
				if(flag){
					tr.parentNode.removeChild(tr)
				}
				return false;
			}
			window.onload = function() {
				//删除记录操作
				var allA = document.getElementsByTagName("a");
				for (var i = 0; i < allA.length; i++) {
					allA[i].onclick = delFunc
				}
				//添加员工操作 点击submit按钮 获取用户填写的员工信息，并添加到上面的表格中
				var btn = document.getElementById('subBtn')
				btn.onclick = function(){
					var name = document.getElementsByName('name')[0].value
					var email = document.getElementsByName('email')[0].value
					var salary = document.getElementsByName('salary')[0].value
					var td1 = document.createElement('td')
					var tr = document.createElement('tr')
					tr.innerHTML = '<td>'+ name +'</td>' + 
					                '<td>'+ email +'</td>' + 
									'<td>' + salary + '</td>' + 
									'<td><a href="javascript:;">Delete</a></td>'
					var a = tr.getElementsByTagName('a')[0]
					a.onclick= delFunc
					var table = document.getElementById('employeeTable')
					//将新添加的员工信息,添加到table中的tbody中
					var tbody = table.getElementsByTagName('tbody')[0]
					tbody.appendChild(tr)
				}
			}
		</script>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="javascript:;">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=003">Delete</a></td>
			</tr>
		</table>
		<div id="formDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="name" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="subBtn" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

JS修改和读取元素样式

兼容IE和其他浏览器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn1 = document.getElementById('btn1')
				var box1 = document.getElementById('box1')
				btn1.onclick = function(){
					// var obj = window.getComputedStyle(box1,null)
					// console.log(obj['width'])
					alert(getStyle(box1,'backgroundColor'))
				}
			}
			function getStyle(obj,name){
				//除了IE浏览器,都有getComputedStyle()方法
				//window.getComputedStyle是属性,不存在不会报错.getComputedStyle是方法,不存在会报错
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name]
				}
				else{
					//兼容IE
					return obj.currentStyle[name]
				}
			}
		</script>
	</head>
	<body>
		<button id='btn1'>click me</button>
		<br/>
		<div id='box1' style="width: 100px;"></div>
	</body>
</html>

其他样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box1 {
				width: 200px;
				height: 200px;
				padding: 10px;
				border: 10px silver solid;
				background-color: beige;
			}
		</style>
		<script type="text/javascript">
			/*
			 *实现效果：点击button能修改box1的大小
			 */
			window.onload = function() {
				var btn1 = document.getElementById('btn1');
				var box1 = document.getElementById('box1');
				btn1.onclick = function() {
					/*
					*clientWidth clientHeight 获取元素的可见宽高（只读，不可修改）
					* 这两个属性的返回值都不带单位。只有数字，可以用来直接计算
					* 包括内容区和内边距
					*/
				   console.log(box1.clientHeight);//220
				   console.log(box1.clientWidth);//120
				   /*
				   *offsetWidth 和 offsetHeight 获取元素的整个高度和宽度
				   * 包括 内容区 内边距 和边框
				   */ 
				  console.log(box1.offsetHeight);//240
				  console.log(box1.offsetWidth);//140
				  
				  /*
				  * offsetParent 获取当前元素的定位父元素
                                  * 如果所有祖先元素都没有开启定位，返回body
				  * 获取距离当前元素最近的position不是static的祖先元素
				  * offsetLeft 当前元素相对于其定位父元素的水平偏移量
				  * offsetTop 当前元素相对于其定位父元素的垂直偏移量
				  */ 
				 var parent = box1.offsetParent;
				 var left = box1.offsetLeft;
				 console.log(left);//8
				 
				 /*
				 * scrollWidth scrollHeight 获取元素的整个滚动区域的宽高
				 * scrollLeft 获取水平滚动条距离起始位置的距离
				 * scrollTop 获取垂直滚动条距离起始位置的距离
				 * 当满足scrollHeight - scrollTop == clientHeight 说明垂直滚动条已经滚动到底部
				 * onscroll事件 会在滚动条滚动时触发
				 */ 
				 
				}
			}
		</script>
	</head>
	<body>
		<button id='btn1'>button</button>
		<br />
		<div id='box1' style="width: 100px;"></div>
	</body>
</html>

事件对象

onmousemove鼠标移动事件：

//获取鼠标坐标并显示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 *事件对象
			 * 当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递给响应函数
			 * 在事件对象中 封装了当前事件的一切信息 如：鼠标的坐标 键盘的哪个按键被按下 鼠标的滚轮滚动的方向等
			 */
			window.onload = function() {
				var box1 = document.getElementById('box1');
				var box2 = document.getElementById('box2');
				/*
				 * onmousemove事件 会在鼠标在元素中移动时触发
				 */
				box1.onmousemove = function(e) {
					/*
					 * 在IE8 及以下的浏览器中 是将事件对象作为window对象的属性保存
					 * 使用 e = e || window.e
					 */
					if (!e) {
						e = window.e
					}

					/*获取鼠标所在位置的坐标
					 * clientX获取鼠标的水平坐标  没有单位，只有数字
					 * clientY获取鼠标的垂直坐标  没有单位，只有数字
					 */ 
					var x = e.clientX;
					var y = e.clientY;
					console.log("x = " + x + ', y = ' + y); // x = 174, y =58
					box2.innerHTML = "x = " + x + ', y = ' + y;
				}
			}
		</script>
	</head>
	<body>
		<div id='box1' style="width: 300px; height: 50px; border: 1px black solid;margin-bottom: 20px;"></div>
		<div id='box2' style='width:300px;height:20px;border:1px black solid;'></div>
	</body>
</html>


//div跟随鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var box1 = document.getElementById('box1');
				document.onmousemove = function(e) {
					e = e || window.e 	//解决不同浏览器的兼容问题
					var left = e.pageX; //pageX和pageY 是相对于整个页面的坐标(在IE8及以下的浏览器不支持)
					var top = e.pageY;
					box1.style.left = left + "px";
					box1.style.top = top + "px";
				}
			}
		</script>
	</head>
	<body>
		<div id='box1' style="width: 100px; height: 100px; position: absolute;background-color: antiquewhite;"></div>
	</body>
</html>

scrollHeight和scrollWidth，获取网页内容高度和宽度。

获取滚动条的距离页面顶端的位置：

document.body.scrollTop (chrome)

document.documentElement.scrollTop (firefox)

不同浏览器的兼容性：

var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;

事件的冒泡：

事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: #016369;
			}
			#span{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById('box')
				var span = document.getElementById('span')
				
				box.onclick = function(e){
					e.cancelBubble = true
					alert('我是box的响应函数')
				}
				span.onclick = function(e){
					e.cancelBubble = true // 取消冒泡
					alert("我是span的响应函数")
				}
				document.body.onclick = function(){
					alert('我是body的响应函数')
				}
			}
		</script>
	</head>
	<body>
		<div id='box'>我是box
			<span id='span'>我是span</span>
		</div>
	</body>
</html>

事件的委派：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: #016369;
			}
			#span{
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById('btn')
				var ul = document.getElementById('ul')
				btn.onclick = function(){
					var li = document.createElement('li')
					li.innerHTML = '<a href="javascript:;" class="link">我是超链接</a>'
					ul.appendChild(li)
				}
				// 想给每个超链接添加点击事件,如果给每个元素分别单独添加响应函数,不仅麻烦.
				// 而且后添加的超链接需要重新绑定响应函数
				// 希望:
				// 只绑定一次事件,即可应用到多个元素上,即使元素是后添加的.
				// 可以将其绑定给元素的祖先元素
				// 事件的委派:利用冒泡,减少绑定次数.
				// 将事件统一绑定到元素的共同的祖先元素,当后代元素的事件触发时,会一直冒泡到祖先元素.
				// 通过共同的祖先元素的响应函数处理事件
				ul.onclick = function(e){
					console.log(e.target)
					//如果触发事件的元素是期望的元素,才执行.否则不执行
					//e.target传递的是事件触发的对象
					if(e.target.className == 'link'){
						alert('aaa')
					}
				}
			}
		</script>
	</head>
	<body>
		<button id='btn'>button</button>
		<ul id='ul'>
			<p>一个p</p>
			<li><a href="javascript:;" class="link">我是超链接</a></li>
			<li><a href="javascript:;" class="link">我是超链接</a></li>
			<li><a href="javascript:;" class="link">我是超链接</a></li>
		</ul>
	</body>
</html>

事件的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 200px;
				height: 200px;
				background-color: #016369;
			}

			#span {
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementById('btn')
				btn.onclick = function() {
					// 事件的绑定
					// 1.使用 对象.事件 = 函数 的形式绑定函数 
					// 只能同时为 一个元素 的 一个事件 绑定 一个响应函数 不能绑定多个
					// 如果绑定多个 则后边的响应函数 会 覆盖前边的函数

					// 2. addEventListener() 方法 绑定函数 this是绑定事件的对象
					// 可以同时为一个元素的相同事件 同时绑定多个响应函数
					// 参数: 1.事件的字符串,去掉on ,
					// 2. 回调函数 当事件触发时该函数会被调用
					// 3. 是否在捕获阶段触发事件,一般为return false;
					btn.addEventListener('click', function() {
						alert('hello')
					}, false)
					btn.addEventListener('click', function() {
					console.log(btn.addEventListener)
					}, false)
				}
			}
		</script>
	</head>
	<body>
		<button id='btn'>button</button>
	</body>
</html>

事件的传播

捕获阶段：从最外层的祖先元素开始捕获，一直到目标元素（从外到内），但是捕获阶段不会触发事件。

目标阶段：事件捕获到目标元素，捕获结束，在目标元素上触发事件。

冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件（从内到外）。

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下不希望在捕获阶段触发事件，所以这个参数一般都是false。

拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};
				
				
				
				
			};
			
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
		
		<div id="box2"></div>
	</body>
</html>

滚轮事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById('box1')
				box1.onmousewheel = function(e){
					//给box1绑定一个鼠标滚轮滚动事件
					// onmousewheel会在滚轮滚动时触发,但是火狐浏览器不支持该属性
					// 在火狐浏览器中,需要使用DOMMouseScroll来绑定滚动事件,
					// 而且需要通过addEventListener()函数来绑定
					//wheelDelta 保存的是滚轮滚动的方向 向上滚是正值,向下滚是负值
					if(e.wheelDelta > 0){
						//向上滚,box1变短
						box1.style.height = box1.clientHeight - 10 + 'px'
					}else{
						//向下滚,box1变长
						box1.style.height = box1.clientHeight + 10 + 'px'
					}
					// 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,这是浏览器的默认行为
					// 如果不希望滚动条滚动,取消默认行为 return false
					//使用addEventListener()方法绑定响应函数,取消默认行为不能使用return false
					//此时需要使用event取消默认行为 event.preventDefault()
				}
			}
		</script>
	</head>
	<body>
		<div id="box1">
			
		</div>
		
	</body>
</html>

键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			//onkeydown()当键盘被按下时触发 
			//如果按着某个按键不松手 会一直触发该事件 连续触发时,第一次和第二次之间 会间隔稍微长一点
			// onkeyup()当键盘松开时触发
			// 一般都绑定给能获取焦点的元素或者document
			//keyCode可以获取按下的按键的编码
			//判断 alt ctrl 和shift 是否被按下: altKey ctrlKey shiftKey 如果按下返回true 否则返回false
			window.onload = function() {
				var input = document.getElementsByTagName('input')[0]
				var box = document.getElementById('box')
				input.onkeydown = function(e) {
					//在文本框中输入内容 是onkeydown的默认行为 
					//如果在onkeydown中取消默认行为 return false 则文本框中的输入内容不会在文本框中显示
					//使input不能输入数字 
					if (e.keyCode >= 48 && e.keyCode <= 57) {
						return false
					}
				}
				document.onkeydown = function(event) {//左键 37 上38 右39 下40
					switch (event.keyCode) {
						case 37:
							box.style.left = box.offsetLeft - 10 + 'px';
							break;
						case 38:
							box.style.top = box.offsetTop - 10 + 'px';
							break;
						case 39:
							box.style.left = box.offsetLeft + 10 + 'px';
							break;
						case 40:
							box.style.top = box.offsetTop + 10 + 'px';
							break;
					}
				}
			}
		</script>
	</head>
	<body>
		<input />
		<div id="box"></div>
		<!-- 	实现功能：使box可以根据不同的方向键盘上下左右的移动 -->
	</body>
</html>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM2

注：要注意for循环和响应函数的执行顺序。在onLoad中的for循环在页面加载时已经执行完毕。而响应函数只有在请求响应时才会执行（即在for循环执行完毕之后）replaceChild()<body> <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>...
复制链接

扫一扫