如何进行js调试

 

概述

1 document.getElementById()

得到一个元素。事实上，还有一个方法可以得到元素，并且得到的是多个元素：

1 document.getElementsByTagName();

 

全线浏览器兼容的，得到元素的方法，就这两个：

document.getElementById()        通过id得到元素

document.getElementsByTagName();    通过标签名得到元素们

 

以后还会学习更多的得到元素的方法：

document.getElementsByClassName(); 通过类名得到元素

document.querySelector(); 通过选择器得到元素

这些不是全线浏览器兼容。

 

 

getElementsByTagName就是通过标签名得到元素，得到的是页面上所有该种标签元素，得到的是数组，数组可以有下标，开始是0，最后一项是.length-1

1 var ops = document.getElementsByTagName("p");

2 ops[0].style.backgroundColor = "rgb(111,222,123)";

3 ops[3].style.backgroundColor = "rgb(111,222,123)";

4 ops[ops.length - 1].style.backgroundColor = "rgb(111,222,123)";

 

既然是数组，就能通过循环语句批量控制，比如表格的隔行变色：

1  var otrs = document.getElementsByTagName("tr");

2 

3  for(var i = 0 ; i < otrs.length ; i+=2){

4  otrs[i].style.backgroundColor = "yellowgreen";

5  }

 

HTML标签从上到下，依次是0、1、2、3……

1  <div>

2  <div>

3  <p>0</p>

4  <div>

5  <p>1</p>

6  </div>

7  <p>2</p>

8  </div>

9  <p>3</p>

10  </div>

11  <p>4</p>

假如页面上只有一个p标签，那么得到的也是数组。

1  var op = document.getElementsByTagName("p")[0];

2 

3  op.style.backgroundColor = "red";

 

连续打点调用get

先去选择一个HTML标签，然后选择这个HTML标签中的所有p标签：

1 var ps = document.getElementById("box2").getElementsByTagName("p");

不要多写一个document

1 var ps = document.getElementById("box2").document.getElementsByTagName("p");

 

 

连续get可以很疯狂，但是如果是数组，一定要加上下标，才能变成对象：

1 document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("span")[1].style.color = "red";

 

 

 

举例：

表格的隔行变色

全选复选框

 

 

批量添加监听

页面上的所有的p，现在都要有click事件监听。

就要用循环语句去加。

1  for(var i = 0 ; i < ps.length ; i++){

2  ps[i].onclick = function(){

3  alert("你好");

4  }

5  }

for循环包裹添加监听的语句。

对序号的影响，闭包的影响又出现了：

 

1 for(var i = 0 ; i < ps.length ; i++){

2  ps[i].onclick = function(){

3  alert("我是老" + i + "点我干嘛？！！");

4  }

5 }

所以每个盒子点击之后，都是7了，而不是我们预想的0、1、2、3、4、5、6。

闭包的影响：匿名函数定义的时候，已经记住了自己认识i，但是认识i不是表示把i的值赋值了一份记住，而是真真正正的认识了鲜活的、有生命的i。所以匿名函数执行的时候（就是事件发生时）i已经是7。

 

解决这个事情：

1 for(var i = 0 ; i < ps.length ; i++){

2  (function(m){

3  ps[m].onclick = function(){

4  alert("我是老" + m + "点我干嘛？！！");

5  }

6  })(i);

7 }

 

除了IIFE之外，还有一种方法，就是强制添加属性的方法：

任何一个对象，我们都可以通过点语法来设置新的属性。

 

1  for(var i = 0 ; i < ps.length ; i++){

2  ps[i].idx= i;  //先不要着急设置监听，先编号

3 

4  ps[i].onclick = function(){

5  alert("我是老" + this.idx+ "点我干嘛？！！"); //自己的编号

6  }

7  }