如鹏网学习笔记（十）DOM
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>
