Javascript基础简单汇总：元素获取

Posted 2020-09-19

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

那么在获取元素之前首先得要了解什么是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