在javascript中实现document.getElementById

我正在尝试用javascript实现原生

document.getElementById

。我已经用javascript实现了

document.getElementsByClassName

函数getElementsByCassName（类名称）{
var节点列表=[]；
功能测试（节点）{
if（node.classList&&node.classList.contains（className））{
nodeList.push（节点）；
}
对于（var index=0；index对于（让i=0；i对照传递的参数检查节点的
id
属性（最好使用
id
作为参数，而不是
className
）：


函数getElementById（id）{
常量结果=[]；
函数getEachIDNode（节点）{
如果（node.id==id）{
结果：推送（节点）；
}
对于（设i=0；i检查DOM元素的属性）

function getElementById(id) {
    const result = [];

    function getEachIDNode(node) {
        if(!(node instanceof HTMLElement))
            return;

        if(node.hasAttribute('id') && node.getAttribute('id') === id) {
            result.push(node);
        }

        for(let i=0; i<node.childNodes.length; i++) {
            if(result.length > 0)
                return;
            getEachIDNode(node.childNodes[i]);
        }

    }
    getEachIDNode(document.body);
    return result[0];
}

函数getElementById（id）{
常量结果=[]；
函数getEachIDNode（节点）{
if（！（HtmleElement的节点实例））
返回；
if（node.hasAttribute（'id'）&&node.getAttribute（'id'）==id）{
结果：推送（节点）；
}
for（设i=0；i=0）
返回；
getEachIDNode（node.childNodes[i]）；
}
}
getEachIDNode（document.body）；
返回结果[0]；
}

本机

文档.getElementById

不会遍历DOM树来搜索元素，这就是为什么它比其他DOM选择方法更快的原因

事实上，浏览器必须在活动文档中保留一种具有id的所有元素的哈希映射。因此，浏览器只需在该哈希映射（不是哈希映射）上执行查找，并在找到该元素时返回该元素

由于IE的存在，它们确实将此哈希映射的一些条目公开为全局

窗口
对象的属性

因此，如果要自行实现，可以首先检查此属性是否返回元素。

不幸的是，一个元素的id可能与
窗口
对象的另一个属性一致。因此，我们仍然需要遍历DOM。

在本例中，使用一个API，这是我们在DOM树中使用的最快的API，而且当我们只对某些类型的节点（这里是元素）感兴趣时

因此，总而言之，更好的实现可以如下所示：

            var attr_check = $(".selector").attr('id')                              
            if(attr_check != undefined || attr_check != false)
            {
                console.log("this element has attribute id")
            }


函数getElementById（id）{
如果（！（窗口中的id））{
日志（id为“未找到”）；
return null；//我们确定它没有设置
}
//id映射未标记为“自有属性”
如果（！window.hasOwnProperty（id））{
如果（窗口[id]元素实例）&&
window[id].id==id）{//这是我们的元素
日志（id为“在窗口中找到”）；
返回窗口[id]；
}
//如果窗口重复，则[id]应返回HTMLCollection
//（尽管如此，IIRC仅Chrome能够正确执行此操作）
如果（窗口[id]实例为HTMLCollection&&
窗口[id][0]。id==id）{
log（id，‘重复id是坏的’）；
返回窗口[id][0]；
}
}
console.log（id，'walking…'）；
var walker=document.createTreeWalker(
document.documentElement，
NodeFilter.SHOW_元素，
无效的
假的
);
while（walker.nextNode（））{
if（walker.currentNode.id==id）{
返回walker.currentNode；
}
}
返回null；
}
log（getElementById（'foo'）；
log（getElementById（'unique'）；
log（getElementById（'duplicate'）；
window.overwrited='oups'；
log（getElementById（'overwrited'）；

检查节点是否具有属性ID。您必须这样编写：

            var attr_check = $(".selector").attr('id')                              
            if(attr_check != undefined || attr_check != false)
            {
                console.log("this element has attribute id")
            }

您还可以编写以下代码：

           var attr_check = document.getElementById('div-id').attr('id')    

与此相反：

           var attr_check = $(".selector").attr('id')   

添加你的html代码，如果可能的话请提供可运行的代码。你可以直接检查
node.id===className
。虽然，
className
是
getElementById
@VicJordan>的一个奇怪的参数名。请检查。我添加了我的实现。好奇的QQ：当我们知道这一点时，为什么我们需要一个结果数组ID是唯一的？我们不能直接从if语句返回吗？是的，如果确实要复制
getElementById
，最好返回单个元素。数组在这里没有多大意义（您尝试使用它的原因是什么？）啊，不是真的。我后来重新访问了我的代码，然后我有了这个想法！谢谢你的回答。@TechnoCorner如果你觉得答案有用，请不要忘记接受并投票。所以
元素及其子元素被排除在外？不执行，因为它们不是
HTMLElement的实例。