ViewLogic: parseHtmlToContainer()

この静的メソッドは、HTML 文字列をパースし、パース結果からコンテナを取得します。

構文

ViewLogic.parseHtmlToContainer(html) => Element
ViewLogic.parseHtmlToContainer(html, containerId) => Element

引数

  • html: string

    パースする HTML 文字列です。

  • containerId: string （省略可）

    パース結果の要素から取り出す id 属性の値を表す文字列です。省略した場合は <alier-container> 要素を探します。

返値: Element

パースした結果から取得したコンテナです。

引数 containerId が指定されていた場合は一致する id 属性値でフィルターした Element です。 指定されなかった場合は <alier-container> の Element です。

例外

  • TypeError
    • 引数 html が string でなかった場合
    • 引数 containerId が string でも nullish でもなかった場合
  • ReferenceError
    • 引数 containerId に一致する id 属性値を持つ要素がパース結果に含まれていなかった場合

例

const { ViewLogic } = await Alier.import("/alier_sys/ViewLogic.js");

const headless_html = `<div id="container">${
    `<p>A day in a headless life</p>`
}</div>`;

const headless_container = ViewLogic.parseHtmlToContainer(headless_html, "container");

const headful_html  = `<head>${
    `<style>${
        `p { font-family: serif; font-style: italic; font-weight: bolder; }`
    }</style>`
}</head><div id="container">${
    `<p>A day in a headful life</p>`
}</div>`;

const headful_container = ViewLogic.parseHtmlToContainer(headful_html, "container");

//  テストのための ViewLogic; ふつうは直接 ViewLogic を new しない。
const vl = new ViewLogic();

//  Alier.View に vl のコンテナを反映
Alier.View.attach(vl);

//  headless_container をコンテナに設定する
vl.setContainer(headless_container);

//  5 秒後に headful_container に中身を差し替える
setTimeout(() => {
    vl.setContainer(headful_container);
}, 5000);

解説

パース元の HTML 文字列上で親要素が指定されていたとしても、取得した Element は親要素を持ちません。パース結果の DOM ツリーから取り除かれます。

パースする HTML 文字列が空でない <head> 要素を持つ場合、パース結果から取得したコンテナの子要素の直前に <head> 要素の子要素を追加（prepend）します。