DOM ツリーのトラバース

ページ内の各 DOM 要素にインライン スタイルを適用する作業が必要でした.実際にツリーをたどる機会はめったにありませんでした.インタビューや宿題の練習として、多くの人が行ったことがあるはずです. .

私の解決策は次のとおりでした

const app = document.querySelector("#app");

const inlineStyles = (node) => {
  const clone = node.cloneNode();
  const computedStyles = window.getComputedStyle(node);
  Object.keys(computedStyles).forEach((key) => {
    clone.style.setProperty(key, computedStyles.getPropertyValue(key));
  });

  return clone;
}

function traverseDOM(node) {
  if (!node) {
    return;
  }

  const updatedNode = inlineStyles(node);
  for (let child of updatedNode.children) {
    const updatedChild = traverseDOM(child);
    updatedNode.appendChild(updatedChild);
  }

  return updatedNode;
}

各ノードで実行される操作は inlineStyle です.ノードの計算されたスタイルを取得し、インライン スタイルとして適用します.

これは DOM ツリーであるため、特定の順序で構築されておらず、各ノードには多くの子があるため、二分検索ツリーではありません.最初にルート ノードで操作を実行し、次にインデックス位置の増加から、つまり最も左から右に子をトラバースします.