一、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(单数)3.DOM节点操作兄弟节点:nextSibling(上一个节点)、previousSibling(下一个节点)• 创建节点对象: 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" οnclick="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>