Javascript GetElementsByCassName错误处理

我使用

javascript

得到一个元素，如下所示

var myPage = document.getElementsByClassName("mypage");
console.log('My Page Found : ' + myPage[0].id);

如果找到该元素，则此操作有效，但如果未找到，则会给出错误

Uncaught TypeError: myPage[0] is undefined

如果找不到元素，如何进行错误处理？

使用和null运算符：

var myPage=document.getElementsByClassName（“myPage”）；
console.log（'My Page Found:'+（myPage[0]？.id？？'[none]）；

编辑（基于巴贝尔polyfill的polyfill）：

/#节
功能选项链（来源、项目）{
var_链；
返回（_chained=source）==null | |(u chained===未定义？未定义：_chained[item]；
}
函数nullishRet（项，默认值）{
var_nullishc；
return（_nullishc=item）！==null&&u nullishc！==未定义？\u nullishc:默认值；
}
//#结束部分
var myPage=document.getElementsByClassName（“myPage”）；
log（'My Page Found:'+nullishRet（optionalChain（myPage，'id'），'[none]'）；

---

应该这样做。

您可以检查元素是否未定义；如果未定义，请检查

0th

索引

像这样：

var myPage = document.getElementsByClassName("mypage");
if (myPage && myPage[0] && myPage[0].id) console.log('My Page Found : ' + myPage[0].id);
else console.log('My Page Not Found')

---

此解决方案的最大优点是它与所有较旧的浏览器兼容。更深入地了解正在发生的事情：

var myPage = document.getElementsByClassName("mypage");

按预期工作。它没有找到任何“mypage”元素，而是返回一个空的HTMLCollection。 现在您尝试访问此集合中未设置的属性。这将导致一个

未定义的
值。这就是造成错误的原因

Undefined是不可配置、不可写或不可枚举的基元。（见附件）

如何避免这种情况？
通常，最好的做法是在使用某个值之前检查该值是否有效

如果（myPage==undefined），请避免使用
。这是半最优的做法，因为如果没有定义比较变量，它将抛出一个错误。
如果要检查某个内容是否已定义，请使用错误保存
If（typeof==“undefined”）
或类似
myPage的
操作符？？mypage[0]
。如果使用最新的EcmaScript，则可以将
？。
运算符与
？
一起使用，如
myPage？[0]很抱歉，找不到mypage“

我建议的最后两件事是使用
try{/*您的代码*/}catch（e）{/*handle Error e*/}

还可以阅读有关
var，let
和
const
的内容。自ECMAScript 6以来，在
let
或
const
上使用
var
的用例很少。（见附件）

有关实验性
？
运算符的更多信息，请参阅

编辑：
根据社区的“友好提示”编辑了答案。谢谢
这是一个集合，所以在尝试访问其中的元素之前，请检查长度。甚至可以变短：if（myPage[0]？.id）…，请记住，他没有说如果日志不存在，则不应显示该日志。@SeppeMariën它可以，但问题是，我们也应该关注代码的可读性。这就是为什么我给你这个评论，你正在做3和运算符来检查一个属性是否存在。@SeppeMariën我同意你的观点，我也可以使用这种方法，但为了让用户理解答案，我创建了一个简单的解决方案。有了这个运营商，用户很可能会对那里发生的事情感到困惑。简化事情是个好主意。@SeppeMariën所以你的应用程序会为11%的用户中断，仅仅因为你想保存一些字符的代码？这个解决方案不能在80以下的所有chrome版本中工作，甚至不能在任何Internet Explorer中工作。检查文档：实验特性@凯莱曼：不。现在这是标准的。所有最新的浏览器（不包括IE）都有它（和Node>14）@LoganDevine~89%的支持率。在约11%的用户上中断应用程序，以节省几个字符的代码。为此编写polyfill并将您的支持率提高到99%并不是一件大事。“它找不到任何“mypage”元素，而是返回
未定义的
”——这是不正确的
.getElementsByClassName（）
将始终返回一个live
HTMLCollection
。在这种情况下，集合为空。“避免使用if（myPage==undefined）”-因为它总是
false
。“这是非标准的，可能在所有配置中都不受支持”-什么？o、 这是公认的答案吗？这件事充满了错误或奇怪的假设…
==undefined
得到了普遍支持。。。。可选链接和空合并（尚未）不可用