kansiho's blog

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

javascriptでDOMを操ろう. バックエンドエンジニアのためのDOM操作関連スニペットまとめ

http://org-rabo.com/wp-content/uploads/2016/06/javascriptlogo.png

バックエンドエンジニアがjavascriptを学ぶメリットはたくさんあります。javascriptメソッドを活用すると、数十行かかっていた挙動がjavascriptの1コードで達成できる、といったことも。「JavaScriptを1行書くだけで、バックエンド専業エンジニアが不要になるAPI」なんてサービスもあるくらいですから。バックエンドの解決策とフロントエンドの解決策、その2つの選択肢から選べるエンジニアになるべく、とりわけ需要の高いと思われる、Webページの要素の操作と、マウスとの連動に絞って、まとめます。

バックエンドエンジニアだって、lets' javascript!

DOM(Document Object Model)とは

文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。 これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。 DOM仕様書においては「文書」という用語は広い意味で使われる

DOMとは何か

ざっくりいうと、文書の論理構造を示すもので、木構造になっています。

http://courses.cs.washington.edu/courses/cse190m/10su/lectures/slides/images/dom_tree.gif

http://courses.cs.washington.edu/courses/cse190m/10su/lectures/slides/images/dom_tree.gif

DOMツリーのひとつひとつの要素を、ノードと言います。上の図の、上位のノードが共通な要素をsibling nodes(きょうだいノード) といい、直接上位にあるノードをparent nodeといいます。 ノードは、以下のようなプロパティーを持っていて、siblingやparentを簡単にとってこれます。

  • firstChild, lastChild
  • childNodes
  • nextSibling, previousSibling
  • parentNode

childNodes.length メソッドで、何個のノードを持っているか知ることができる。

要素を取得してみる: getElementBy…

  • IDで取得する: document.getElementById(id);

  • classで指定する: document.getElementByClassName('container wrapper');  ByClassではなくByClassNameであることに注意. 取得できるのはHTMLCollectionという、配列と似た構造のデータ. 半角スペースで区切って、複数のクラスを指定できる。

  • Tagで指定する: document.getElementsByTagName("div") 配列で取得される.

  • 画像を全て取得する: document.images;

  • CSSセレクタで一致する最初のオブジェクトを取得する: document.querySelector('#wrapper .article h1'); //最初の一つを取得

  • CSSセレクタで一致するすべてのオブジェクトを取得する: document.querySelectorAll('a'); //すべて取得

要素を取得して、テキストを書き換える

テキストのみの書き換えならtextContent

 document.getElementById("str").textContent="テキストの書換え";

htmlの書き換えならinnerHTML

 document.getElementById("str").innerHTML="<b>タグ</b>を含む書換え";

マウスアクション

参考: 【JavaScript】ウェブサイト制作の際によく使うイベントまとめ | Web制作会社スタイル

ある要素をクリックしたら: addEventListener( ‘click’ , {})

var element = document.getElementById("ID名");
element.addEventListener("click",function(event){
//処理の内容
});

クリックした位置を取得する(絶対座標): e.pageX, e.pageY

Webサイトのどの位置をクリックしたか取得する。

// マウスイベントを設定
document.body.addEventListener( "click", function( e ) {
    // マウス位置を取得する
    var mouseX = e.pageX ;  // X座標
    var mouseY = e.pageY ;  // Y座標
} ) ;

ある要素における、クリックした位置を取得する(相対座標) : getBoundingClientRect()

target というIDの付与された要素の左上から、マウスまでの距離を取得する。

// マウスイベントを設定
document.getElementById( "target" ).addEventListener( "click", function( e ) {
    // マウス位置を取得する
    var mouseX = e.pageX ;  // X座標
    var mouseY = e.pageY ;  // Y座標

    // 要素の位置を取得
    var element = document.getElementById( "target" ) ;
    var rect = element.getBoundingClientRect() ;

    // 要素の位置座標を計算
    var positionX = rect.left + window.pageXOffset ;    // 要素のX座標
    var positionY = rect.top + window.pageYOffset ; // 要素のY座標

    // 要素の左上からの距離を計算
    var offsetX = mouseX - positionX ;
    var offsetY = mouseY - positionY ;
} ) ;

プルダウンを選択したら (onchange関数)

<form action="#">
    <select onchange="alert(this.options[this.options.selectedIndex].text)">
        <option value="">▼選択してください</option>
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </select>
</form>

要素を選択したら:onselect

こんな感じでマウスハイライトしたら、発火するイベント。 f:id:serendipity4u:20170619145616p:plain

 <textarea cols="60" rows="2" onselect="alert('テキストが選択されました')">
このテキストを選択してみて下さい
    </textarea>

どこかのキーが押されたら: addEventListener(‘keydown’ , {})

document.body.addEventListener("keydown",function(event){
//処理の内容
});

要素からマウスが外れたら: addEventListener(‘mouseout’, {})

var element = document.getElementById("ID名");
element.addEventListener("mouseout",function(event){
//処理の内容
});

要素にマウスを載せたら:

要素が右クリックされたら: addEventListener(‘contextmenu’, {})

var element = document.getElementById("ID名");
element.addEventListener("contextmenu",function(event){
//処理の内容
});

要素がカット/コピーされたら: addEventListener(‘cut’, {})

var element = document.getElementById("ID名");
element.addEventListener("cut",function(event){
//処理の内容
});

DOMの構築が完了したら: addEventListener(‘DOMContentLoaded’, {})

window.addEventListener("DOMContentLoaded",function(event){
//処理の内容
});

頻出表現

タイマー関数 setInterval( );

決まった時間ごとに()の中の関数を繰り返し実行する。他にも、JavaScriptのタイマー関数には「setTimeout」があり、「setInterval」と違って、決まった時間が来たら一度だけ()の中の関数を実行する。

setInterval(関数function, 一定時間の指定[, 引数1, 引数2, …])

var count = 0;
      var countup = function(){
        console.log(count++); // countup関数を用意
      } 

setInterval(countup, 1000); // 1000ミリ秒ごとにcountup()を実行。

Webページのスコープ内で実行されるscriptを注入する: createElement(‘script’)

// <script>エレメントを作って注入する。
var script = document.createElement("script");
script.textContent = "hoge();"; // 実行したい処理
document.body.appendChild(script); 

オブジェクトの存在確認 : undefined

if (typeof a === "undefined") {
  alert('a = undefined');
}

jsonシリアライズ: parse, stringify

JSONフォーマットの文字列は、見た目はJSのオブジェクト同じに見えても実際のフォーマットが異なるため、JSONフォーマットで受け取ったオブジェクトはJSオブジェクトにデシリアライズする必要がある。

  • jsonをjsハッシュにするとき:JSON.parse(getData);
  • js ハッシュから json にするとき:JSON.stringify(localObject);

参考

eng-entrance.com

github.com

courses.cs.washington.edu

phpjavascriptroom.com