在前端开发中，获取页面元素是非常常见的操作，可以通过JS来实现。本篇文章将介绍JS获取页面元素的常见方法，并从多个角度分析其优缺点。
1. 通过ID获取元素
通过ID获取元素是最常见的获取页面元素的方法，它可以使用document.getElementById()方法来实现。该方法需要一个参数，即元素的ID，返回的是一个代表该元素的对象。
```javascript
var element = document.getElementById("myElement");
```
该方法的优点是简单易用，速度较快，适用于单个元素的情况。缺点是无法获取多个元素，而且ID必须是唯一的。
2. 通过类名获取元素
通过类名获取元素是获取多个元素的一种方法，它可以使用document.getElementsByClassName()方法来实现。该方法需要一个参数，即元素的类名，返回的是一个包含所有该类名元素的对象数组。
```javascript
var elements = document.getElementsByClassName("myElements");
```
该方法的优点是可以获取多个元素，而且支持CSS选择器语法，可以获取指定类名的所有元素。缺点是速度较慢，因为需要遍历整个DOM树，而且IE8以下版本不支持。
3. 通过标签名获取元素
通过标签名获取元素是获取多个元素的另一种方法，它可以使用document.getElementsByTagName()方法来实现。该方法需要一个参数，即元素的标签名，返回的是一个包含所有该标签名元素的对象数组。
```javascript
var elements = document.getElementsByTagName("div");
```
该方法的优点是可以获取多个元素，而且速度较快。缺点是无法获取指定类名或ID的元素，只能获取所有指定标签名的元素。
4. 通过CSS选择器获取元素
通过CSS选择器获取元素是获取多个元素的一种高级方法，它可以使用document.querySelectorAll()方法来实现。该方法需要一个参数，即CSS选择器语法，返回的是一个包含所有符合选择器条件的元素的对象数组。
```javascript
var elements = document.querySelectorAll(".myElements");
```
该方法的优点是可以获取多个元素，而且支持CSS选择器语法，可以获取指定类名、ID或标签名的元素。缺点是速度较慢，因为需要遍历整个DOM树，而且IE8以下版本不支持。
5. 通过父元素获取子元素
通过父元素获取子元素是获取指定父元素下的子元素的一种方法，它可以使用父元素的getElementsByClassName()、getElementsByTagName()或querySelectorAll()方法来实现。该方法需要一个参数，即子元素的类名、标签名或CSS选择器语法，返回的是一个包含所有符合条件的子元素的对象数组。
```javascript
var parent = document.getElementById("myParent");
var elements = parent.getElementsByClassName("myElements");
```
该方法的优点是可以获取指定父元素下的子元素，而且速度较快。缺点是无法获取不在指定父元素下的子元素。
综上所述，JS获取页面元素的常见方法有通过ID、类名、标签名、CSS选择器和父元素获取子元素。不同的方法适用于不同的情况，需要根据实际需求来选择。同时，还需要注意浏览器兼容性和性能问题，尽可能选择效率高、兼容性好的方法。
