DOM笔记
一、DOM简介
Document Object Model 文档对象模型
DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点
DOM API 编程接口 可以用来操作页面的任意一部分内容
js+DOM编程的思想:由js基本语法控制程序的执行逻辑,由DOM API进行元素的查找获取,进而再对元素进行增删改等操作
学习DOM,除开学习设计思想外,更多的是学习DOM API的用法
二、document对象
document对象,
是Windows对象的一个属性,
表示整个HTML页面,是DOM的核心对象,
是连接JavaScript和DOM的桥梁,使得我们可以在JavaScript环境中操作页面内容,
提供了查找获取元素节点的方法,所以document是DOM的编程入口,
此外还提供了创建新节点的方法
三、document对象获取对象的方法
1,getElementById(String) 返回 Element 根据元素的id属性值获取元素
2,getElementsByTagName(String) 返回 NodeList数组 根据元素的标签名获取元素
3,getElementsByName(String) 返回 NodeList数组 根据元素的name属性值获取元素
nodeList.length 包含的元素个数
nodeList.item(index) 获取指定索引位置的元素
注意:NodeList是动态更新的,即如果删除的元素也在NodeList里面,那么也同时从NodeList里面删除
四、document创建新元素的方法
document.creatElement(tagName) 根据元素标签名称创建元素节点
五、document添加新元素的方法
1,先创建要添加的元素
var element = document.createElement(tagName)
2,获取要添加元素的节点
var element = document.getElementById(String)
3,使用元素的方法appendChild(node)方法进行添加
六、Element操作元素的属性
有两种方式操作元素的属性
1,直接使用element.属性名 :
var 变量名 = element.属性名;//获取属性值
element.属性名 = 属性值; //给属性赋值
注意:
a,因为class是关键字,所以操作class属性时使用className代替
b,这种方式只能操作HTML标准规定的属性,不能操作自定义属性
c,在js中,操作checkbox、radio的checked属性,select的selected属性值时,使用true或FALSE,表单元素的disable属性也是如此
2,另外三种操作属性,且可操作自定义属性
a,var 变量名 = getAttribute("属性名"); 获取属性值
b,removeAttribute("属性名"); 删除指定属性,没有返回值
c,setAttribute("属性名",“新属性值”); 修改/添加属性
七、Element操作元素的子节点
子节点包括子元素和元素文本内容
element.getElementsByTagName() 根据子元素的标签名获取其内部的子元素
element.innerHTML("要写入的HTML语句"); 以字符串的形式在该子节点内部插入HTML语句
element.insertBefore(newNode,node); 在子节点内部,在指定子节点前插入新子节点
element.appendChild(newNode); 在最后追加子节点
element.removeChild(); 删除指定的子节点
八、操作样式属性
两种方式:
1, element.style CSSStyleDeclaration类型的对象
使用 element.style.属性名 的方式可以直接操作某个样式属性。
如:element.style.backgroundColor="gray";
注意:CSS中样式属性使用“-”连接两个单词,js中使用后面的单词首字母大写的方式连接!!
2, element.className = "另一个className"; 效果:空字符串可以实现删除,可以实现指向另一个类,病通过CSS控制效果的切换
九、DOM事件机制
当浏览器状态改变、用户操作时都会出发一些事件。如:点击了一个按钮,出发了按钮点击的时间,按钮称为事件源
当一个时间被触发时,浏览器就会创建一个event事件对象,这个时间对象包含和此时间相关的 各种信息,如点击时间的时间对象包含点击文字的信息,可供编程者使用
如果希望当一个时间发生时针对这个时间做一些处理,就可以给该时间注册一个事件处理函数,时间触发时,该函数会被调用
常见的事件有以下几类:
1,窗体事件
页面加载完成事件
load 页面加载完成时触发(window对象为事件源)
<script type="text/javascript">
window.onload=function(){
//只有页面加载完成,才可确保id为div01的元素被获取到
var element = document.getElementById("div01");
alert(element);
}
</script>
注意:load是事件的名称,onload是元素的属性,用来给元素注册事件处理函数
2,鼠标事件
1,
onclick、ondblclick 鼠标单击、双击时触发
示例代码:
<script type="text/javascript">
window.onload=function(){
getElementById("div01").onclick=function(){
alert("点到我了");
}
getElementById("div02").ondblclick=function(){
alert("双击到了");
}
}
</script>
onmouseover、onmouseout 鼠标指针经过或者移出元素时触发的事件
onmousemove 鼠标指针移动时触发(进入元素后)
onmousedown、onmouseup 鼠标按键按下、弹起时触发(进入元素后)
2,鼠标事件的event对象包含如下信息:
button 点击的那个鼠标按键(0、1、2)
altKey、ctrlKey、shiftKey 点击时是否同时按下键盘的alt、ctrl、或者shift按键
clientX、clientY 鼠标指针的窗口坐标
screenX、screenY 鼠标指针的屏幕坐标
示例代码:
<script type="javascript">
window.onload=function(){
getElementById("div01").onmousedown=function(){
alert(event.button);//打印出当前事件中鼠标按下的是哪一个按键
alert(event.altKey+event.ctrlKey+event.shiftKey);//打印出当前事件中鼠标按下时是否按了相应的按键
}
}
</script>
3,键盘事件
4,焦点事件
5,页面加载完成事件
onload 页面加载完成时触发(window对象为事件源)
示例代码:
<script type="text/javascript">
window.onload=function(){
var element = document.getElementById("div01");
alert(element);
}
</script>
处理事件的两种方式
1,通过DOM方式把时间处理函数赋值给事件属性(称为注册事件处理函数)
示例代码:
<script type="text/javascript">
window.onload=function(){
document.getElementById("div01").onclick=function(){
alert("这是注册事件处理函数的方式");
}
}
</script>
2,直接在HTML元素标签的事件属性上写要执行的代码
示例代码:
<div onclick="alert(‘这是直接在元素标签的事件属性上写执行方法的方式‘);"></div>
第一种处理方式的优先级大于第二种!!!!!
注意:
如果有个自定义函数fun1,
按照第一种方式的写法为 element.onclick=fun1;//注意是将fun1这个函数的对象(不能带括号),赋值给onclick
按照第二种方式的写法为 onclick=fun1();//在元素的标签里写上函数的调用
十、this的用法
示例代码:
<script type="javascript">
function(){
alert(this);
}
window.onload=function(){
var obj = {"fun1",fun1};
var btn = document.getElementById("btn");
btn.onclick=fun1;
window.fun1();//打印出window对象
obj.fun1();//打印出Object对象
btn.onclick();//打印出button对象
}
</script>
总结:如果this在函数fun1内,函数fun1以哪个对象的属性值的身份去执行,this就表示哪个对象
其他情况如果不容易判断的话就实际测试一下:
示例代码:
<input type="button" onclick="alert(this)"/>//打印出button对象
<input type="button" onclick="fun1()"/>//打印出window对象
十一、给一个事件注册多个事件处理函数
1,注册事件处理函数的方式会覆盖直接编写处理代码的方式,而且同时注册的多个处理函数也会发生覆盖,
这就导致一个事件发生时我们只能做“一件事情”
2,为了可以给一个事件注册多个事件处理函数,DOM提供了另外一种注册方式:
addEventListener("事件名称",处理函数);
示例代码:
<script type="javascript">
div.addEventListener("click",function(){
alert("第三种处理函数方式")
});
</script>
特点:不会发生覆盖,可以同时注册相同的事件
注意:多次注册同一个函数,效果只有一次
3,删除一个处理函数
如果希望将来可以删除某个注册的处理函数,就应该拿到该处理函数的引用。
removeEventListener(事件名称, 处理函数);
示例代码:
<script type="javascript">
var fun1=function(){
alert("第三种处理函数方式");
};
div.removeEventListener("click",fun1});
</script>
十二、事件冒泡
1,由于HTML元素可以嵌套,就不可避免的出现当用户执行一个动作,如点击时,会有多个元素触发点击事件。
为了方便管理,不至于混乱,DOM提供了事件冒泡机制。
事件冒泡:当若干嵌套的元素“同时”被触发某个事件时,最内层元素的事件最先被触发,事件依次向外传递。
示例代码:
<script type="javascript">
window.onload=function(){
var div01 = document.getElementById("div01");
var div02 = document.getElementById("div02");
var div03 = document.getElementById("div03");
div01.onclick=function(){
alert("div01");
}
div02.onclick=function(){
alert("div02");
}
div03.onclick=function(){
alert("div03");
div03.stopProgagation();//取消事件冒泡
}
//当点击最里面的div03时,外层的div02和div01都会触发事件,这就是事件冒泡
}
</script>
2,如果某刻希望取消该事件的冒泡,可以使用event.stopProgagation();
十三、键盘事件
keydown 键盘按键被按下
keyup 键盘按键被弹起
event事件对象的属性:
event.keyCode 被按下的按键的整数编码
十四、取消某些事件的浏览器默认动作
对于某些元素的特点事件,浏览器会有一个默认的动作,如超链接触发点击事件时页面会跳转、表单提交事件被触发时变淡数据会被提交到服务器、键盘按下在输入框输入字符等
DOM提供了两种方式来取消浏览器的默认动作:
1,在我们自己注册的处理函数中执行event.preventDefault();
2,return false;
注意:取消事件的浏览器默认动作和取消事件冒泡是不同的概念
十五、焦点事件
focus 元素获得焦点
blur 元素失去焦点
十六、表单事件
select input(text)、textarea里的文本被选中时触发
change input(text)、textarea的值改变时触发
submit 表单提交时触发(真正把数据提交到服务器前触发)
十七、获得一个元素的坐标的写法
<script type="javascript">
var x = div02.offsetLeft;
var y = div02.offsetTop;
var parent = div02.offsetParent;
while(parent){
x += parent.offsetLeft;
y += parent.offsetTop;
parent parent.offsetParent;
}
</script>