DOMの子要素をchildNodesで取得しても配列処理できな時の対処法

背景

DOMの子要素を取得して, 子要素の中にあるテキストを抜き出したかった.

問題

childNodesで子要素を取得してmapで処理しようとすると, mapは使えないといわれる.

const nodes = document.body.childNodes;
const texts = nodes.map(k=>k.querySelector("a").textContent) // map使えない
console.log(nodes)

原因

childNodesはNodelistというオブジェクトを返す.

console.log(nodes) //ex. Nodelist (4) [...]

対処法

Arrayに変換する.

• ES6での表現

const nodes = [...document.body.childNodes]; // これで変換

• 従来の表現

const nodes = document.body.childNodes;
const nodeList = Array.prototype.slice.apply(nodes) //これで変換

後はmap, reduce, など普通に使えるようになる.

jsnoteにサンプル載せました.
https://toyoharu-nishikawa.github.io/jsnote/#sample=sample/JavaScript/childNodes.js