DOM
文档对象模型，浏览器提供给js操作html文档的api
兼容性 IE 程序员噩梦
Object（构造函数）
Node（构造函数）
Document（文档节点） Element（元素节点） Text（文本节点） Comment（注释节点）
属性和方法（）
Node.prototype
属性
nodeType 表示节点的类型
Document--> 9;Element -->1;TextNode -->3;Comment--> 8
nodeName 表示节点的名称
nodeValue 该属性取决于节点类型，如果是元素类型，值有null
childNodes 保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组
parentNode 指向文档树中的父节点
previousSibling 兄弟节点中的前一个节点
nextSibling 兄弟节点中的下一个节点
firstChild childNodes列表中的第一个节点
lastChild childNodes列表中的最后一个节点
ownerDocument 指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中
方法
操作节点
注意：以下四个方法都是需要父节点调用
appendChild(p) 往父元素中添加一个新的节点
insertBefore(p,h) 第一个参数：要插入的元素；第二个参数：参照元素，把p插入到h之前
replaceChild(p,h) 第一个参数：要插入的元素；第二个参数：要替换的元素，用p把h替换掉
removeChild(h) 参数：是要移除的参数，移除h元素
其他方法
cloneNode 克隆一个节点，不会克隆子节点，如果想要克隆子节点，添加参数true
normalize（） 处理文档树中的文本节点，由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点，当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。
Document.prototype
都可以继承Node中的所有属性和方法
属性
documentElement 始终指向HTML页面中的<html>元素。
body 直接指向<body>元素
doctype 访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title 获取文档的标题
URL 取得完整的URL
domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测
referrer 取得链接到当前页面的那个页面的URL，即来源页面的URL。
images 获取所有的img对象，返回HTMLCollection类数组对象
forms 获取所有的form对象，返回HTMLCollection类数组对象
links 获取文档中所有带href属性的<a>元素
方法
查找元素
getElementById() 参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。
getElementsByTagName() 参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
getElementsByName() 参数为元素的name,返回符合条件的NodeList
getElementsByClassName() 参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。
Element.prototype
属性
id 元素在文档中的唯一标识符
title 有关元素的附加说明信息
className 与元素class特性对应
src img元素具有的属性
alt img元素具有的属性
lang 元素内容的语言代码，很少使用！
dir 语言方向，ltr,rtl 左到右，右到左、
<ul>
<li>item1</li>
<li>item2</li>
</ul>
ie8及以下版本浏览器 2个子节点
其他浏览器 5个子节点
style 通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性
onclick 类似的事件处理程序，通过getAttribute()访问时，返回相应代码字符串；访问onclick属性时，返回一个javascript函数
children 类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象
firstElementChild 第一个孩子元素节点
lastElementChild 最后一个孩子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
childElementCount 子元素的数量，返回值和children.length值相等
innerHTML 返回元素内容，包括html标签
innerText 元素内部的文本，去除回车和换行
textContent 元素内部的文本，不去除空格和回车
方法
getAttribute() 获取自定义属性
setAttribute() 设置属性
removeAttribute() 移除属性
document.createElement() 参数为要创建元素的标签名。该标签名在HTML中不区分大小写，但是在XML中区分大小写
text类型
length 文本长度
appendData(text) 追加文本
deleteData(beginIndex,count) 删除文本
insertData(beginIndex,text) 插入文本
replaceData(beginIndex,count,text) 替换文本
splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text) 创建文本节点，参数为要插入节点中的文本
substringData(beginIndex,count) 从beginIndex开始提取count个子字符串
DOM事件
用户使用js和浏览器交互
1）事件三要素
事件源
事件处理函数
事件对象
var btn = document.getElementById("btn")
btn事件源
btn.onclick = function(e){
//事件处理函数
//e事件对象
}
2）绑定事件的方式
1.btn.onclick = function(e){}
2.<div οnclick='handler()'>点我</div>
<script>
function handler(){
}
</script>
3.addEventListener("click",handler) //IE9+ 添加事件
removeEventListener("click",handler) //IE9+ 移除事件
attachEvent("onclick",handler) //IE9- 添加事件
detachEvent("onclick",handler) //IE9- 移除事件
3）事件流
事件冒泡（由内向外）
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
// 事件冒泡
box1.onclick = function(){
console.log('box1')
}
box2.onclick = function(){
console.log('box2')
}
box3.onclick = function(){
console.log('box3')
}
document.body.onclick = function(){
console.log('body')
}
box3 =>box2 =>box1 =>body =>html
事件捕获（由外向内）
事件流分为三个阶段
事件捕获
事件执行
事件冒泡
4）事件处理函数
事件处理函数以on开头
btn.onclick = function(e){
}
5）事件对象
属性 类型 说明
bubbles Boolean 事件是否冒泡
cancelable Boolean 是否可取消事件默认行为
currentTarget Element 事件处理程序当前正在处理事件的那个元素
eventPhase Integer 调用事件处理程序的阶段;1捕获 2处于目标 3冒泡
target Element 事件真正目标
type String 事件类型，需要一个函数，处理多个事件时，可使用该属性。
preventDefault() Function 取消事件的默认行为
stopPropagation() Function 取消事件的进一步捕获或者冒泡
6)事件类型
load 当页面完全加载后在window上触发，当所有框架加载完时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在<object>触发
unload 当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后再<object>上触发,(firefox不支持)
select 当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
change 在select的下拉列表的选中的选项更改的时候触发
resize 当浏览器窗口被调整到一个新的高度或者宽度时，会触发
scroll 当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单
blur 元素失去焦点的时候触发
focus 元素获得焦点的时候触发，不支持冒泡
7）事件代理（事件委托）
将事件绑定在元素的父元素上，通过事件对象的target
var nav = document.getElementById('nav')
nav.onclick = function(e){
// 打印事件对象
console.log(e)
if (e.target.innerHTML === 'html') {
alert('html')
}else if (e.target.innerHTML === 'css') {
alert('CSS')
}else{
alert('javascript')
}
}
2467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
