dom应用

Posted 2020-08-03 loewe0202

DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）

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

childNodes只包含一级子节点，不包含后辈孙级以下的节点

DOM节点的类型有很多种 12种

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

元素节点 : 1
属性节点 : 2
文本节点 : 3
属性
元素.attributes : 只读 属性 属性列表集合

元素.children : 只读 属性 子节点列表集合
标准下：只包含元素类型的节点
非标准下：只包含元素类型的节点
元素.firstChild : 只读 属性 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点
元素.lastChild || 元素.lastElementChild 最后一个子节点
元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

元素.parentNode : 只读 属性 当前节点的父级节点
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

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

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

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

width height
style.width : 样式宽
clientWidth : 可视区宽 样式宽 + padding (不含margin值)
offsetWidth : 占位宽 样式宽 + padding + border => 可视区宽 + 边框

function getPos(obj) {

    var pos = {left:0, top:0};

    while (obj) {
        pos.left += obj.offsetLeft;
        pos.top += obj.offsetTop;
        obj = obj.offsetParent;
    }

    return pos;

}        

元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值
元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
1.用.和[]的形式无法操作元素的自定义属性
2.getAttribute可以操作元素的自定义属性