监控页面所有input框的输入，并进行过滤

第一次的解决方案：

function input_filter(){
	   var list=document.getElementsByTagName("input");
			//遍历所有符合条件的文本框，存储在strData
            var strData;
	        for(var i=0;i<list.length && list[i];i++)
              {
				
	           if (list[i].type == "text")
				 {
                                strData=list[i]; 
				strData.addEventListener('input',
					function(){
                          strData.value = filterXSS(strData.value);
                         }
						 ,false);	
						 
				 }
		      }


}	

对于这段代码，只能监控最后一个input的输入并进行过滤，然而在strData=list[i]; 后直接加alert(strData.id);省略addEventListener函数，则可以得到页面所有input的ID

第二种解决方案：

function input_filter(){
			document.querySelector('body').addEventListener('change', 
               function() {
                   var list=document.getElementsByTagName("input");
			      //遍历所有符合条件的文本框，存储在strData
                   var strData;
	               for(var i=0;i<list.length && list[i];i++)
                    {
			            if (list[i].type == "text")
				          {
                           strData=list[i];
				           strData.value = filterXSS(strData.value);
				          }
			        }
            }
         , false);
}   
		input_filter();

其中，关于 querySelector有一篇文章写得不错http://www.nowamagic.net/librarys/veda/detail/388，原文前半部分如下：

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样：

1	document.getElementById("test");

现在我们来试试使用新方法来获取这个 DIV：