JavaScript DOM操纵和DOM事件

一、DOM定义：

docuemnt object model文档对象模型

Document:文档，当前html整个页面的内容

Object:对象，把当前文档中的一些标签转化为js对象来进行操作

Model：当前文档结构的节点关系

二、DOM-标签对象转换方式

对象获取方式：

getElementById 根据标签ID，

getElementsByName 根据标签name属性，

getElementsByTagName 根据标签名，

getElementsByClassName 根据类名class（HTML5推出），

getElementsByTagNameNS 根据命名空间（namespace）和标签名（ XML 解析用）；

三、DOM对获取的标签对象基本操作

1.操作属性

格式：对象.属性

2.操作内容

2.1 插入内容的时候（会将原内容清空再插入内容）：

InnerText: 插入内容的时候，如果有标签，则会当做文本插入

innerHTML:插入内容的时候，会解析插入内容中带有标签

2.2 获取内容的时候：

InnerText:只获取当前对象内容的文本值

InnerHTML:获取当前对象内容的所有（标签+格式）

例子：<div><span>hello</span></div>

innerText为hello ,innerHTML为<span>hello</span>

3.操作样式

3.1 格式：对象.style.样式名

注意：css中所有的中横线“-”全部取出，后面单词首字母大写

3.2 通过增加和删除 class 选择类的方式实现样式操作

四、DOM模型分析

1.文档中每一个内容都是树中的一个节点（内容包括：元素、内容、属性、注释）

2.DOM节点遍历

父节点（单数）： parentNode

子节点：childNodes（复数）、firstChild（单数）、lastChild（单数）

兄弟节点：nextSibling（上一个节点）、previousSibling(下一个节点)

3.DOM节点操作

• 创建节点对象： document.createElement(标签名)

• 追加子节点：对象 . appendChild ( 插入的节点对象 ); 插到字节点的最后

• 删除子节点：对象 . removeChild ( 删除的节点对象 );

五、DOM事件

1.js 事件原理

在某个业务场景下的动作触发运行的逻辑流程

事件源：触发当前动作的源头组件（元素），可以是当前页面的任意元素（ document 、 div 、 input 等）

2.js事件绑定方式

2.1直接在标签元素内部，写上事件名称，并附上函数即可.

例子：<input onclick="alert('点了一下')" type="button" value="点击按钮" />

2.2通过js对象属性赋值方式，给事件赋值函数，进行事件绑定

格式：对象.事件名=function(event){}

2.3通过script标签for属性和event属性方式来进行事件绑定（谷歌不兼容，不常用）

格式： <script for=“id 名 ” event=“ 事件名 ”> 过程 </script>
3. 页面加载事件

3.1 onload：页面加载完毕后执行的事件（当前文档内容、当前所有的外部素材）

3.2 onunload:关闭页面之后进行执行（进入下一个页面之前：下一个页面数据请求完毕）

3.3 onbeforeunload:关闭页面之前执行（当前页面消失之前，下一个页面请求数据之前）

4.鼠标事件

•onclick ( 单机 ) 、 dblclick （双击）

• onmouseenter （鼠标进入）、 onmouseleave （鼠标退出）：不涉及子元素操作

• onmouseover （鼠标进入）、 onmouseout （鼠标退出）：涉及到子元素操作

• onmousedown 、 onmouseup 、 onmousemove （鼠标移动）：用于鼠标拖拽操作

• oncontextmenu （右击菜单事件）
5.键盘事件
• onkeypress：按下键触发，不能识别功能键和方向键

• onkeydown：按下任意键都能触发

•onkeyup：释放任意按键触发

6.组件事件

onforce、onblur、onchange、onsubmit(焦点获取、焦点失去、内容改变、表单提交)

7.js事件对象

7.1 事件对象获取 (兼容写法) var e = event||window.event

7.2 事件对象属性

7.2.1srcElement属性：获取事件源元素

7.2.2 几个坐标属性：

1）. clientX、clientY：相对于浏览器边界鼠标xy偏移量

2）. screenX、screenY：相对于屏幕鼠标xy偏移量

3）. pageX、pageY：相对于当前页面鼠标xy偏移量（常用于设计滚动页面）

4）. offsetX、offsetY：相对于当前事件容器组件内部的xy偏移量（不包括border，包括padding）

六、offset相关属性

• offsetWidth 和 offsetHeight 用于获取当前盒子尺寸

offsetWidth = width + border + padding

offsetHeight = height + border + padding

• offsetLeft 和 offsetTop 用于获取当前盒子左边距和上边距(无定位也可以获取)

注意： Style.width和style.height：只能获取行内样式的宽高值，而且带单位“px”，不能用于计算

七、运用案例

1.dom操作案例

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>DOM</title>
	<style type="text/css">
		.firsttr{
			background-color: red;
			color: #fff;
		}
		div{
			margin:auto;
		}
	</style>
