1. **getElementById()**：
这是最直接也是最常用的一种方式，通过HTML标签的id属性值精确地定位到一个唯一的 DOM 元素。语法如下：
javascript
var element = document.getElementById("elementId");
例如：如果我们有一个ID为"myDiv"的div元素，则可以通过 `document.getElementById('myDiv')` 获取该元素引用。
2. **getElementsByClassName()**：
此方法返回的是包含指定类名的所有元素集合( NodeList对象 )，而非单个元素。需遍历NodeList以访问每个单独元素。
javascript
var elements = document.getElementsByClassName("className");
for (var i=0; i < elements.length ;i++) {
console.log(elements[i]);
}
3. **getElementsByTagName()**:
类似于 getElementsByClassName(),但它是基于给定标签名称查找所有匹配项，同样会得到一个 NodeList 对象。
javascript
var allPElements = document.getElementsByTagName("p");
// 返回文档内所有的<p> 标签元素。
for(let p of allPElements){
console.log(p);
}
4. **querySelector()** 和 **querySelectorAll()** :
querySelector 方法用于从整个文档范围或某个特定节点范围内选择第一个与CSS selectors相匹配的元素；而querySelectorAll 则返回符合条件的所有元素列表（伪数组形式的 NodeList）。
- 单一选取:
javascript
let firstMatchElement = document.querySelector(".exampleClass #specificID");
// 或者针对某父级元素查询子元素
let parent = document.getElementById("parentElm");
let childOfParent = parent.querySelector('.child');
- 批量选取 :
javascript
let matchingElemsArrayLike = document.querySelectorAll("input[type='text']");
Array.from(matchingElemsArrayLike).forEach(function(inputField) {
inputField.style.backgroundColor = "yellow";
});
5. **closest()**: （现代浏览器支持）
closest()方法允许你寻找最近的一个祖先元素是否满足某一条件，并返回它。如果没有找到相应祖辈则返回null.
javascript
let clickedButton = event.target;
let nearestFormAncestor = clickedButton.closest('form');
if(nearestFormAncestor){
// do something with the form...
}
6. **jQuery的选择器**：
而对于使用了 jQuery 库的情况，可以利用其强大的链式表达法及简洁易读的选择器API进行元素检索。
javascript
$( "#selector-ID" ).css({ color: 'red' });
$('.class-selector').hide();
$('li:first-child'); // 查找首个<li>
总之，在实际开发过程中应依据具体需求选用最合适的方式来捕获目标元素，同时也要注意不同方案可能带来的性能差异以及对旧版浏览器兼容性的影响。以上就是 JavaScript 中常见的若干种获得 HTML 页面上元素的方式及其用例演示。