DOM节点操作以及DOM中的事件

DOM：全称Document Object Model 文档对象模型
js操作html、xml文档的api
1998年10月
IE中的DOM对象是以COM对象的形式实现的
节点：Node–构成HTML文档最基本的单元
常用节点分为四类
1.文档节点：整个HTML文档
2.元素节点：HTML文档中的HTML标签
3.属性节点：元素的属性
4.文本节点：HTML标签中的文本内容
节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

实例化
1. 通过dom拿到我们想要的节点

var myDiv = document.getElementById("myDiv");
console.log(myDiv);
var div1 = document.getElementById("div1");
console.log(div1);

2. 通过dom创建节点

// 创建一个li节点
var node = document.createElement("LI");
// 创建一个text节点
var textNode=document.createTextNode("Hello");
// 将text节点追加到li节点上
node.appendChild(textNode);
// 找到id为myDiv的节点
var myDiv = document.getElementById("myDiv");
// 将刚刚创建的node节点追加为myDiv的子节点
myDiv.appendChild(node);

1.Document类型
表示整个html文档
属性

body 直接指向body元素
html 获取html头部内容
title 获取文档标题
doctype 获取<!DOCTYPE>兼容性不太强 很少用
URL 获取完整的URL
domain 获取域名
referrer 获取链接到当前页面的那个页面的url
images 获取页面所有的img对象 返回值：HTMLCollection
forms 获取所有的form表单对象 返回值：HTMLCollection
links 获取文档中带有href属性的a元素

方法

getElementById("")
作用：通过元素的id获取元素节点
调用者：
参数：想要获取的元素id
返回值：找到的第一个元素，如果没有，返回null
getElementsByClassName("")
作用：通过元素的class name获取节点
调用者：document
参数：为一个字符串 表示元素的类名 可以由空格隔开
返回值：HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByTagName("")
作用：通过元素的元素名(标签名)找到对应的元素
调用者：document
参数：为一个字符串 表示元素的元素名(标签名)
返回值：HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByName("")
作用：通过元素的name属性找到对应的元素
调用者：document
参数：为一个字符串 表示元素name
返回值：NodeList list 包含一个或多个元素 可以使用数组的操作方式去处理结果

2.Element类型
属性

id 元素在文档中的唯一标识符
calssName 与元素的class特性相对应 可以重复 可以有多个 用空格分隔
title 与元素相关的附加说明信息
src
alt
获取或设置属性
设置属性：
node.calssName=“two”;//设置类名
node.setAttribute(“class”,“three”);//设置类名的第二种方式
setAttribute();
作用：给获取到的元素设置属性
调用者：要设置属性的元素
参数：两个参数 属性名 对应的值
返回值：
注意点：要设置的值存在的话，修改原来的值 不存在的话，添加

获取属性：
node.getAttribute(“class”)
作用：获取到相应元素的某个属性
调用者：元素
参数：属性名
返回值：对应的属性值
移除属性
myDiv.removeAttribute(“id”);
作用：移除相应元素的某个属性
调用者：元素
参数：属性名
返回值：
注意点：

创建元素

createElement();
作用：创建一个dom节点
调用者： document
参数：一个参数，要创建元素的标签名 在html中不区分大小写 但是XML中区分大小写
返回值：
注意点：要设置的值存在的话 修改原来的值 不存在的话，添加
var node = document.createElement(“LI”);
// 创建一个text节点
var textNode = document.createTextNode(“Hello”);
// 将text节点追加到li节点上
node.appendChild(textNode);

兄弟、孩子节点属性
firstElementChild 某个节点的第一个孩子元素节点
lastElementChild 某个节点的最后一个孩子元素节点
nextElementSibling 某个节点的下一个兄弟元素节点
previousElementSibling 某个节点的上一个兄弟元素节点
childElementCount 该节点子元素的数量
innerHtml 该元素的内容
textContent 该元素内部的text

innerHtml和innerText的异同点
都能获取和改变元素里面的内容
innerHtml:识别html标签 w3c标准 保留空格和换行的
innerText:不识别html标签 非标准 去除空格和换行
这两个属性是课读写的 可以获取元素里面的内容
3. Text类型

方法	作用	调用者	参数	返回值
length	文本长度
appendData()	追加文本	文本节点	要追加的文本内容	追加后的文本
deleteData()	删除文本	文本节点	两个参数(index_start，count)	删除后的文本
insertData()	插入文本	文本节点	两个参数(index_start，要插入的文本)	插入后的文本
replaceData()	替换文本	文本节点	三个参数(index_start，count，替换的文本)	替换后的文本
splitText()	将一个文本节点分为两个	文本节点	分割点的位置	分割好的后面的文本节点
substringData()	提取文本节点中的字符串	文本节点	两个参数(index_start，count)	提取出来的字符串，(不改变原文本)
createTextNode()	创建一个文本节点	document	文本内容	text

insertDate();
var textNode = document.createTextNode(“hello,”);
textNode.insertData(6, “world!”)

replaceData();
var textNode = document.createTextNode(“hello,”);
textNode.replaceData(0, 2, “-”); // “-llo,”

splitText();
var textNode = document.createTextNode(“helloworld”);
console.log(textNode); // “hello”
console.log(textNode.splitText(5)); // “world”

substringData();
var textNode = document.createTextNode(“helloworld”);
console.log(textNode.substringData(0, 5)); // hello
console.log(textNode); // “helloworld”

createTextNode();
注意点： var textNode = document.createTextNode(“helloworld”);

