针对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'