如何允许 document.getElementById 找不到 ID

How to Allow for document.getElementById to Not Find an ID?

本文关键字：找不到 ID getElementById document 何允许      更新时间：2023-09-26

我有一个外部JavaScript，旨在替换我网站上的某些单词。为了保持高效，相同的外部脚本加载到每个页面，因此如果需要进行任何更改，我可以简单地编辑单个文件。这是我正在使用的代码示例：

document.getElementById("ey").innerHTML = 'AY'
document.getElementById("ny").innerHTML = 'BY'
document.getElementById("gy").innerHTML = 'CY'

但是，我发现如果一个页面包含一个元素（例如"gy"），而不是另一个元素（"ny"），则脚本无法正确执行。我有一长串这些更改（50 多岁），所以我很乐意让它工作。

知道我如何使代码为找不到特定 id 提供允许吗？

setInnerHTML('ey', 'AY');
setInnerHTML('ny', 'BY');
...etc etc
function setInnerHTML(elementId, innerHTML) {
    var el = document.getElementById(elementId);
    if (el) {
        el.innerHTML = innerHTML;
    }
}

好吧，你可以写一些类似的东西 

var el = document.getElementById("MY-ID")
if (el)
  el.innerHTML = 'MY VALUE'

一个不错的解决方案是将其包装在一种方法中，如下所示：

function setValue(id, value){
  var el = document.getElementById(id)
  if (el)
    el.innerHTML = value
}

然后这样称呼它：

setValue('ey', 'AY')
setValue('ny', 'BY')

等等

你总是可以为此做一个小结构。

(function(){
    var defaultChanges = {
        'ey' : 'AY',
        'ny': 'BY',
        'gy' : 'CY'
    };
    for(var id in defaultChanges){
        var el = document.querySelector("#"+id);
        if(el) el.innerHTML = defaultChanges[id];
    }
})()

这样，您需要做的就是更改对象，整个集合将在页面中更改。

如果未找到，请使用虚拟对象：

(document.getElementById("ey") || {innerHTML:''}).innerHTML = 'AY' 
(document.getElementById("ny") || {innerHTML:''}).innerHTML = 'BY'
(document.getElementById("gy") || {innerHTML:''}).innerHTML = 'CY'
相关文章：