mikeneko

VirtualDomクラス (仮想DOM)

# 仮想DOMの設定方法

<div>
    <div v="title"></div>
</div>

import { View } from "View";

export class HomeView extends View {

    public handle() {

        this.vdos.title.text = "Title Text Sample .....";
    }
}

: 仮想DOMの子要素設定

<div>
    <div v="text.area1"></div>
    <div v="text.area2"></div>
</div>

// text.area1 へのテキスト指定
this.vdos.text.childs.area1.text = "Area1 Text ....";

// text.area2 へのテキスト指定
this.vdos.text.childs.area2.text = "Area2 Text ....";

# 仮想DOMの指定要素の操作方法

: 対象の要素の件数を取得

<div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
</div>

const length : number = this.vdos.item.length;

: 一番最初の要素を操作

this.vdos.item.first.text = "First Item";

<div>
    <div v="item">First Item</div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
</div>

: 一番最後の要素を操作

this.vdos.item.last.text = "Last Item";

<div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item">Last Item</div>
</div>

: 指定インデックスの要素を操作

// 2番目の要素にテキスト設定
this.vdos.item.index(2).text = "Index Item (2)";

<div>
    <div v="item"></div>
    <div v="item"></div>
    <div v="item">Index Item (3)</div>
    <div v="item"></div>
    <div v="item"></div>
</div>

: 1つ前の要素を操作

this.vdos.now.prev.text = "Prev Text ....";

<div>
    <div>Prev Text ....</div>
    <div v="now"></div>
</div>

: 1つ先の要素を操作

this.vdos.now.next.text = "Next Text ....";

<div>
    <div v="now"></div>
    <div>Next Text ....</div>
</div>

: 親の要素を操作

this.vdos.now.parent.append("Parent Text ....");

<div>
    <div v="now"></div>
    Parent Text ....
</div>

: 一番最後の要素を操作

this.vdos.item.last.text = "First Item";

# テキストの設定・取得

: テキストの設定

<div>
    <div v="title"></div>
</div>

this.vdos.title.text = "Title Text Sample .....";

テキストは複数の要素を配置しても対応が可能

<div>
    <div v="title"></div>
    <div v="title"></div>
    <div v="title"></div>
    <div v="title"></div>
    <div v="title"></div>
</div>

this.vdos.title.text = "Title Text Sample .....";

: テキストの取得

<div>
    <div v="title">Text Sample ..... OK</div>
</div>

console.log(this.vdos.title.text);   // <= "Text Sample ..... OK"を出力

# HTMLタグの設定/取得

: HTMLタグの設定

<div>
    <div v="htmlContent"></div>
</div>

this.vdos.htmlContent.html = "<h2>HTML Content .....</h2>";

テキストは複数の要素を配置しても対応が可能

<div>
    <div v="htmlContent"></div>
    <div v="htmlContent"></div>
    <div v="htmlContent"></div>
    <div v="htmlContent"></div>
    <div v="htmlContent"></div>
</div>

this.vdos.htmlContent.html = "<h2>HTML Content .....</h2>";

: HTMLタグの取得

<div>
    <div v="htmlContent"><h2>HTML Content ......</h2></div>
</div>

console.log(this.vdos.htmlContent.html);   // <= "<h2>HTML Content ......</h2>"を出力

# OuterHTMLタグの取得

const outerHtml : string = this.vdos.htmlContent.outerHtml;

# 仮想DOM内の要素取得 (querySelector)

<div v="target">
    <div></div>
    <div></div>
    <div></div>
    <div class="subclass"></div>
</div>

const subClass : VirtualDom = this.vdos.target.querySelector(".subclass");
subClass.text = "SubClass Text";

# 仮想DOMへのHTMLタグ追記 (afterBegin)

<div v="list"></div>

this.vdos.list.afterBegin("<div>After Begin1...</div>");
this.vdos.list.afterBegin("<div>After Begin2...</div>");
this.vdos.list.afterBegin("<div>After Begin3...</div>");

<div v="list">
    <div>AFter Begin3...</div>
    <div>AFter Begin2...</div>
    <div>AFter Begin1...</div>
