本文介绍了在javascript中实现document.getElementById的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在javascript中实现原生 document.getElementById
。我在javascript中实现了 document.getElementsByClassName
。
I'm trying to implement native document.getElementById
in javascript. I've implemented document.getElementsByClassName
in javascript.
function getElementsByClassName (className) {
var nodeList = [];
function test(node) {
if (node.classList && node.classList.contains(className)) {
nodeList.push(node);
}
for (var index = 0; index < node.childNodes.length; index++) {
test(node.childNodes[index]);
}
return nodeList;
}
test(document.body);
return nodeList;
};
// Fails here.
function getElementById(className) {
const result = [];
function getEachIDNode(node) {
if(node.contains(className)) {
return node;
}
for(let i=0; i<node.childNodes.length; i++) {
getEachIDNode(node.childNodes[i]);
}
}
getEachIDNode(document.body);
}
console.log(getElementsByClassName('winner'));
console.log(getElementById('test'));
<table>
<tr id="test">
<td>#</td>
<td class="winner">aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
</table>
<table>
<tr>
<td>#</td>
<td class="winner">aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
</table>
<table>
<tr>
<td>#</td>
<td class="winner">dd</td>
<td>cc</td>
<td>bb</td>
<td>aa</td>
</tr>
</table>
我正在尝试了解我如何检查节点是否具有属性ID。
有人可以启发我吗?
推荐答案
根据传递的参数检查节点的 id
属性(最好使用 id
作为参数而不是 className
):
Check the id
property of the node against the passed argument (probably better to use id
as an argument rather than className
):
function getElementById(id) {
const result = [];
function getEachIDNode(node) {
if(node.id === id) {
result.push(node);
}
for(let i=0; i<node.childNodes.length; i++) {
getEachIDNode(node.childNodes[i]);
}
}
getEachIDNode(document.body);
return result;
}
console.log(getElementById('subchild')[0].innerHTML);
<div id="parent">
<div id="child1">
</div>
<div id="child2">
<div id="subchild">
subchild!
</div>
</div>
</div>
但如果你实际上想要复制 getElementById
,不要尝试返回一个数组,返回单个元素
:
But if you actually want to replicate getElementById
, don't try to return an array, return a single element:
function getElementById(id) {
let match = null;
const doFind = node => {
if (!match && node.id === id) match = node;
if (!match) return [...node.childNodes].find(doFind);
}
doFind(document.body);
return match;
}
console.log(getElementById('subchild').innerHTML);
<div id="parent">
<div id="child1">
</div>
<div id="child2">
<div id="subchild">
subchild!
</div>
</div>
</div>
这篇关于在javascript中实现document.getElementById的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!