4. Comment类型

注释：
html
CSS /* /
JS // / */
方法：
createComment();
作用：创建注释节点
var cNode = document.createComment(“这是一个注释”);

DOM节点操作的方法

1. 创建节点
document.createElement("TagName");
// var myDiv = document.createElement('div');
2. 给节点添加文本内容
// myDiv.innerText = "这是新创建的div";
// 3. 找到页面上的一个节点
var rootDiv = document.getElementsByTagName("div")[0];
// console.log(rootDiv);
// 4. 将myDiv追加到rootDiv上
rootDiv.appendChild(myDiv);

常用方法：

1.appendChild()
父节点.appendChild(新的子节点);
作用：将节点作为子节点追加到调用它的节点的后面
调用者：父节点
参数：要追加的新节点
注意：任何dom节点不能同时出现在文档的多个位置，如果追加的节点是原本存在的，那只会改变节点位置

2.insertBefore();
父节点.insertBefore(新节点，旧节点);
作用：将新的节点插入到之前某一个节点的前面
调用者：父节点
参数：要插入的新节点，旧节点

3.removeChild()
父节点.removeChild(要删除的子节点);
作用：删除某个子节点
调用者：父节点
参数：要删除的子节点
// rootDiv.removeChild(childNode);
4. replaceChild()
父节点.replaceChild(新节点，旧节点);
作用：使用指定的子节点替换已有的新节点

5.cloneNode（）
要复制的节点自身.cloneNode(boolean);
作用：复制节点
调用者：要复制的节点自身
参数：一个可选参数 boolean 默认为false 浅克隆 只复制标签
如果为true 那就是深克隆 会复制标签和内容
// var cloneChildNode = childNode.cloneNode(true);

事件

事件就是文档或浏览器窗口中发生 的一些特定的交互瞬间
事件三要素
事件源：事件被触发的对象
事件处理程序：通过一个函数赋值的方式完成
事件类型：如何触发 什么触发 （点击，按下等）
执行事件步骤： 1.获取事件源
2.绑定事件
3.添加事件处理程序
事件流（页面接收事件的顺序）

1. 事件冒泡
   特点：从内往外传递
   事件由一个具体的元素接收，然后又逐步传递到不具体的节点(当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发)
   注意：元素需要嵌套，每层元素都绑定事件
   阻止事件冒泡event.stopPropagation();在哪个元素要阻止就在哪个元素里添加
2. 事件捕获
   特点：从外往内传递
   事件由不太具体的节点接收到，然后传递到具体的节点上

事件处理程序
事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头
作用：绑定事件
例如：onclick，onmouseover，onload …
节点：可以是div 也可以是button
1.非IE事件处理程序

addEventListener()
 作用：绑定事件监听器
 参数：
    1. 事件类型（click mouseover 等）
    2. 事件处理函数 当绑定的事件被触发时 要执行的操作
    3. boolean？ 用来决定事件流类型 事件冒泡false  事件捕获true 

removeEventListener()
作用：移除事件
参数：
    1. 事件名
    2. 事件处理函数 
    3. boolean？ 事件冒泡false  事件捕获true 

2.IE事件处理程序

 attachEvent()
     作用：事件绑定
     参数： 事件处理程序名称
           事件处理函数
 detachEvent()
     作用：事件移除 
     参数：事件处理程序名称
          事件处理函数
          事件处理程序都被添加到冒泡阶段   

事件对象 event
在触发DOM的某个事件时 会产生一个事件对象 event
这个包含所有与事件相关的信息
浏览器默认会把event传入到事件处理函数中
event对象的属性都是只读属性

属性	类型	说明
type	String	事件类型，需要一个函数，处理多个事件时，可使用该属性
bubbles	Boolean	事件是否冒泡
cancelable	Boolean	是否可取消事件默认行为
target	Element	事件目标

事件类型
1.鼠标事件

	触发条件
click	点击鼠标的主按钮 点击触控板
dblclick	双击鼠标的主要按钮
mousedowm	任意鼠标按钮按下时触发
mouseup	任意鼠标按钮抬起（释放）时触发
mousemove	鼠标在元素内部移动时会重复触发
mousewheel	滚轮事件
mouseover	鼠标位于元素外部，将其首次移入另一个元素边界之内时触发（支持子元素）
mouseenter	鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素）
mouseout	在位于元素上方的鼠标光标移入到另外一个元素中（支持子元素）
mouseleave	在位于元素上方的鼠标光标移动到元素范围之外时触发（不支持资源）

2.焦点事件

	触发条件
blur	元素失去焦点的时候触发
focus	元素获得焦点的时候触发，不支持冒泡

3.UI事件

	触发条件
load	在页面完全加载后会在window上触发这个事件，如果是图像加载完成后 会在img元素上触发window.onload
unload	在页面完全卸载后会在window上触发这个事件
select	当用户选择文本框中的字符时会触发
resize	当浏览器窗口被调整宽高时会触发 会重复触发
scroll	滚动条滚动时会触发 会重复触发

4.键盘事件

	触发条件
keydown	按下键盘任意键触发 如果按住不放会重复触发
keypress	按下键盘字符键触发
keyup	释放按键时触发

事件代理
将事件绑定当前元素的父元素上，这时候点击当前元素时，就会执行父元素上绑定的事件处理函数
好处：父元素代理子元素的事件，子元素可以动态添加，不用频繁的去绑定事件
可以通过 event.target 获得当前元素