jQuery操作系API

categories: javascript

前回の続きで、今日はDOM操作系をJavaScriptと比較しながらやるよ。次のHTML / CSSに対して操作して行きます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>jQuery operation</title>
	</head>
	<body>
		<p id="text"><strong>本文</strong></p>
		<p id="nest"><strong>強調</strong></p>
	</body>
</html>
@charset "utf-8";

#text {
	color: #f00;
}

内容を取得

id=”text”の内容を取得してダイアログに表示(「本文」と表示される)

var text = $('#text').text();
alert(text);
var text = document.getElementById('text').childNodes[0].nodeValue;
alert(text);

内容を変更

id=”text”の内容を「内容を変更しました」に書き換える(「内容を変更しました」と表示される)

$('#text').text('内容を変更しました');
document.getElementById('text').childNodes[0].nodeValue = '内容を変更しました';

スタイルを取得

id=”text”のスタイル・色を取得してダイアログに表示(「rgb(255, 0, 0)」と表示される)

var color = $('#text').css('color');
alert(color);
var p = document.getElementById('text');
// IEは未対応(currentStyle等を使う)
var color = document.defaultView.getComputedStyle(p, null).getPropertyValue('color');
alert(color);
// 以下の方法では外部CSSの値は取れずnullが返ってくるので注意
// var color = document.getElementById('text').style.getPropertyValue('color');

スタイルを設定

id=”text”のスタイル・背景色を黒にする

$('#text').css('background-color', 'black');
document.getElementById('text').style.backgroundColor = 'black';
// 以下の方法でも良いがIE未対応(属性名をCSSと同じに書ける)
document.getElementById('text').style.setProperty('background-color', 'black');

要素を取得

id=”nest”のHTMLを取得してダイアログに表示(「<strong>強調</strong>」と表示される)

var nest = $('#nest').html();
alert(nest);
var nest = document.getElementById('nest').innerHTML;
alert(nest);

要素を設定

id=”nest”のHTMLを「<em>より強調</em>」に書き換える(「より強調」と表示される)

$('#nest').html('<em>より強調</em>');
document.getElementById('nest').innerHTML = '<em>より強調</em>';

内容の前に追加

id=”text”の「本文」の前に「これが」を追加(「これが本文」と表示される)

$('#text').prepend('これが');
var p = document.getElementById('text');
p.insertBefore(document.createTextNode('これが'), p.firstChild);

内容の後に追加

id=”text”の「本文」の後に「です」を追加(「本文です」と表示される)

$('#text').append('です');
var p = document.getElementById('text');
p.insertBefore(document.createTextNode('です'));

要素の前に追加

id=”text”の前に「<h1>タイトル</h1>」を追加(「本文」の前行に「タイトル」と表示される)

$('#text').before('<h1>タイトル</h1>');
var h1 = document.createElement('h1');
h1.appendChild(document.createTextNode('タイトル'));
var p = document.getElementById('text');
p.parentNode.insertBefore(h1, p);

要素の後に追加

id=”text”の後に「<h2>見出し</h2>」を追加(「本文」の後行に「見出し」と表示される)

$('#text').after('<h2>見出し</h2>');
var h2 = document.createElement('h2');
h2.appendChild(document.createTextNode('見出し'));
var p = document.getElementById('text');
p.parentNode.insertBefore(h2, p.nextSibling);

要素を内容前に移動

id=”text”の「本文」前に「<strong>強調</strong>」を移動(「強調本文」と表示される)

$('strong').prependTo('#text');
var strong = document.getElementsByTagName('strong')[0];
var clone = strong.cloneNode(true);
strong.parentNode.removeChild(strong);
var p = document.getElementById('text');
p.insertBefore(clone, p.firstChild);

要素を内容後に移動

id=”text”の「本文」後に「<strong>強調</strong>」を移動(「本文強調」と表示される)

$('strong').appendTo('#text');
var strong = document.getElementsByTagName('strong')[0];
var clone = strong.cloneNode(true);
strong.parentNode.removeChild(strong);
var p = document.getElementById('text');
p.insertBefore(clone);

要素を前に移動

id=”text”の前にid=”nest”を移動(1行目「強調」2行目「本文」と表示される)

$('#nest').insertBefore('#text');
var nest = document.getElementById('nest');
var clone = nest.cloneNode(true);
nest.parentNode.removeChild(nest);
var p = document.getElementById('text');
p.parentNode.insertBefore(clone, p);

要素を後に移動

id=”nest”の後にid=”text”を移動(1行目「強調」2行目「本文」と表示される)

$('#text').insertAfter('#nest');
var text = document.getElementById('text');
var clone = text.cloneNode(true);
text.parentNode.removeChild(text);
var p = document.getElementById('nest');
p.parentNode.insertBefore(clone);

JavaScriptで書くの面倒ですね。次回もこの続きを

tags: ,

Comments

Trackbacks

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL