3 回答

TA貢獻(xiàn)1809條經(jīng)驗 獲得超8個贊
所以你試圖通過遞歸函數(shù)遍歷 DOM 樹!?
當(dāng)然,每個孩子都有自己的一組孩子。不然就不是樹了。
當(dāng)您想要返回所有匹配元素的數(shù)組時,您必須將結(jié)果與遞歸調(diào)用連接起來。
這可以工作:
const getElementsByClassName = (nameOfClass, parent) => {
const result = []
if (parent.className === nameOfClass) {
result.push(parent);
}
for(let el of parent.children) {
result = result.concat(getElementByClassName(nameOfClass, el));
}
return result
};
此實現(xiàn)應(yīng)僅用于教育目的,因為它具有很大的存儲復(fù)雜性。

TA貢獻(xiàn)1829條經(jīng)驗 獲得超6個贊
您可以像這樣使用 querySelectorAll :
const getElementsByClassName = (nameOfClass, ancestor) => (
ancestor.querySelectorAll(`.${nameOfClass}`)
);
或者,如果您肯定想要父母的直系后代。es6方式:
const getElementsByClassName = (nameOfClass, parent) => (
[...parent.querySelectorAll(`.${nameOfClass}`)].filter(item => item.parentElement === parent))
);
javascript方式
const getElementsByClassName = (nameOfClass, parent) => (
Array.prototype.slice.call(parent.querySelectorAll(`.${nameOfClass}`)).filter(item => item.parentElement === parent))
);
很遺憾,我們不能將直接后代與 querySelectorAll 一起使用。否則這將是完美的:
const getElementsByClassName = (nameOfClass, parent) => (
parent.querySelectorAll(`> .${nameOfClass}`)
);

TA貢獻(xiàn)1873條經(jīng)驗 獲得超9個贊
這樣的事情應(yīng)該這樣做:
const getElementsByClassName = (name, el) =>
[
... (el .classList .contains (name) ? [el] : []),
... ([... el .childNodes] .flatMap (c => getElementsByClassName (name, c)))
]
從邏輯上講,這只是說將測試該節(jié)點(diǎn)(使用它的classList)的結(jié)果與flatMap對其子節(jié)點(diǎn)的ped 遞歸調(diào)用相結(jié)合。
現(xiàn)場示例:
const getElementsByClassName = (name, el) =>
[
... ([...(el .classList || [])] .includes (name) ? [el] : []),
... ([... el .childNodes] .flatMap (c => getElementsByClassName (name, c)))
]
console .log (
getElementsByClassName ('foo', document).map(el => el.textContent)
)
.foo {background: yellow; font-weight: bold}
<div class = 'foo'>Foo</div>
<div class = 'bar'>Bar</div>
<div class = 'baz'>
Baz
<div class = 'baz qux'>
Qux
<div class = 'foo baz qux'>Foo Baz Qux</div>
</div>
<div class = 'baz foo'>Baz Foo</div>
</div>
這在 DOM 遍歷中可能過于簡單,因為并非所有子節(jié)點(diǎn)都是元素,但這可能只是第二次檢查。這應(yīng)該表明這個想法。
添加回答
舉報