針對DOM你該如何把握它

時間 2019-11-13

標籤針對 dom 如何把握欄目 HTML 简体版

原文原文鏈接

這些小問題都是本身在開發中會想到和懷疑的，我下面就給你們羅列出來：javascript

問題1？dom遍歷順序css

針對下面html結構，dom遍歷，輸出順序是？html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js</title>
</head>
<body>
<div id="aa">aa
    <p>
       <span title="1">
           <span title="2">
                <span title="3"></span>
            </span>
            <span title="4"></span>
        </span>
    </p>
    <p>
     <span title="5"></span>
    </p>
</div>
<div id="bb">
   <span title="6"></span>
</div>
<span title="7"></span>
   
</body>
<script type="text/javascript">
var ss=document.getElementsByTagName("span");
for(var i=0;i<ss.length;i++){
 alert(ss[i].title);
};
</script>
</html>

咱們結果：html5

1 2 3 4 5 6 7java

結論：二叉樹先順遍歷處理，把dom樹分爲左右，先左後右遍歷方式。ios

對html結構圖示dom樹：dom

咱們查看優先遍歷的內容，知道了遍歷方式，進入下一問題？this

問題2？遍歷順序原來如此spa

針對下面html結構，dom遍歷，輸出順序是？code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js</title>
</head>
<body>
<div id="aa">aa
    <p title="8">
     <span title="1">
         <span title="2">
             <span title="3"></span>
            </span>
            <span title="4"></span>
        </span>
    </p>
    <p title="9">
     <span title="5"></span>
    </p>
</div>
<div id="bb">
 <span title="6"></span>
</div>
<span title="7"></span>
   
</body>
<script type="text/javascript">
var ss=document.getElementById("aa").getElementsByTagName("*");
for(var i=0;i<ss.length;i++){
 alert(ss[i].title);
};
</script>
</html>

結果：8 1 2 3 4 9 5

總結：懂了dom的遍歷方式，咱們直接就預測告終果。

問題3？節點屬性還有護短一說

針對下面html結構，dom遍歷，輸出順序是？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js</title>
</head>
<body>
<div id="aa">aa
    <p title="8" is="8">
     <span title="1" is="1">
         <span title="2" is="2">
             <span title="3" is="3"></span>
            </span>
            <span title="4" is="4"></span>
        </span>
    </p>
    <p title="9" is="9">
     <span title="5" is="5"></span>
    </p>
</div>
<div id="bb">
 <span title="6"></span>
</div>
<span title="7"></span>
   
</body>
<script type="text/javascript">
var ss=document.getElementById("aa").getElementsByTagName("*");
for(var i=0;i<ss.length;i++){
 alert(ss[i].is);
};
</script>
</html>

猜測結果：同2，

真實結果：全是undefined

is和title都是元素屬性，咱們採用了一樣方式獲取，爲何是未被定義？

知道的都明白title是元素原生提供屬性，而is使咱們自定義，問題是否是在這，咱們利用dom提供的官方獲取屬性方法輸出：

var ss=document.getElementById("aa").getElementsByTagName("*");
for(var i=0;i<ss.length;i++){
 alert(ss[i].getAttribute("is"));
};

結局就是如此的護短，用.屬性只能去原生的處理，針對定義是沒快捷方式的。真是對於titile咱們不會太在乎，主要在乎的就是width和height代替css設置的屬性。

問題4？事件綁定很亂？

在點擊id=aa的div時彈出什麼？

var ss=document.getElementById("aa");
ss.onclick=function(){
 alert(this.id)
};

結果aa，這個咱們直接就能知道，這個綁定方式我叫他

方式1：農村方式！

下面咱們針對這個綁定問題延伸事件瞭解

你還能寫出幾種綁定方式？

方式2：城市方式

var ss=document.getElementById("aa");
ss.addEventListener("click",function(){
 alert(this.id)
},true);

顯得整潔統一有味道！

方式3：非主流方式

<div id="aa" onClick="alert(this.id)">

感受很直接很暴力有沒有

方式4：非主流結合農村

<div id="aa" onClick="aa(this.id)">

function aa(a){
 alert(a)
};

說到底，農村和城市方式使咱們經常使用的方法，不過城市方式顯得更加讓人明白，城市發在ie6 7是存在問題的，畢竟低級ie的城市和正規城市才用了不一樣原料。

你們能夠去了解的相關知識：

1.低級ie事件綁定兼容處理

2.事件的捕獲和冒泡機制

3.事件委託（原理來自2）

4.事件對象不兼容問題

5.滾輪事件兼容問題

6.那些纔有load事件

7.html5提供的新事件

8.事件阻止冒泡和阻止默認行爲的方法和兼容問題

問題5？觸摸事件？wp8你很壞

下面輸出結果是？

var ss=document.getElementById("aa");
alert(ss.istouch);

提示未被定義，不過咱們須要這個，咱們想要彈出一個true或者false告訴咱們支不支持touch事件！

移動端的觸摸事件上，作出不一樣事件綁定的處理對於安卓、ios和wp8有區別，固然主要仍是在ie？

若是隻有安卓和ios，咱們使用touch事件就ok了，不過ie卻須要判斷是否支持去採用point和mspoint事件去兼容處理？

var ss=document.getElementById("aa");
alert(ss.msPointerEnabled);
alert(ss.pointerEnabled);

移動端wp8對比安卓和ios事件區別

'pointerdown' , 'pointermove' , 'pointerup'
'MSPointerDown', 'MSPointerMove', 'MSPointerUp'
'touchstart' , 'touchmove' , 'touchend'

對比pc對應事件

'mousedown' , 'mousemove' , 'mouseup'

相關標籤/搜索

每日一句

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