20151127笔记

DOM:文档对象模型,Document Object Model

定义如何获取,删除,添加和修改html元素的标准

DOM分两种:HTML DOM和XML DOM

每一个标签都是一个节点,节点也称之为元素

DOM节点:是DOM结构中最基本的组成单元

按层次划分:父节点,子节点,兄弟节点

父子节点:上下两层关系

兄弟节点:同一级关系

祖先节点:当前节点上面所有节点的统称

子孙节点:当前节点下面所有节点的统称

按类型划分:元素节点,属性节点,文本节点,注释节点,document节点

元素节点:html标签,如p标签,li标签等

属性节点:元素上各种属性,如id,href等

文本节点:文本,特殊符号,换行符,制表符

注释节点:文档中的注释

document节点:特有的document对象

元素节点:1

属性节点:2

文本节点:3

注释节点:8

document节点:9

BOM:Browser Object Model

定义了关于如何修改删除浏览器相关功能的标准

childNodes:获取到某个节点下的子节点,在标准浏览器会获取到空白文本节点,IE6,7,8不会获取文本节点

childen:获取到某个节点下的子节点,只是获取元素节点,所有浏览器都兼容,不是标准的

parentNode:获取当前元素的父节点

element.firstChild:

获取的是element下的第一个子节点,标准浏览器会获取到空白文本节点,IE6,7,8获取的是第一个元素节点

element.firstElementChild:

获取的是element下的第一个子节点,标准浏览器会取到元素节点,IE6,7,8不支持

没有找到元素的情况下,会返回null

对firstChild和firstElementChild,lastChild和lastElementChild,nextChild和nextElementChild,previousChild和previousElementChild的封装.

注意:封装时标准写在前面,非标准写在后面,所以要写成element.firstElementChild || element.firstChild

function first(element){
                var firstElement = element.firstElementChild || element.firstChild;
                if( !firstElement || firstElement.nodeType !== 1 ){
                    return null
                }else{
                    return firstElement;
                }
            };
            function last(element){
                var lastElement = element.lastElementChild || element.lastChild;
                if( !lastElement || lastElement.nodeType !== 1 ){
                    return null
                }else{
                    return lastElement;
                }
            }
            function next(element){
                var nextElement = element.nextElementSibling || element.nextSibling;
                if( !nextElement || nextElement.nodeType !== 1 ){
                    return null
                }else{
                    return nextElement;
                }
            };
            function prev(element){
                var prevElement = element.previousElementSibling || element.previousSibling;
                if( !prevElement || prevElement.nodeType !== 1 ){
                    return null
                }else{
                    return prevElement;
                }
            }