サンプルコードで身につける: ブラウザ API — document.getElementById と textContent で DOM を書き換え、描き直す

// document.getElementById(id): 子孫のうち「tree order(文書に書かれた順 = 深さ優先の前順)で最初」の、id が一致する要素を返す。
// 深い所にある要素でも、文書で先に出てくれば勝つ。無ければ null(Rust では None)。
struct Node { tag: &'static str, id: Option<&'static str>, children: Vec<Node> }

/// DOM Standard の getElementById。root 自身は含めず、子孫を文書順に探す
fn get_element_by_id<'a>(root: &'a Node, id: &str) -> Option<&'a Node> {
    for child in &root.children {
        if child.id == Some(id) {
            return Some(child); // 最初に見つかった 1 つで終わり
        }
        if let Some(found) = get_element_by_id(child, id) {
            return Some(found); // 子孫を先に全部見てから、次の兄弟へ
        }
    }
    None
}

fn el(tag: &'static str, id: Option<&'static str>, children: Vec<Node>) -> Node {
    Node { tag, id, children }
}

fn main() {
    // <body><div id="x"><span id="y">first</span></div><p id="y">second</p><p id="count">0</p></body>
    let body = el("body", None, vec![
        el("div", Some("x"), vec![el("span", Some("y"), vec![])]),
        el("p", Some("y"), vec![]),
        el("p", Some("count"), vec![]),
    ]);
    for id in ["y", "count", "x", "none"].iter() {
        match get_element_by_id(&body, id) {
            Some(n) => println!("getElementById({:?}) -> <{} id=\"{}\">", id, n.tag, n.id.unwrap_or("")),
            None => println!("getElementById({:?}) -> null", id),
        }
    }
    println!("id=\"y\" は 2 つあるが、文書順で先の <span>(深い方)が返る");
}

// textContent への代入は、DOM Standard の「string replace all」: 子を全部外し、空文字でなければ Text ノードを 1 つ付ける。
// 子要素(<b> など)も消える。読み出しの textContent は子孫の Text を文書順に連結したもの。
enum NodeKind { Element(&'static str), Text(String) }

struct Node { kind: NodeKind, children: Vec<Node> }

impl Node {
    fn element(tag: &'static str, children: Vec<Node>) -> Node {
        Node { kind: NodeKind::Element(tag), children }
    }

    fn text(s: &str) -> Node {
        Node { kind: NodeKind::Text(s.to_string()), children: Vec::new() }
    }

    /// 子孫の Text を文書順につなげる
    fn text_content(&self) -> String {
        match &self.kind {
            NodeKind::Text(t) => t.clone(),
            NodeKind::Element(_) => self.children.iter().map(|c| c.text_content()).collect(),
        }
    }

    /// textContent の setter
    fn set_text_content(&mut self, value: &str) {
        self.children.clear(); // 子を全部外す(要素も Text も)
        if !value.is_empty() {
            self.children.push(Node::text(value)); // Text ノードを 1 つだけ付ける
        }
    }

    fn describe(&self) -> String {
        let kinds: Vec<String> = self.children.iter().map(|c| match &c.kind {
            NodeKind::Element(tag) => format!("<{}>", tag),
            NodeKind::Text(t) => format!("#text {:?}", t),
        }).collect();
        format!("子 {} 個 {:?}  textContent = {:?}", self.children.len(), kinds, self.text_content())
    }
}

fn main() {
    // <p id="msg">Hello, <b>world</b></p>
    let mut p = Node::element("p", vec![Node::text("Hello, "), Node::element("b", vec![Node::text("world")])]);
    println!("最初        : {}", p.describe());
    p.set_text_content("after 3");
    println!("= \"after 3\" : {}", p.describe());
    p.set_text_content("");
    println!("= \"\"        : {}", p.describe());
}

// 箱の木と表示リストは DOM から「作った結果」なので、スクリプトが DOM を書き換えても勝手には変わらない。
// 変えたら relayout() で作り直す。参照実装は JsRuntime の dom_changed フラグで「作り直しが要る」ことを伝える。
struct Element { id: &'static str, text: String }

struct LayoutBox { tag: String, y: f32 }

#[derive(Default)]
struct Page {
    document: Vec<Element>,     // DOM(ここでは要素の列)
    layout_root: Vec<LayoutBox>, // DOM から作った箱の木
    dom_changed: bool,
}

impl Page {
    fn load(&mut self, document: Vec<Element>) {
        self.document = document;
        self.relayout();
    }

    /// DOM から箱の木を作り直す。block を縦に 24px ずつ積む
    fn relayout(&mut self) {
        self.layout_root = self.document.iter().enumerate()
            .map(|(i, e)| LayoutBox { tag: format!("<p id={}>{}", e.id, e.text), y: i as f32 * 24.0 })
            .collect();
        self.dom_changed = false;
    }

    /// el.textContent = value に相当。DOM だけが変わる
    fn set_text_content(&mut self, id: &str, value: &str) {
        if let Some(e) = self.document.iter_mut().find(|e| e.id == id) {
            e.text = value.to_string();
            self.dom_changed = true;
        }
    }

    fn ascii(&self) -> String {
        self.layout_root.iter().map(|b| format!("  y={:>3.0} {}", b.y, b.tag)).collect::<Vec<_>>().join("\n")
    }
}

fn main() {
    let mut page = Page::default();
    page.load(vec![Element { id: "title", text: "Hello".to_string() }, Element { id: "count", text: "0".to_string() }]);
    println!("読み込み直後:\n{}", page.ascii());

    page.set_text_content("count", "3"); // スクリプトが DOM を書き換えた
    println!("\nDOM を変えた直後(dom_changed={}):\n{}   <- 表示は古いまま", page.dom_changed, page.ascii());

    if page.dom_changed {
        page.relayout();
    }
    println!("\nrelayout() の後(dom_changed={}):\n{}", page.dom_changed, page.ascii());
}