JavaScript中几个操作元素对象的函数方法

JavaScript05

JavaScript中几个操作元素对象的函数方法,第1张

1、getElementById(id)方法

JavaScript中的getElementById中的方法,将返回一个与它有着相同ID属性元素节点的对应对象。这里值得注意的是getElementById写法一定要注意大小写,否则会出错。

getElementById()是document对象的特有函数,它只有一个参数值:如果你想获得某个ID属性元素的值,那么它的写法如下

类似语法:

document.getElementById(ID)

2、getElementsByTagName(tag)方法

getElementsByTagName()方法返回一个对象数组,这个对象数组中的每一个对象对应着文档里有着给定标签的一个元素。

类似语法:

document.getElementsByTagName(tag)

例子:

如果想获取对象中所有的"li"标签

document.getElementsByTagName("li")

这个调用将返回一个对象数组,数组中的每一个对象分别对应里document文档中的一个列表元素(li标签)。关于这个对象数组的操作方法和其它数组一样,要以使用数组的"length"属性。

代码如下:

for(var i=0i < document.getElementsByTagName("li").lengthi++){

    //这里是操作方法

    alert(typeof document.getElementsByTagName("li")[i])

}

3、getElementsByClassName(class)方法

getElementsByClassName()是HTML5中新增的方法,在一些老式的浏览器中不支持此方法,所有使用时要注意!

getElementsByClassName()和上面的二个函数方法一样,结合document(文档对象)使用。

类似语法:

document.getElementsByClassName(class)

如果函数是由

submit

按钮触发,或是由带有

href

属性的a标签触发,那么,必须要return

false才能阻止浏览器产生新的http请求.

JS函数调用的四种方法

1:方法调用模式

/*方法调用模式*/

    var myobject={

            value:0,

            inc:function(){

                    alert(this.value)

                }

        }

    myobject.inc()

请注意this此时指向myobject

2:函数调用模式

/*函数调用模式*/

    

    var add=function(a,b){

        alert(this)//this被绑顶到window

            return a+b

        }

    var sum=add(3,4)

    alert(sum)

请注意this此时指向window

3:构造器调用模式

/*构造器调用模式  摒弃*/

    

    var quo=function(string){

            this.status=string

        }

    quo.prototype.get_status=function(){

            return this.status

        }

    var qq=new quo("aaa")

    alert(qq.get_status())

javascript语言精粹一书建议摒弃这种方式

4:apply调用模式

/*apply*/

    //注意使用了上面的sum函数

    //与myobject

    //这中调用方式的优点在于可以指向this指向的对象。

    //apply的第一个参数就是this指针要指向的对象

    var arr=[10,20]

    var sum=add.apply(myobject,arr)

    alert(sum)

看这个apply真正应用。bind这是一个绑定时间的函数

var bind=function(object,type,fn){

            if(object.attachEvent){//IE浏览器

                    object.attachEvent("on"+type,(function(){

                                                           return function(event){

                                                               window.event.cancelBubble=true//停止时间冒泡

                                                               object.attachEvent=[fn.apply(object)]

                                                               //在IE里用attachEvent添加一个时间绑定以后。

                                                               //this的指向不是到object对象本身所以。我们绑定的function里的this.id是无法正常工作的。

                                                               //但是如果我们用fn.apply(object)

                                                               //这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以this.id就变成了

                                                               //object.id 可以正常工作了。

                                                               

                                                               }

                                                           })(object),false)

                }else if(object.addEventListener){//其他浏览器

                        object.addEventListener(type,function(event){

                                                              event.stopPropagation()//停止时间冒泡

                                                              fn.apply(this)

                                                              })

                    }

            

        }

    bind(document.getElementById("aaa"),"click",function(){alert(this.id)})