DynalistのHTML構造 | Noratetsu House

DynalistのCSSを書き換えたりDynalist上でスクリプトを走らせたりするためにはHTML構造を知っておく必要がある。

Webブラウザのデベロッパーツールで見れば分かる。各ノードは以下のようなHTMLが1単位になっている。（2025年4月現在）


<div class="Node-outer">

  <div class="Node">

    <div class="Node-self is-noteEmpty is-parent is-contentRendered is-noteRendered" spellcheck="false">

      <div class="node-line-strict node-hover">

        <div class="node-line node-icon mod-expand-collapse"></div>

      </div>

      <div class="node-backlink-counter u-hidden"></div>

      <a class="node-line Node-bullet" tabindex="-1" title="Created at 22:38:07 on 2023/2/3, last edited at 22:38:12 on 2023/2/3" href="https://dynalist.io/d/~"></a>

      <div class="Node-checkbox"></div>

      <div class="node-line Node-contentContainer">

        <div class="Node-content node-line needsclick" autocorrect="false" tabindex="-1" contenteditable="true" spellcheck="false">本文</div>

        <div class="Node-renderedContent node-line"><span>本文</span> </div>

      </div>

      <div class="Node-openNote" contenteditable="false" title="" style="display: none;"></div>

      <div class="Node-noteContainer">

        <div class="Node-note needsclick" autocorrect="false" tabindex="-1" contenteditable="true" spellcheck="false"> </div>

        <div class="Node-renderedNote"><span></span> </div>

      </div>

    </div>

    <div class="Node-children">

      <div class="Node-outer">...

      </div>

    </div>

  </div>

</div>

アウトラインで簡単に書くとこうなる。

Node-outer
- Node
  - Node-self
    - node-hover
    - node-backlink-counter
    - Node-bullet（title属性に作成日・編集日、href属性にノードのURLあり）
    - Node-checkbox
    - Node-contentContainer（本文）
      - Node-content（編集用）
      - Node-renderedContent（表示用）
    - Node-noteContainer（ノート欄）
      - Node-note（編集用）
      - Node-renderedNote（表示用）
  - Node-children
    - Node-outer...
    - Node-outer...
    - Node-outer...

複数の機能に同じclassが使われていることがあるので、セレクタをどう指定すると自分が狙っている要素をズバッと取得できるかはよく確かめる必要がある。