dom 兼容性问题1_节点部分

AS : ECMAScript 

xml 、 html 

js组成： 

1，ECMAScript : 是Javascript的核心标准、同时也是一个解释器。 

2，DOM： document object model 文档对象模型 

html dom / xml dom 

document.getElementById(); 

document.getElementsByTagName(); 

oDiv.getElementsTagName(); 

oDiv.style.width 

oDiv.innerHTML 

getComputedStyle() / obj.currentStyle 

dom 是关于如何创建、添加、修改或者删除页面元素的标准。 

所以与页面相关的操作都属于 dom 操作。 

3，BOM ： browser object model 浏览器对象模型 

到目前还没有一个实质性的标准规范。

dom节点是dom中最基本的组成单元。

层级方式划分 ： 父节点 、 子节点 、 兄弟节点

类型方式划分 ：元素节点、属性节点、文本节点、注释节点、document节点

层级方式划分 ： 父节点 、 子节点 、 兄弟节点

父子节点是上下两层节点之间的关系。

当前节点上面的所有节点都统称为 祖先节点。

当前节点下面的所有节点都统称为 子孙节点。

childNodes : 子节点。 有兼容问题 标准属性

标准浏览器下：会把代码中的换行符解析成空白文本节点。

children : 子节点 非标准属性

不会把换行符解析成空白文本节点

 

查看变量类型 ： typeof 运算符

类型方式划分 ：元素节点、属性节点、文本节点、注释节点、document节点

查看节点类型： nodeType 属性

查看节点名称 ： nodeName 属性

查看节点的值： nodeValue 属性

nodeType ： 1 2 3 8 9

1 元素节点

2 属性节点

3 文本节点

8 注释节点

9 document节点

温馨提示：标签嵌套应该遵循规则。

----------------------------------------------------------------------------------------

firstChild : 第一个子节点 在标准和ie9下会获取到空白文本节点。

firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。

lastChild : 最后一个子节点 在标准和ie9下会获取到空白文本节点。

lastElementChild : 标准下获取最后一个子元素节点，ie6/7/8不支持。

nextSibling：下一个兄弟节点 在标准和ie9下会获取到空白文本节点。

nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。

previousSibling：上一个兄弟节点 在标准和ie9下会获取到空白文本节点。

previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持。

 1. parentNode : 当前节点的上一层节点（父节点）。

 

 

---------------------------------------------------------------------------------------

封装函数

function getPrev( obj ){

if( !obj || !obj.previousSibling ) return null;

//先处理参数为假或者兄弟节点不存在的情况。

return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling );

}

function getNext( obj ){

if( !obj || !obj.nextSibling ) return null;

//先处理参数为假或者兄弟节点不存在的情况。

return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling );

}

function getFirst( obj ){

if( !obj || !obj.firstChild ) return null;

return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild );

}

function getLast( obj ){

if( !obj || !obj.lastChild ) return null;

return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild );

}