如鹏网学习笔记DOM

Posted 2020-10-03 半路和尚

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>