DOM文档对象模型

DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义为了能够让程序(js)去操作页面中的元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点

getElementById
getElementByTagName
document
document.body

1.childNodes和children

元素.childNodes :只读属性子节点列表集合
标准下:包含文本和元素类型的节点,也会包含非法嵌套的子节点
非标准下(ie9以下):包含元素类型的节点,ie7以下不包含非法嵌套子节点

childNodes只包含一级子节点,不包含后辈孙级以下的节点
不推荐使用

DOM节点类型有很多种 12种

元素.nodeType :只读属性当前元素的节点类型

元素节点 nodeType 1
文本节点 nodeType 3
属性节点 nodeType 2

元素.attributes : 只读属性属性列表集合
oUl.attributes.length
name value nodeType

元素.children : 只读属性子节点列表集合
标准下:只包含元素类型节点
非标准下:只包含元素类型的节点

2.firstChild,lastChild,nextSibling,previousSibling

元素.firstChild : 只读属性第一个子节点
标准下:firstChild包含文本类型的节点
非标准下:只包含元素节点
元素.firstElementChild :只读属性标准下获取第一个元素类型的子节点

if ( oUl.firstElementChild ) {
        oUl.firstElementChild.style.background = 'red';
    } else {
        oUl.firstChild.style.background = 'red';
    }

var oFirst = oUl.firstElementChild || oUl.firstChild;
    oFirst.style.background = 'red';

问题?ul没有子节点,返回文本节点oUl.firstChild,报错
最好的做法

if ( oUl.children[0] ) {
        oUl.children[0].style.background = 'red';
    } else {
        alert('没有子节点可以设置')
    }

元素.lastChild || 元素.lastElementChild 最后一个子节点

    var oLast = oUl.lastElementChild || oUl.lastChild;
    oLast.style.background = 'yellow';

元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点

    var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
    oNext.style.background = 'blue';

元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

    var oPrev = oLast.previousElementSibling || oLast.previousSibling;
    oPrev.style.background = 'orange';

3.父节点parentNode和offsetParent

元素.parentNode

实例

元素.offsetParent :只读属性当前元素最近的有定位的父节点
如果没有定位父级,默认是body
ie7一下,如果当前元素没有定位,默认是body,如果自身加了定位属性,父级是html,或者触发haslayout的上级元素

4.元素偏移位置

元素.offsetLeft[Top] : 只读属性当前元素到定位父级的距离（偏移值）
到当前元素的offsetParent的距离

如果没有定位父级
offsetParent -> body
offsetLeft -> html

如果有定位父级
ie7以下：
如果自己没有定位，那么offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离
其他：到定位父级的距离

5.元素宽高

style.width 行间值
clientWidth 可视宽度 width+padding
offsetWidth 占位宽可视宽+border

6.获取元素相对页面位置





无标题文档

7.操作元素属性的方式

otext.value 访问赋值 value不可以是变量
otext['value'] 可使用变量

元素.getAttribute() ;方法获取指定元素制定属性值
otext.getAttribute('value') ;
元素.setAttribute() ;方法给指定元素指定的属性设置值
otext.setAttribute('value','hello') ;
元素.removeAttribute(属性名称) 移除元素属性

区别
1.用.和[]无法操作元素自定义属性,非标准下
getAttribute()可以操作自定义属性
.[]src完整路径
getAttribute(src)标准下是src设置值,ie7是绝对路径值
oImg.style.getAttribute('width')标准下报错

8.元素的动态创建

innerHTML开销大,效率
document.createElement('li')
document.createElement(标签名称); 创建元素
父级.removeChild(要删除的元素); 删除元素
父级.appendChild(要添加的元素) 方法追加子元素
父级.insertBefore(新的元素，被插入的元素) 方法在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加

if ( oUl.children[0] ) {
            oUl.insertBefore( oLi, oUl.children[0] );
        } else {
            oUl.appendChild( oLi );
        }

父级.replaceChild(新节点，被替换节点) 替换子节点
appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点