由于什么原因，我不能通过ID检索元素，一旦爬到他的父元素

For what reason i can't retrieve element by ID once climbed on his parent?

本文关键字：元素 检索 ID 什么 于什么 不能      更新时间：2023-09-26

在HTML中我有这样的代码

<body>
  <script src="debug.js"></script>   
  <button id="proof" onclick="debug('result:', this);">proof</button>
</body>

和javascript中的

function debug(msg, e) 
{
    var log = document.getElementById("debuglog");
    if (!log)// If no element with the id "debuglog" exists, create one.
    {
        log = document.createElement("div"); /
        log.id = "debuglog";
        log.innerHTML = "<h1>Debug Log</h1>"; 
        document.body.appendChild(log); 
   }

    var pre = document.createElement("pre");
    var text = document.createTextNode(msg + e.parentNode.getElementById("proof")); //<--PROBLEM HERE
    pre.appendChild(text);
    log.appendChild(pre); 
    }
}

请注意，代码工作，如果进入文本节点我写msg + e.p parentnode ，一旦我添加. getelementbyid("证明")，没有结果检索(我认为脚本在运行阶段出错)。

我想做的是"导航"通过html元素，调用他的父母和他的孩子

getElementById是document的原型，而不是文档中每个元素的原型。
因此，如果你想限制getElementById搜索特定元素的子元素，而不是搜索整个文档(以同样的方式可以使用特定元素作为父元素的getElementsByTagName)，你需要将自己的原型添加到所有元素(但IE不支持HTMLElement上的原型)或编写自己的函数。

查看此页的一些建议，但请记住，一个Id应该始终是唯一的页面内，所以简单地使用document.getElementById是内置和优化的浏览器仍然会更快。

更新:
下面是我链接到的函数的重写，没有错误和更快的反while循环:

function GetChildById( dNode, id ) {
    var i, dResult = null;
    if ( dNode.getAttribute('id') === id ) { return dNode; }
    i=dNode.childNodes.length;
    while ( i-- ) {
        if ( dNode.childNodes[i].nodeType === 1 ) {
            dResult = GetChildById( dNode.childNodes[i], id );
            if ( dResult !== null )
                break;
        }
    }
    return dResult;
}

用法:GetChildById( node, 'id' )

演示:jsfiddle

但是像axel。

由于ID必须是页面上唯一的元素，您可以通过使用document.getElementById('YOURID')简单地访问它。它是文档的方法，因此脚本会抛出错误。如果你想实现这样的东西，你必须通过一个自定义函数来实现:

function youShouldNotDoThis( element, id ) {
    var hit = null;
    if ( element.getAttribute('id') == id ) {
        return element;
    }
    for ( var i = 0, l = element.childNodes.length; i < l; i++ ) {
        if ( element.childNodes[i].nodeType == 1 ) {
            hit = youShouldNotDoThis( element.childNodes[i], id );
            if ( hit != null ) {
                break;
            }
        }
    }
    return hit;
}

在你的脚本片段中:

var whyEver = youShouldNotDoThis(e.parentNode,'proof');
var text = document.createTextNode(msg + whyEver); //<--NO MORE PROBLEM HERE

同样，您不应该通过属性ID执行此操作，因为ID应该是唯一的，但您可以轻松更改此函数以扫描与ID不同的内容。

相关文章：