</div>

# 仮想DOMへのHTMLタグ追記 (append)

<div v="list"></div>

this.vdos.list.append("<div>Append1...</div>");
this.vdos.list.append("<div>Append2...</div>");
this.vdos.list.append("<div>Append3...</div>");

<div v="list">
    <div>Append1...</div>
    <div>Append2...</div>
    <div>Append3...</div>
</div>

# 仮想DOMの削除 (remove)

<div v="delTarget">Delete Target...</div>

this.vdos.delTarget.remove();

# スタイルシートの設定

<div v="target">Style Sheet Test.</div>

this.vdos.target.style({ color: "red" });

<div v="target" style="color:red">Style Sheet Test.</div>

# スタイルシートのセレクター値取得

<div v="target" style="color:red">Style Sheet Test.</div>

console.log(this.vdos.target.getStyle("color")); // <= redを出力

# 属性値の設定/取得

: 属性値の設定

<div v="target"></div>

this.vdos.target.attr("data-id", "sample-data");

<div v="target" data-id="sample-data"></div>

: 属性値の取得

<div v="target" data-id="sample-data"></div>

console.log(this.vdos.target.attr("data-id"));      // <= "data-id" を出力

# 属性値の存在可否

<div v="target" data-id="sample-data"></div>

console.log(this.vdos.target.isAttr("data-id"));      // <= 存在している場合は true を出力

# 属性値の削除

<div v="target" data-id="sample-data"></div>

this.vdos.target.removeAttr("data-id");

<div v="target"></div>

# src値の設定/取得

: src値の設定

<img v="image">

this.vdos.target.src = "img/sample.png";

<img v="image" src="img/sample.png">

: src値の取得

console.log(this.vdos.target.src);

# placeHolderの設定/取得

: placeHolderの設定

<input type="text">

this.vdos.target.placeHolder = "placeHolder text";

<input type="text" placeholder="placeHolder text">

: placeHolderの取得

console.log(this.vdos.target.placeholder);

# hrefの設定/取得

: hrefの設定

<link rel="stylesheet" v="target">

this.vdos.target.href = "style.css";

<link rel="stylesheet" v="target" href="style.css">

: hrefの取得

console.log(this.vdos.target.href);

# idの設定/取得

: idの設定

<div v="target"></div>

this.vdos.target.id = "id1";

<div v="target" id="id1"></div>

: idの取得

console.log(this.vdos.target.id);

# nameの設定/取得

: nameの設定

<div v="target"></div>

this.vdos.target.name = "name1";

<div v="target" name="name1"></div>

: nameの取得

console.log(this.vdos.target.name);

# 要素の表示/非表示の切替操作

<div v="target"></div>

// 要素を表示
this.vdos.target.display = true;     

// 要素を非表示
this.vdos.target.display = false;

# 要素の有効化/無効化の切替操作

<input type="text" v="value1">

// 要素を無効化
this.vdos.value1.disable = true;     

// 要素を有効化
this.vdos.value1.disable = false;

# class属性の存在可否

<div v="target" class="class1"></div>

console.log(this.vdos.target.isClass("class1"));          // <= 存在する場合は true を出力

# class属性の追加

<div v="target" class="class1"></div>

this.vdos.target.addClass("open");

<div v="target" class="class1 open"></div>

# class属性の削除

<div v="target" class="class1 open"></div>

this.vdos.target.removeClass("open");

<div v="target" class="class1"></div>

# 仮想DOMのデータ受渡

: データの設定

<div v="target"></div>

this.vdos.target.data("value", 123);

: データの取得

console.log(this.vdos.target.data("value"));

# 仮想DOMのデータ削除

this.vdos.target.removeData("value");

# イベントハンドラの設定

<button v="btn"></button>

this.vdos.btn.on("click", () => {
    console.log("Button Click....");
});

: ハンドラの引数

this.vdos.btn.on("click", (e : Event) => {
    console.log(e);
});

this.vdos.btn.data("value", 2345);

this.vdos.btn.on("click", (_, my: VirtualDom) => {
    console.log(my.data("value"));      // <= 2345 を出力
});

# イベントハンドラの省略形記述

