何时使用 `#` 符号获取 DOM 元素？答案

【问题标题】：When to use the `#` symbol to get a DOM element?何时使用 `#` 符号获取 DOM 元素？
【发布时间】：2020-07-08 17:51:38
【问题描述】：

有时我需要得到这样的元素：

var object = document.getElementById('ObjectName');

有时像这样：

var object = document.getElementById('#ObjectName');

它们有什么区别？

【问题讨论】：

【解决方案1】：

不，你看不到

var object = document.getElementById('#ObjectName');

您看不到，因为这意味着元素的 id 以 # 开头，而 HTML4 id 只能以 "with a letter ([A-Za-z])" 开头。

您有时会看到人们使用 jQuery 库，其中的查询语言允许您使用以下方法查找对象

var elem = $('#objectId');

而且在未来，您会看到越来越多的人使用与querySelector 或querySelectorAll 类似的查询语言。

【讨论】：

【解决方案2】：

# 是ID selector in CSS 的一部分。有一些库和方法支持 CSS 选择器来选择元素，例如 jQuery 和原生 DOM 方法 querySelector 和 querySelectorAll。

但在“传统”DOM 方法中，# 没有特殊含义。 getElementById('#ObjectName') 将选择一个 字面意思 具有 ID #ObjectName 的元素，即<div id="#ObjectName">。

【讨论】：

【解决方案3】：

前者得到一个带有id="ObjectName"的元素。后者得到一个带有id="#ObjectName"的元素。

在Selector 的上下文中（例如，由CSS 和document.querySelector 使用，但不适用于getElementById），# 字符表示它后面的文本是一个ID。

document.querySelector('ObjectName')（使用类型选择器）将获得 <ObjectName />（无效的 HTML），而 document.querySelector('#ObjectName') 将获得带有 id="ObjectName" 的元素。

【讨论】：

【解决方案4】：

'#ObjectName'

JQuery（编辑： 或其他 JavaScript 库）

'ObjectName'

DOM (getElementById)

【讨论】：