原始JS选择器使用方法和常用事件手册



常用的无返回值事件

属性	描述
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

返回鼠标或者键盘的属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

JavaScript常见的选择器有getElementById()，getElementsByName()，getElementsByTagName()，但外国人不满意这些API，于是搞出了getElementsByClassName(),后来一点点又出现了jQuery选择器，这里只说原始js选择器。

1.getElementById()，这是最常用的选择器，通过id来定位，由于id是元素的唯一标识，所以不能定义重复的id，否则结果是很难控制的，这里多说几句，虽然css中有id选择器，但是id选择器通常情况下只是用于js，而类选择器（class）用于css,这也算是不成文的规定吧，当然代码是灵活的，id选择器在css中也有它的用武之地。

例：

var test=document.getElementById("test").value;//获取文档中id为test的元素的值，并赋值给test变脸

2.getElementsByName()，这个选择器是获取name属性为某个值的元素，一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以该方法返回的是所有匹配元素组成的数组，而不是一个元素。

例：

var test=document.getElementByName("test");//获取文档中name为test的元素的节点，并赋值给test变量，此时test变量是一个数组

3.getElementsByTagName()这个选择器是获取标签名为某个值的元素，这个选择器可以统一定义文档中某标签的交互或样式。

例：

var test=document.getElementsByTagName("test");//获取文档中class为test的元素的节点，并赋值给test，此时test变量是一个数组 ，这个选择器在IE5，6，7，8中无法使用

4.getElementsByClassName这个选择器在js的API中是找不到的，想要使用必须自己定义方法，通常的原理为先使用getElementsByTagName("*")取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。网上有很多程序员实现了这个选择器。

下面举两例：

（1）The Ultimate getElementsByClassName方案，作者为Robert Nyman，05年实现，可见老外许多东西在很早以前就走得很远了。

//三个参数都是必需的，查找一网页中5007个类名为“cell”的元素，IE8历时1828 ~ 1844毫秒，
//IE6为4610 ~ 6109毫秒，FF3.5为46 ~ 48毫秒，opera10为31 ~ 32毫秒，Chrome为23~ 26毫秒，
//safari4为19 ~ 20毫秒
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
        oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i < arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

（2）由Dustin Diaz（《JavaScript Design Patterns》的作者）提供，但兼容性不如上面的，不支持IE5。

//后两参数是可靠的，查找一网页中5007个类名为“cell”的元素，IE8历时78毫秒，IE6历时125~171毫秒
//FF3.5为42 ~ 48毫秒，opera10为31 毫秒，Chrome为22~ 25毫秒，safari4为18 ~ 19毫秒
var getElementsByClass = function(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

--------------------------------------------------------------------------------------------------------------------------------------------------------

注：this可以表示当前元素的节点。

--------------------------------------------------------------------------------------------------------------------------------------------------------

下面是配合事件等知识点的一些常用的使用方法：

//提交id为test的表单

document.getElementById("test").submit();

//将id为test元素的边框设置为2个像素，实体，红色

document.getElementById("test").style.border="2px solid red";

//鼠标移动或移出id为test的元素，改变其背景色

function test(){
document.getElementById("test").οnmοuseοver=function(){document.getElementById("test2").style.backgroundColor="red"};
document.getElementById("test").οnmοuseοut=function(){document.getElementById("test2").style.backgroundColor="blue"};
}

//弹出文档中name为test的元素的个数

function test()
　　{
　　var test=document.getElementsByName("test");
　　alert(test.length);
　　}

转自：骑火箭的蚂蚁（自留备份）