Dom
DOM
1.什么是DOM------------Document Object Model 文档对象模型
作用：DOM是为JS操作浏览器的页面效果提供的一种介质对象.
作用范围：HTML文档和XML文档
2.两个概念--------------节点和节点层次
节点：页面中的所有内容都是节点(标签---文字---注释----脚本----DTD声明)
节点层次: 节点之间的关系
3.Node类型 (节点类型)---浏览器中所有节点的基本类型，任何节点都是由该节点创建的
4.JS中用Node类型制作的12种节点类型实例（重要的四个）
ELEMENT_NODE--------1 元素节点
ATTRIBUTE_NODE------2 属性节点
TEXT_NODE---------------3 文本节点
DOCUMENT_NODE------9 文档节点
5.节点描述属性
nodeName节点名称
元素节点：大写的标签名===属性节点：属性名称====文本节点：#text====文档节点：#document
nodeType 节点类型
元素节点：1============属性节点：2==========文本节点：3=====文档节点：9
nodeValue 节点值
元素节点：null==========属性节点：属性值======文本节：文本的内容=====文档节点：null
6.节点关系属性
firstChild 获取当前节点的第一个子节点 (元素节点)
lastChild 获取当前节点的最后一个子节点 (元素节点)
childNodes 获取当前节点的所有子节点(复数)
nextSibling 获取当前节点的下一个兄弟节点
previousSibling 获取当前节点的上一个兄弟节点
parentNode 获取当前节点的父节点
注意：在IE浏览器中会忽略元素节点之间的空白文本节点，而非IE浏览器都不会忽略
7.兼容性处理:
var nextBrother=baby.nextSibling.nodeType==1?baby.nextSibling:baby.nextSibling.nextSibling;
8.节点关系属性图
9.节点的操作方法:
hasChildNodes() 检测某个节点是否具有子节点
appendChild() 在节点的子节点列表最后插入一个新节点
insertBefore() 在节点的子节点列表指定节点之前插入一个新节点
replaceChild() 使用新的节点替换指定的子节点
removeChild() 删除节点的指定子节点
cloneNode() 克隆任意节点
节点的操作方法:
hasChildNodes() 检测某个节点是否具有子节点
格式：节点.hasChildNodes()
返回一个布尔值 true有子节点 false 没有子节点
appendChild() 在节点的子节点列表最后插入一个新节点
格式：节点.appendChild(新的节点);//新节点需要先创建
insertBefore() 在节点的子节点列表指定节点之前插入一个新节点
格式：节点.insertBefore(新节点,位置节点);
replaceChild() 使用新的节点替换指定的子节点
格式：节点.replaceChild(新节点，被替换的节点)
removeChild() 删除节点的指定子节点
格式：节点.removeChild(子节点)
cloneNode() 克隆任意节点
格式：节点.cloneNode() 克隆节点
格式：节点.cloneNode(true) 克隆节点及其子节点
Document节点类型：
文档节点在JS中无需查找，直接就可以使用document进行访问，这是文档的入口
属性：
documentElement 表示页面的HTML标签 //document.documentElement.nodeName
如果在部分浏览器中无法使用该属性可以通过document的子节点方式来查找或
者查找元素的方式获取.
body 获取当前当前页面的body节点 //document.body.nodeName
doctyp 获取页面的DTD声明节点 低版本IE不支持 //document.doctype
title 获取页面的标题值 也可以设置值
URL 获取当前页面的URL地址
domain 获取当前页面的域名
cookie 获取当前浏览器存储的Cookie值
如果需要JS操作cookie 可以搜索 getCookie函数
方法：
getElementById() 通过ID来查找指定的元素节点
getElementsByTagName() 通过标签名来查找指定的元素节点的集合
getElementsByName() 通过name属性来获取指定的元素节点的集合.
createElement() 创建一个元素节点 //var ul=document.createElement('ul');
createAttribute() 创建一个属性节点 //var id1=document.createAttribute('id');
createTextNode() 创建一个文本节点 // var txt1=document.createTextNode('111111111');
open() 打开一个新的文档流
write() 向文档中输入文档流
writeln() 向文档中输入文档流 每次输入后会追加\n
close() 关闭一个文档流
Element元素节点：
成员属性：
tagName: 返回当前元素节点的名称 // console.log(username.tagName);//INPUT
attributes ：返回当前元素节点的属性节点集合 //console.log(username.attributes);
//NamedNodeMap {0: type, 1: name, 2: id, 3: value, length: 4, getNamedItem: function..}
成员方法：
getAttribute() 获取元素的指定名称属性值// console.log(userpass.getAttribute('name'));//userpass
setAttribute() 设置元素指定名称属性的值
// console.log(username.setAttribute('value','machong'));//machong
removeAttribute() 移除指定名称的属性// console.log(sex.removeAttribute('type'));
注意： 对于元素节点的操作除了使用DOM之外还可以使用HTML DOM HTML DOM 是专门用于操作HTML代码使用的DOM，兼容性和方法都比较快捷方便.
快捷操作：
1.在页面中每一个具有ID的元素，在JS中都具备一个同名的变量表示当前id所在的元素节点
2.标签->DOM->对象 三者之间具有统一的关系
HTML(元素/标签) ->DOM(元素节点)->JS(对象)
HTML(文本内容)->DOM(文本节点) -> JS(对象)
HTML(注释)->DOM(注释节点)->JS(对象)
....
在HTML页面中出现的元素会变为JS的对象，元素的属性会变为JS对象的成员属性
3.特殊的属性名：
class -> className
style -> 获取的结果不是一个字符串而是一个CSS属性集合对象
Attribute节点：
属性节点的操作都是通过元素节点的attributes属性找到对应的属性节点集合(节点列表)，然后就可以查找到对应的属性节点，也可以使用属性节点的方法.
getNamedItem() 获取指定名称的属性节点
格式：元素节点.attributes.getNamedItem(‘节点名称’);
setNamedItem() 添加或者修改某个元素节点的属性节点
格式：元素节点.attributes.setNamedItem(属性节点);
removeNamedItem() 移除某个指定的属性节点
格式：元素节点.removeNamedItem(‘节点名称’);
TextNode文本节点：
appendData() 在文本节点的最后插入内容
格式：文本节点.appendData(内容)
deleteData() 在指定位置删除指定长度的文本内容
格式：文本节点.deleteData(位置,长度)
insertData() 在指定的位置插入指定的内容
格式：文本节点.insertData(位置,内容)
replaceData() 使用新内容替换指定位置的指定长度
格式：文本节点.replaceData(位置，长度，内容);
splitText() 切割文本节点 把一个节点切割成N个文本节点
格式：文本节点.splitText(位置)
substringData() 文本节点的内容切割方法
格式：文本节点.substringData(位置，长度)
document.normalize() 文本节点正常化
格式:document.normalize()
HTML5及DOM2.3扩展。
innerHTML
获取/设置元素内部所有的内容，包括文本，标签注释等...解析HTML标签
innerText / textContent
获取/设置元素内容的文本内容，该方法设置时不解析HTML标签
outerHTML
获取当前元素和元素内容的所有内容，包括文本、注释、标签等。。可以解析HTML标签效果.
outerText
获取当前元素和元素内部的所有文本内容，但是效果和innerText一样
节点新增的属性：关系属性。
firstElementChild 获取元素的第一个子元素节点
lastElementChild 获取元素的最后一个子节点
nextElementSibling获取下一个兄弟元素节点
previousElementSibling获去上一个兄弟元素节点
ChildElementCount 获取某个元素的子元素节点个数
children获取元素所有子元素节点的列表
新的获取元素的方法：
getElementsByClassName() 通过元素的class属性来获取节点集合
格式1：document.getElementsByClassName() 全文档查找
格式2: 元素节点.getElementsByClassName() 元素内部查找
getElementsByTagName() 通过元素的标签名来会获取属性节点集合
格式1：document.getElementsByTagName() 全文档查找
格式2: 元素节点.getElementsByTagName() 元素内部查找
querySelector() 通过CSS选择器来查找所有符合当前选择器的元素，但是返回第一个。
querySelectorAll() 通过CSS选择器来查找所有符合当前选择器的元素，返回所有符合当前选择器的数组.
事件机制
1.事件---在页面中对内容或者控件的任意操作
2.事件流机制 a)事件执行的流程就是事件流 b)事件流的分类:冒泡流 / 捕获流
捕获流是网景公司提出的 冒泡流是微软公司提供的
3.W3C的标准事件流：（DOM2阶段提出） 1.事件流的捕获阶段 2.处于事件阶段 3.事件流的冒泡阶段
4.事件的注册和删除 1.DOM0 标准 2.DOM2标准
DOM0阶段:
添加方法：方法1:<div onclick="show()"></div>
方法2:元素节点.onclick=function(){函数体}
删除方法：元素节点.onclick=null;
DOM2阶段:
IE中事件的添加和删除
attachEvent() 格式：元素节点.attachEvent(on事件类型,事件方法)
参数1：事件类型 必须写on
参数2：事件方法，推荐使用声明函数，因为删除时还需使用该函数
detachEvent() 格式： 元素节点.detachEvent(on事件类型,事件方法)
参数1：事件类型 必须写on
参数2：事件方法，推荐使用声明函数，因为删除时还需使用该函数
非IE中事件的添加和删除
addEventListener()
格式:元素节点.addEventListener(事件类型,事件方法,布尔值)
参数1：事件类型 没有on
参数2：事件方法，推荐使用声明函数，因为删除时还需要使用该函数
参数3：指定事件发生的阶段，true捕获 false冒泡，一般使用false 为兼容IE
removeEventListener()
格式:元素节点.addEventListener(事件类型,事件方法,布尔值)
参数1：事件类型 没有on
参数2：事件方法，推荐使用声明函数，因为删除时还需要使用该函数
参数3：指定事件发生的阶段，true捕获 false冒泡，一般用false为了兼容IE
事件的类型：
JavaScript事件列表 | ||
事件 | 解说 | |
一般事件 | onclick | 鼠标点击时触发此事件 |
ondblclick | 鼠标双击时触发此事件 | |
onmousedown | 按下鼠标时触发此事件 | |
onmouseup | 鼠标按下后松开鼠标时触发此事件 | |
onmouseover | 当鼠标移动到某对象范围的上方时触发此事件 | |
onmousemove | 鼠标移动时触发此事件 | |
onmouseout | 当鼠标离开某对象范围时触发此事件 | |
onkeypress | 当键盘上的某个键被按下并且释放时触发此事件. | |
onkeydown | 当键盘上某个按键被按下时触发此事件 | |
onkeyup | 当键盘上某个按键被按放开时触发此事件 | |
页面相关事件 | onabort | 图片在下载时被用户中断 |
onbeforeunload | 当前页面的内容将要被改变时触发此事件 | |
onerror | 出现错误时触发此事件 | |
onload | 页面内容完成时触发此事件 | |
onmove | 浏览器的窗口被移动时触发此事件 | |
onresize | 当浏览器的窗口大小被改变时触发此事件 | |
onscroll | 浏览器的滚动条位置发生变化时触发此事件 | |
onstop | 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 | |
oncontextmenu | 当弹出右键上下文菜单时发生 | |
onunload | 当前页面将被改变时触发此事件 | |
表单相关事件 | onblur | 当前元素失去焦点时触发此事件 |
onchange | 当前元素失去焦点并且元素的内容发生改变而触发此事件 | |
onfocus | 当某个元素获得焦点时触发此事件 | |
onreset | 当表单中RESET的属性被激发时触发此事件 | |
onsubmit | 一个表单被递交时触发此事件 | |
事件对象：
用于存储和事件操作相关信息的一个对象。
在IE和非IE中事件对象是不一样的.
IE 在window对象中有一个event属性 window.event
非IE 在事件方法的第一个参数传入
兼容性解决方案：
var e=window.event?window.event:evt;
var e=window.event || evt;
鼠标 / 键盘属性
属性 | 描述 | IE | F | O | W3C |
返回当事件被触发时，"ALT" 是否被按下。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，哪个鼠标按钮被点击。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，鼠标指针的水平坐标。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，鼠标指针的垂直坐标。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，"CTRL" 键是否被按下。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，"meta" 键是否被按下。 | No | 1 | 9 | Yes | |
返回与事件的目标节点相关的节点。 | No | 1 | 9 | Yes | |
返回当某个事件被触发时，鼠标指针的水平坐标。 | 6 | 1 | 9 | Yes | |
返回当某个事件被触发时，鼠标指针的垂直坐标。 | 6 | 1 | 9 | Yes | |
返回当事件被触发时，"SHIFT" 键是否被按下。 | 6 | 1 | 9 | Yes |
IE 属性
除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：
属性 | 描述 |
cancelBubble | 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 |
fromElement | 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 |
keyCode | 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue | 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 |
srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
toElement | 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 |
x,y | 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。 |
标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性。
属性 | 描述 | IE | F | O | W3C |
返回布尔值，指示事件是否是起泡事件类型。 | No | 1 | 9 | Yes | |
返回布尔值，指示事件是否可拥可取消的默认动作。 | No | 1 | 9 | Yes | |
返回其事件监听器触发该事件的元素。 | No | 1 | 9 | Yes | |
返回事件传播的当前阶段。 |
|
|
| Yes | |
返回触发此事件的元素（事件的目标节点）。 | No | 1 | 9 | Yes | |
返回事件生成的日期和时间。 | No | 1 | 9 | Yes | |
返回当前 Event 对象表示的事件的名称。 | 6 | 1 | 9 | Yes |
标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
方法 | 描述 | IE | F | O | W3C |
初始化新创建的 Event 对象的属性。 | No | 1 | 9 | Yes | |
通知浏览器不要执行与事件关联的默认动作。 | No | 1 | 9 | Yes | |
不再派发事件。 | No | 1 | 9 | Yes |
