浅谈JS获取元素的N种方法及其动静态讨论
实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式、内容等目的。而文档对象模型(DOM)是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,它会将web页面和脚本或程序语言连接起来。也因此,JavaScript可以通过DOMAPI获取元素节点,方法有如下几种:其中querySelector()和querySelectorAll()为ES5的元素选择方法
1、getElementById():
接收一个参数:要取得的元素的ID(区分大小写,必须严格匹配),返回一个Element对象(也可看作是动态NodeList集合,只是集合中只包含一个匹配的元素,但也会实时反映DOM节点的变化),若当前文档中拥有特定ID的元素不存在则返回nul。
语法:
element=document.getElementById(id);
示例:删除
helloworld hellodolby hellodot hellobean
//(1)处打印值helloworld hellodolby hellodot hellobean
示例:
getElementByIdexample Sometexthere blue red
getElementById()方法不会搜索不在文档中的元素。当创建一个元素且分配ID后,必须要使用insertBefore()或其他类似的方法把元素插入到文档中之后才能使用getElementById()获取到:
varelement=document.createElement("div"); element.id='testqq'; varel=document.getElementById('testqq');//elwillbenull!
2、getElementsByClassName():
接收一个参数,即包含一个或多个类名的字符串(类名通过空格分隔),返回一个HTMLCollection动态集合(也可以说返回一个NodeList类数组对象),集合中包含以当前元素为根节点,所有指定class名的子元素。
语法:
varelements=document.getElementsByClassName(names); varelements=rootElement.getElementsByClassName(names);
getElementsByClassName可以在任意的元素上调用,不仅仅是document。调用这个方法的元素将作为本次查找的根元素。
示例:
获取所有class为'test'的元素:
document.getElementsByClassName('test');
获取所有class同时包括'red'和'test'的元素:
document.getElementsByClassName('redtest');
在id为'main'的元素的子节点中,获取所有class为'test'的元素:
document.getElementById('main').getElementsByClassName('test');
示例:删除
//html代码helloworld hellodolby hellodot hellobean