</head>
<body>
	<h1>请选择你要查询的成绩：</h1>
	<ul>
		<li><input type="checkbox" class="checkbox" id="input1"/><label for="input1">语文成绩</label></li>
		<li><input type="checkbox" class="checkbox" id="input2"/><label for="input2">数学成绩</label></li>
		<li><input type="checkbox" class="checkbox" id="input3"/><label for="input3">英语成绩</label></li>
		<li><input type="checkbox" class="checkbox" id="input4"/><label for="input4">地理成绩</label></li>
		<li><input type="checkbox" class="checkbox" id="input5"/><label for="input5">历史成绩</label></li>
	</ul>
	<a href="javascript:selectAll()">全选</a>
	<a href="javascript:deselectAll()">全不选</a>
	<a href="javascript:selectInverse()">反选</a>
	<hr />
	<div class="sendfile">
		<h1>文件上传</h1>
		<a href="javascript:add()">添加</a>
		<a href="javascript:remove()">删除</a>
		<br />
		<input type="file" class="file" /><br />
		<input type="file" class="file" /><br />
		<input type="file" class="file"  /><br />
	</div>
	<hr />
	<div class="table">
		<h1>信息表</h1>
		<span> 姓名</span><input type="text" name="name" class="info"><br />
		<span> 年龄</span><input type="text" name="age" class="info"><br />
		<span> 性别</span><input type="text" name="sex" class="info"><br />
		<span> 籍贯</span><input type="text" name="address" class="info"><br />
		<button class="addtr" onclick="addtr()">添加</button>
		<table  class="userinfo" >
			<tr class="firsttr">
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>籍贯</th>
				<th>操作</th>
			</tr>
			<tr class="tr"><td>1</td><td>aa</td><td>12</td><td>男</td><td>长沙</td><td><a href="javascript:removetr()">删除</a></td></tr>
			<tr class="tr""><td>2</td><td>aa</td><td>12</td><td>男</td><td>长沙</td><td><a href="javascript:removetr()">删除</a></td></tr>
			<tr class="tr"><td>3</td><td>aa</td><td>12</td><td>男</td><td>长沙</td><td><a href="javascript:removetr()">删除</a></td></tr>
			<tr class="tr"><td>4</td><td>aa</td><td>12</td><td>男</td><td>长沙</td><td><a href="javascript:removetr()">删除</a></td></tr>
		</table>

	</div>
	<script type="text/javascript" src="DOMtest.js"></script>
</body>
</html>

js内容

		// 案例一
		var selectAll=function(){
			var inps = document.getElementsByClassName("checkbox");
			for(var att=0;att<inps.length;att++){
				inps[att].checked =true;
			}
		}
		var deselectAll=function(){
			var inps = document.getElementsByClassName("checkbox");
			for(var att=0;att<inps.length;att++){
				inps[att].checked =false;
			}
		}
		var selectInverse=function(){
			var inps = document.getElementsByClassName("checkbox");
			for(var att=0;att<inps.length;att++){
				inps[att].checked=!inps[att].checked;
			}
		}
		// 案例二
		var add = function(){
			var div = document.getElementsByClassName("sendfile");
			var input = document.createElement("input");
			var br = document.createElement("br");
			input.type = "file";
			input.className ="file";
			div[0].appendChild(input);
			div[0].appendChild(br);
		}
		var remove = function(){
			var fileinputs = document.getElementsByClassName("file");
			var brs = document.getElementsByTagName("br");
			var div = document.getElementsByClassName("sendfile");
			div[0].removeChild(fileinputs[fileinputs.length-1]);
			div[0].removeChild(brs[brs.length-1]);
		}
		// 案例三
		var removetr=function(){
			var tbody = document.getElementsByTagName("tbody")[0];
			var trs = document.getElementsByClassName("tr");
			tbody.removeChild(trs[trs.length-1]);
			changecolor();
			console.log(trs);
		}
		var addtr = function(){
			//创建新的行元素
			var newtr = document.createElement("tr");
			newtr.className = "tr";
			var id = document.createElement("td");//创建id列元素
			var trs = document.getElementsByClassName("tr");//获取已有的行元素

/*			var inhtml ="<td>id</td>";
			//给各列元素赋值
			var inputs = document.getElementsByClassName("info");
			for (var i = 0; i < inputs.length; i++) {
				var input = document.createElement("td");
				inhtml+="<td>"+inputs[i].value+"<td>";
			}
			inhtml+="<td><a href='javascript:removetr("+id+")'>删除</a></td>";
			newtr.innerHTML=inhtml;*/
			
			//给id赋值
			id.innerText = parseInt(trs[trs.length-1].firstChild.innerText)+1;
			newtr.appendChild(id);
			//给各列元素赋值
			var inputs = document.getElementsByClassName("info");
			for (var i = 0; i < inputs.length; i++) {
				var input = document.createElement("td");
				input.innerText = inputs[i].value;
				newtr.appendChild(input);
			}
			var operaction = document.createElement("td");
			var a = document.createElement("a");
			a.innerText = "删除"
			a.href="javascript:removetr()";
			operaction.appendChild(a);
			newtr.appendChild(operaction);

			//将新的行元素添加到表格中
			var tbody = document.getElementsByTagName("tbody")[0];
			tbody.appendChild(newtr);
			changecolor();
		}
		var changecolor=function(){
			var trs = document.getElementsByClassName("tr");
			var flag = true;
			for(var index in trs){
				if (flag) {
					trs[index].style.backgroundColor = "#fae9e8";
					flag=!flag;
				}else{
					trs[index].style.backgroundColor = "#f6d0ce";
					flag=!flag;
				}
			}
		}
		changecolor();

2.dom事件制作跟随小球

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>event</title>
	<style type="text/css">
		.box{
			width: 600px;
			height: 600px;
			background-color: blue;
			margin: auto;
			position: relative;
			overflow: hidden;
		}
		.child{
			width: 50px;
			height: 50px;
			background-color: yellow;
			border-radius: 50px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div class="box" >
		<div class="child" ></div>
	</div>
	<script type="text/javascript">
		var box = document.getElementsByClassName("box")[0];
		var ball = document.getElementsByClassName("child")[0];
		console.log(box);
		box.onmousemove = function(event){
			var e = window.event||event;
			ball.style.left=(e.pageX-box.offsetLeft-25)+"px";
			ball.style.top=(e.pageY-box.offsetTop-25)+"px";
		}
	</script>
</body>
</html>

JavaScript DOM操纵和DOM事件

猜你喜欢