javascript学习8、DOM对象
一.什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
(1)解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
(2)DOM树（一切都是节点）
DOM的数据结构如下：
上图可知，在HTML当中，一切都是节点：（非常重要）
-
元素节点：HMTL标签。
-
文本节点：标签中的文字（比如标签之间的空格、换行）
-
属性节点：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。
(3)DOM可以做什么
-
找对象（元素节点）
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应：事件源、事件、事件的驱动程序
二.查找元素
如果我们想用js操作文档，首先要做的便是要找到要操作的元素，查找元素有直接查找和间接查找，下面来看一下这两类查找，
1、直接查找
document.getElementById 根据ID获取一个标签 <div id='id1'></div>
document.getElementsByClassName 根据class属性获取标签数组 <div class='class1'></div>
document.getElementsByTagName 根据标签名获取标签数组 <div></div>
document.getElementsByName 根据name属性获取标签数组 <div name='test'></div>
2、间接查找(一般都是和直接找配合使用)
var ele=document.getElementById('id1') //先获取标签对象
ele.nodeName // 获取当前对象的标签
ele.length // 获取当前对象标签个数
ele.parentElement // 父节点标签元素
ele.children // 所有子标签
ele.firstElementChild // 第一个子标签元素
ele.lastElementChild // 最后一个子标签元素
ele.nextElementtSibling // 下一个兄弟标签元素
ele.previousElementSibling // 上一个兄弟标签元素
3.局部查找，id和name是不支持的
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
三.操作
1、创建标签(两种方式)
// 方式一 var tag = document.createElement('a') tag.innerText = "xiaozhiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/xiaozhiqi" xxx.appendChild(tag) xxx.insertBefore(tag,xxx[1]) // 方式二 var tag = "<a class='c1' href='http://www.cnblogs.com/xiaozhiqi'>xiaozhiqi</a>" xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
2、标签中的内容
操作内容主要是 innerText，innerHTML和value其中前两种比较简单，主要是第三种在操作表单的时候，用得最多，text，password和textarea的value可以分为一类，checkbox，radio和select的value可以分为一类
<a>hello div</a> var ele=document.getElementsByTagName('a')[0]
ele.innerText // a标签中的文本内容 ele.innerHTML // HTML内容,比如<a><span>aaa</span></a>中的<span>标签 ele.value // input标签中的值
3、操作属性
除了操作内容，还可以操作标签属性，主要用到下面几个方法
<div class='test' id='id1' name='tx1'>hellp</div> var ele=document.getElementById('id1') ele.attributes // 获取所有标签属性 ele.setAttribute(key,value) // 设置标签属性 ele.getAttribute(key) // 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */
4、class操作
<div class='test test23' id='id1' name='tx1'>hellp</div>
var ele=document.getElementById('id1')
ele.className // 获取所有类名,字符串格式 ele.classList // 获取所有类名,列表格式 ele.classList.remove('test23') // 删除指定类 ele.classList.add('test45') // 添加类
5、样式操作
ar obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
6、位置操作
document.documentElement.offsetHeight //总文档高度 document.documentElement.clientHeight //当前文档占屏幕高度 tag.offsetHeight //自身高度 tag.offsetTop //距离上级定位高度 tag.offsetParent //父定位标签 tag.scrollTop //滚动高度 /* clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点 */
四.事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
1.两种绑定事件方式
//第一种方式 <div onclick="alert(123)">点我呀</div> <p id="abc">试一试!</p> //第二种方式 <script> var ele=document.getElementById("abc"); ele.onclick=function(){ alert("hi"); }; </script>
注意：
<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>
<script>
function func1(self){
console.log(self.id)
}
//jquery下是$(self), 这种方式this参数必须填写;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
//jquery下是$(this), 这种方式不需要this参数;
}
</script>
onload：
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<script> // window.onload=function(){ // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // }; function fun1() { var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; } </script> <body onload="fun1()"> <p id="ppp">hello p</p> </body>
onsubmit:
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form>
<script type="text/javascript">
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false;
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault();
}
</script>
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？
事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;"></div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
浙公网安备 33010602011771号