: クリック時 (onClick)

<button v="btn">Click Button!</button>

this.vdos.btn.onClick = (_, my : VirtualDom) => {
    console.log(my.text);
};

: ダブルクリック時 (onDblClick)

<button v="btn">Double Click Button!</button>

this.vdos.btn.onDblClick = (_, my : VirtualDom) => {
    console.log(my.text);
};

: フォーカス移動時 (onFocus)

<input v="input">

this.vdos.input.onFocus = (_, my : VirtualDom) => {
    console.log(my.value);
};

: 入力値/選択肢変更時 (onChange)

<input v="input">

this.vdos.input.onChange = (_, my : VirtualDom) => {
    console.log(my.value);
};

: マウスボタンクリック直後 (onMouseDown)

<div v="target">Mouse Down...</div>

this.vdos.target.onMouseDown = (_, my : VirtualDom) => {
    console.log(my.text);
};

: マウスボタンクリック直後 (onMouseUp)

<div v="target">Mouse Up...</div>

this.vdos.target.onMouseUp = (_, my : VirtualDom) => {
    console.log(my.text);
};

: マウス移動時 (onMouseMove)

<div v="target">Mouse Move...</div>

this.vdos.target.onMouseMove = (_, my : VirtualDom) => {
    console.log(my.text);
};

# イベントの実行

<button v="btn">Button</button>

// ボタンclickイベントの設定
this.vdos.btn.onClick = () => {
    console.log("Button Click!");
};

// ボタンを押す
this.vdos.btn.dispatch("click");

# 入力値/選択値の設定

: テキストボックス/テキストエリアの場合

<input type="text" v="input1">

this.vdos.input.value = "Input Text...">

: プルダウンメニューの場合

<select v="select">
    <option value="0">Select 0</option>
    <option value="1">Select 1</option>
    <option value="2">Select 2</option>
    <option value="3">Select 3</option>
</select>

this.vdos.select.value = 1;

: ラジオボタンの設定

<label>
    <input type="radio" name="_" v="radio" value="0"> Radio 0
</label>
<label>
    <input type="radio" name="_" v="radio" value="1"> Radio 1
</label>
<label>
    <input type="radio" name="_" v="radio" value="2"> Radio 2
</label>
<label>
    <input type="radio" name="_" v="radio" value="3"> Radio 3
</label>

this.vdos.radio.value = 1;

: チェックボックス(単一)の場合

<label>
    <input type="checkbox" name="_" v="agree"> I Agree
</label>

this.vdos.agree.checked = true;

: チェックボックス(複数)の場合

<label>
    <input type="checkbox" name="_" v="checkbox" value="0"> Checkbox 0
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="1"> Checkbox 1
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="2"> Checkbox 2
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="3"> Checkbox 3
</label>

this.vdos.checkbox.value = [ 1, 3 ];

# 入力値/選択値の取得

<input type="text" v="input1">

conosle.log(this.vdos.input.value);

: チェックボックス(単体)の場合

<label>
    <input type="checkbox" name="_" v="agree"> I Agree
</label>

conosle.log(this.vdos.agree.checked);

: チェックボックス(複数)の場合

<label>
    <input type="checkbox" name="_" v="checkbox" value="0"> Checkbox 0
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="1"> Checkbox 1
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="2"> Checkbox 2
</label>
<label>
    <input type="checkbox" name="_" v="checkbox" value="3"> Checkbox 3
</label>

console.log(this.vdos.checkbox.value);

# 入力値/選択値のクリア

<input type="text" v="input1">

this.vdos.input.reset();

# (selectタグ) 項目選択肢の設定

<select v="select"></select>

this.vdos.select.selectAddParam({
    0: "Select 0",
    1: "Select 1",
    2: "Select 2",
    3: "Select 3",
    4: "Select 4",
});

# (selectタグ) 項目選択肢のリセット

this.vdos.select.selectResetParam();

# (selectタグ) 未選択項目のセット

this.vdos.select.selectEmpty("---- Select ----");

# (selectタグ) 選択テキストの取得

console.log(this.vdos.select.selectedText());

This site is open source. Improve this page.