DOMで色々操作してみよう
現在DOMの勉強をしていますが、なかなか時間が取れず最近怠っていました。
一日少しずつでも進めていきたいと思います!
。。。意気込みはこのへんにして、早速本題に入りましょう。
タイトルにある通り「DOM」を使用して色々操作してみます。
といっても、ノードの追加などをするだけですけど。
ノードとは?
先程からノードとノードと言ってますが、DOMには「要素ノード」「テキストノード」「属性ノード」があります。
要素ノード
HTMLの<p>、<div>などが要素ノード(Element Nodes)です。
テキストノード
要素の中の見出しテキストのことをさします。インデントや改行もテキストノードとして扱われます。
属性ノード
要素につけられたstyle属性もノードになります。
ノードの追加
では早速ノードを追加してみましょう。
HTMLソース
<p id="add">ノードを追加します。</p>
DOM
var newText = document.createTextNode("Create New Text for DOM"); var addNode = document.getElementById('add'); addNode.appendChild(newText);
id=”add”にappendChildでnewTextを挿入します。newTextとは1行目のcreateTextNodeで作られたテキストのことです。
サンプル
サンプルをご覧下さい。
ノードの移動
HTMLソース
<p id="move">ノードが移動します。</p> <p id="logo"><img src="http://www.web-park.org/img/share/cat01.png" /></p>
DOM
var Logo = document.getElementById('logo'); var MoveNode = document.getElementById('move'); MoveNode.appendChild(Logo);
id=”logo”がid=”move”の下に移動します。こちらも同じくappendChildで指定しています。
サンプル
サンプルをご覧下さい。
新しいノード作成
HTMLソース
<div id="create">新たにノードを作成します。</div>
DOM
var DivCreate = document.getElementById('create'); newP = document.createElement("p"); newText = document.createTextNode("Create New Text for DOM") newP.appendChild(newText); DivCreate.appendChild(newP);
id=”create”に新たな要素<p>を追加してその<p>の中にnewTextを入れています。
newP.appendChild(newText);がnewTextをnewPの中にいれ、DivCreate.appendChild(newP);でnewPをDivCreateの中に入れています。
サンプル
サンプルをご覧下さい。
- Web-Parkのホーム >
- Javascript >
- DOMで色々操作してみよう
Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405
COMMENT PLEASE!!
トラックバック
- 「DOMで色々操作してみよう」のトラックバックURL
Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/node.html/trackback