9-1 钟申义 日志

DOM可以干五件事，包含：增、删、改、查和事件绑定

document 根节点

节点对象三大属性 nodeType nodeName nodeValue

节点的类型，nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值

包含：

文档节点：document //9

元素节点：element //1

属性节点：attribute //2

文本节点：text //3

问题：无法进一步判断元素的名称

节点名称，进一步判断元素的名称

包含：

文档节点：document // #document

元素节点：element // 全大写标签名，例如：“BODY/HEAD”

属性节点：attrribute // 属性名，例如：“href”

文本节点：text // #text

节点值

包含：

文档节点：document // null

元素节点：element // null

属性节点：attribute // 属性值，例如：“#”

文本节点：text // 文本内容

构建DOM树(先在头脑中构建DOM树)

DOM操作流程 查找触发事件的元素

绑定事件处理函数

document.documentElement 获取html中包含的所有内容

document.head 获取head中包含的所有内容

document.body 获取body中包含的所有内容

document.forms[i] 获取页面中所有的表单元素

节点树

父子

elem.parentNode 获得当前节点的父节点 elem.childNodes 获得当前节点下的直接子节点的集合，返回一个类数组对象包含该父节点下所有直接子节点 elem.firstChild 获得当前节点下的第一个直接子节点 elem.lastChild 获得当前节点下的最后一个直接子节点

兄弟

elem.previousSibling 获得当前节点的前一个平级兄弟节点 elem.nextSibling 获得当前节点的后一个平级兄弟节点

节点树优点 网页结构完整

节点树问题 我们在写代码的时候为了代码格式，会添加很多空格，缩进，换行，这些都是字符。在节点树中，字符也是节点对象，称为 " #text " 。这些看不见的文本节点，会极大的妨碍正常的查找

元素树

仅包含元素节点的树结构，不是一棵新树，仅是节点树的子集

elem.parentElement 获得当前元素的父元素(因为能当父元素的通常都是元素节点，所以也可以用parentNode代替)

elem.children 获得当前元素下的直接子元素的集合，返回一个类数组对象包含该父元素下所有直接子元素（IE8+）

elem.firstElementChild 获得当前元素下的第一个直接子元素

elem.lastElementChild 获得当前元素下的最后一个直接子元素

elem.previousElementSibling 获得当前元素的前一个平级兄弟元素

elem.nextElementSibling 获得当前元素的后一个平级兄弟元素

优点 不包含看不见的文本节点，不干扰查找

缺点 不包含一切文本节点，如果想获取文本可用 “ elem.innerHTML ”获取文本 实例：elem.innerHTML 兼容性问题：IE9+

childNodes和children的区别

childNodes和children都返回动态集合（live collection），不实际存储数据，每次访问集合，都是重新查找DOM树

优点：首次查找返回速度快

缺点：反复访问集合，会导致反复查找DOM树

遍历：for(var i=0,len=children.length;i<len;i++)

区别：

childNodes是标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。可以通过nodeType判断是哪种类型的节点；

children是非标准属性，返回指定元素的子元素集合。但是它只返回HTML几点，甚至不返回文本节点，虽然不是标准的DOM属性，但是却得到几乎所有浏览器的支持

按HTML查找（4个特征）

按ID查找

var elem=document.getElementById("id")

只能用document调用，不能换成其他元素，使用document意为在整个网页范围内查找；

只能找到一个元素对象，如果找不到返回null，如果不小心两个HTML元素id名相同，则 getElementById只能返回第一个找到的元素

问题

按id查找一次只能找一个元素对象，无法同时找多个元素对象；

网页中标有id的元素并不多，因为没有那么多英文单词名字可用

按标签名查找

var elems=parent.getElementsByTagName("标签名")

可在任意父元素下查找。主语是哪个父元素，就只在哪个父元素内查找符合条件的元素；

返回多个符合条件的元素组成的类数组对象，也是动态集合，如果找不到，返回空类数组对象:{ length:0 }；

getElementsByTagName()不仅查找直接子元素，而是在所有后代中查找符合条件的元素

按class

var elems=parent.getElementsByClassName("class")

可以在任意父元素上调用，控制查找的范围；

返回类数组对象，也是动态集合，如果没找到，返回空类数组对象{ length:0 }；

不只是在直接子元素中查找，而是在所有后代子元素中查找符合条件的元素；

如果一个元素有多个class修饰，而查找时，只要用其中一个class，就能找到该元素

兼容性问题：IE9+

按name

var elems=document.getElementsByName("name")

只能在document上调用；

返回类数组对象，也是动态集合，如果没找到，返回空类数组对象{ length:0 }；

因为只有表单元素才会有name属性，所以，getElementsByName几乎专门用于查找指定name属性的表单元素

按选择器查找（Selector API）

可在任意父元素上调用； 返回类数组对象,但是是非动态集合； 受制于浏览器对选择器的兼容性(IE8+)； “ () ”中的选择器，是相对于“ . ” 前的父元素下的相对选择器，而不是完整的选择器

var elem=parent.querySelector("selector") var elems=parent.querySelectorAll("selector")

返回值总结

如果该函数规定只返回一个元素对象，则如果找不到，都返回null(getElementById、querySelector)

.如果该函数规定会返回一个类数组对象，则如果找不到，都返回空类数组对象:{ length: 0 }

易用性

按HTML繁琐；

selector API简单

修改元素

elem.innerHTML 获取或设置开始标签到结束标签之间的原始的html代码片段，获取元素的HTML内容时，返回原始的HTML代码内容，修改元素的HTML内容时，先将新的HTML代码内容提交给浏览器解析后，再显示在元素内部 p.innerHTML="hello world"

elem.textContent 获取或设置开始标签到结束标签之间的纯文本内容，获取元素的纯文本内容时，textContent会去掉内嵌标签，还会将特殊符号翻译为正文，修改元素的纯文本内容时，不会将新内容交给浏览器解析，而是直接原样显示在元素内部 p.textContent=“hello world”

elem.innerText innerText用法同textContent一样，只不过具有兼容性要求(IE8+)

elem.value 获取或修改表单元素的值 注意：获取表单元素的值不能用 “.innerHTML"，因为表单元素多数是单标记，没有innerHTML，表单元素的内容都是用“.value”属性来获取或修改的

对比innerHTML

innerHTML设置文本的时候是去掉所有标签，只显示文本，同时翻译转义字符为正文，而textContent是我们写的是什么就显示什么

心得

太快了，起飞了！