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');
    */

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。