DOM

时间 2019-11-12

标签 dom 栏目 HTML 繁體版

原文原文链接

DOM节点类型

全部内容都是节点，按节点划分经常使用的有
元素节点（1）、
属性节点（2）、
文本节点（3）（包含文字、空格、回车、制表符）、
注释节点（8）、
document节点（9）；

节点特征

nodeType 能够判断节点的类型
nodeName 属性名 （在低版本和火狐浏览器中有兼容问题）
nodeValue 属性值 （在低版本和火狐浏览器中有兼容问题）
offsetParent
offsetLeft         /*
                    *  当前元素的offsetParent的距离 
        *  ie7如下：若是本身没有定位，那么offsetLeft[Top]是到body的距离 
        *  若是本身有定位，那么就是到定位父级的距离
        * 其余：到定位父级的距离
                    */

offsetParent

offsetParent //若是没有定位父级 offsetParent -> body offsetLeft -> html
offsetLeft[Top] //当前元素的offsetParent的距离

1，position为fixed的offsetParent为null，除fixed外，跟自己元素有无定位没有关系,
2，最近的定位外层元素（不论此外层元素是什么定位）
3，若是没有定位外层 offsetParent -> bodyjavascript

<html>
<head>
    <style type="text/css">
        #a00 {  position: relative;  }
        #b00 {  position: relative;  }
        #c00 {  position: fixed; }
        #c01 {  position: absolute; }
        #c02 {  position: relative; }

        #a30{
            /*position: relative;能够*/
            /*position: absolute;能够*/
            position: fixed;
        }
    </style>
</head>
<body>
<div id="a00">
    <div id="b00">
        <div id="c00"></div>
        <div id="c01"></div>
        <div id="c02"></div>
        <div id="c03"></div>
    </div>
</div>

<div id="a30">
    <div id="b30">
        <div id="c30"></div>
    </div>
</div>

<div>
    <div id="b10"></div>
</div>

</body>
<script type="text/javascript">
    /*
     *  定位fixed的元素的offsetParent为null
     *  除fixed外，跟自己元素有无定位没有关系
     */
    console.log(document.querySelector('#c00').offsetParent);//null
    console.log(document.querySelector('#c01').offsetParent);//div#b00
    console.log(document.querySelector('#c02').offsetParent);//div#b00
    console.log(document.querySelector('#c03').offsetParent);//div#b00
    /*
     *  最近的定位外层元素（不论此外层元素是什么定位）
     */
    console.log(document.querySelector('#c30').offsetParent);//div#a30
    /*
     *  若是没有定位外层 offsetParent -> body
     */
    console.log(document.querySelector('#b10').offsetParent);//body

</script>
</html>

属性 class href 自定义 ...

attributes 元素属性列表的集合
setAttribute
getAttribute
removeAttribute
hasAttributes
hasAttribute
hasAttributeNS
1.用.和[]的形式没法操做元素的自定义属性 
2.getAttribute能够操做元素的自定义属性

样式 style

style  $0.style.background='green'

子节点

childElementCount
childNodes 获取全部的子节点(不包含孙级以及如下的节点)
children 只获取元素子节点

firstChild firstElementChild 第一个子节点、
lastChild  lastElementChild 最后一个子节点
hasChildNodes

        firstElementChild与firstChild区别：
       前者低版本不兼容，且在高版本中获取的只是元素节点
       后者都兼容，可是高版本能够获取全部类型的子节点（文本、元素、注释等）、低版本只能够获取类型为元素节点
       故在判断时一般会使用 firstElementChild || firstChild ; 兼容低----->高  新---->旧

兄弟节点

previousSibling  previousElementSibling 上一个兄弟节点、 
nextSibling nextElementSibling  下一个兄弟节点

父节点

parentNode查找父元素节点（当前子元素的）在页面中document是最大的父级
parentElement

建立、插入、删除、替换

建立节点

document.createElement('s')建立s标签    好比兼容h5
    document.createTextNode('s')'s'文本节点

插入

document.body.insertBefore
        document.body.appendChild

删除

经过父元素 document.body.removeChildcss

parentNode.removeChild
被删元素的父元素，经过父元素将其须要删除的子元素删除。
var el = document.getElementById('id');
el.parentNode.removeChild(el);

替换

经过父元素parentNode.replaceChildhtml

function Prev(obj){
        if(!obj || !obj.previousSibling){
            return null;
        }
        return obj.previousSibling.nodeType==1?obj.previousSibling:Prev(obj.previousSibling);//判断元素节点，若是等于1就是元素节点，故而直接返回previousSibling
    }
    
    function Next(obj){
        if(!obj || !obj.nextSibling){
            return null;
        }
        return obj.nextSibling.nodeType==1?obj.nextSibling:Next(obj.nextSibling);
    }

    function First(obj){
        if(!obj || !obj.firstChild){
            return null;
        }
        return obj.firstChild.nodeType==1?obj.firstChild:Next(obj.firstChild);
    }
    
    function Last(obj){
        if(!obj || !obj.lastChild){
            return null;
        }
        return obj.lastChild.nodeType==1?obj.lastChild:Prev(obj.lastChild);
    }

function getPos(obj) {

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

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

    return pos;

}

<a href="sss" id="aaa"></a>

    //函数： 反复执行的代码块
    //全局只有一个对象，防止全局变量污染
    /*
    var $ = {
        ele : {
            tag : function(tag){return document.getElementsByTagName(tag)},
            id : function(id){return document.getElementById(id)}
        },
        css : {
            addStyle : function(){},
            removeStyle : function(){},
            addClass : function(){}
        }
    }
    //window.onload=function(){}
    console.log($.ele.id('aaa'));
    var a=$.ele.id('aaa');
    */