首页 > 代码库 > Javascript基础简单汇总(一):元素获取

Javascript基础简单汇总(一):元素获取

在页面脚本中,如果要对页面元素进行操作,那么我们就要获取到这个元素

那么在获取元素之前首先得要了解什么是DOM(document object  model)

在DOM,元素是以节点的形式表示的,每一个节点都是对象,我们平时写的特效也就是修改的节点对象的属性来的,这个就是传说中的DOM操作

而节点树其实也就是元素的父子级关系的树状图而已,所以啊,不要想的太复杂

这个元素节点了原生JS不能直接操作的,只能通过document这个文档对象再去获取

比如我要通过元素ID名获取元素:

document.getElementById("idName")

这种方式是很多人喜欢的,因为它属于单词最短的一个。但是工作过或者有过一定知识储备的人就知道,ID命名的元素是比较少的,所以这种情况真正用的时候还是比较少的

布局的时候一般情况下class命名比较多的,当然通过Class类名获取元素的情况是有的:

document.getElementsByClassName("className")

它获取的元素不是单个,而是一个元素集合(HTMLcollection),如果要获取单个具体的元素,要在获取之后加上一个下标[num]就可以了

但是getElementsByClassName并不是一个兼容很好的属性,IE9,FF5+以下浏览器是没有这个属性的,这个也是一个很蛋疼的问题,所有也用得少。

如果一定要通过class属性获取元素的话,也可以写它的兼容方法:

 1 function getClass(obj,className){
 2       var HTMLCollection = [];
 3       var HTMLArr = document.getElementsByTagName("*");
 4       for(var i=0;i<HTMLArr.length;i++){
 5             if(HTMLArr[i] == className){
 6                  HTMLCollection.push(HTMLArr[i]);
 7            }    
 8       }
 9       return HTMLCollection;

除了类名和ID名之外,也是可以通过标签获取的,方法也很简单,获取到元素以后,跟类名获取一样是存在集合中的,如果要访问单个就要通过下标获取

代码如下:

document.getElementsByTagName("TagName");

这些方法或多或少都有各自的缺点,要么太长,要么不能直接获取想要的元素,如果父子关系比较复杂的话,一次获取的几率还比较小的

为什么很多人喜欢用JQ,因为JQ操作元素通过$()连接选择器就可以了,不用担心,JS也有类似的方法:

document.querySelectorAll("Select")

这种方法很方便的可以直接通过选择器获取,返回值nodeList;

 

以上就是平时用的最多的元素获取方式,但此方法都是从document下获取的,如果结构很复杂,这些方法很显然就不够用了

不用担心,DOM还给我们提供了很多节点操作方法,在下一章再跟大家见面吧

本人第一篇文章,先从简单的说起,今后后陆续更新,如果有什么建议,错误或者想跟我直接交流的可以加我的QQ:3106788893

 

Javascript基础简单汇总(一):元素获取