以下はあくまで動作確認用。本番で使わないように。
HTML 用：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>TEST</title>
<dl id="test">
<dt>Test1</dt>
<dd><p>TEST1</p><p>TEST1</p><p>TEST1</p></dd>
<dt>Test2</dt>
<dd><p>TEST2</p><p>TEST2</p><p>TEST2</p></dd>
<dt>Test3</dt>
<dd><p>TEST3</p><p>TEST3</p><p>TEST3</p></dd>
</dl>
<script type="text/javascript">/*@cc_on@*/
// DD 要素を隠す
/*@if (@_jscript)
document.createStyleSheet ().addRule ('#test dd', 'display: none');
@else@*/
var head = document.getElementsByTagName ('head')[0];
var style = head.appendChild (document.createElement ('STYLE'));
style.type = 'text/css';
style.sheet.insertRule ('#test dd { display: none; }', 0);
/*@end@*/
// 出力領域を作成
var dl = document.getElementById ('test');
var div = dl.parentNode.insertBefore (
dl.ownerDocument.createElement ('DIV'),
dl.nextSibling);
// イベントハンドラ取り付け
document.onclick = function (event) {
/*@if (@_jscript)
var node = window.event.srcElement;
@else@*/
var node = event.target;
/*@end@*/
if (node.tagName == 'DT') {
while (node = node.nextSibling) {
if (node.nodeName == 'DD') {
while (div.hasChildNodes ()) {
div.removeChild (div.firstChild);
}
for (var df = node.ownerDocument.createDocumentFragment (),
n = node.firstChild; n; n = n.nextSibling) {
df.appendChild (n.cloneNode (true));
}
div.appendChild (df);
return false;
}
}
} else {
while (div.hasChildNodes ()) {
div.removeChild (div.firstChild);
}
}
};
</script>
XHTML 用（拡張子は .xhtml か .xml）：<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
</head>
<body>
<dl id="test">
<dt>Test1</dt>
<dd><p>TEST1</p><p>TEST1</p><p>TEST1</p></dd>
<dt>Test2</dt>
<dd><p>TEST2</p><p>TEST2</p><p>TEST2</p></dd>
<dt>Test3</dt>
<dd><p>TEST3</p><p>TEST3</p><p>TEST3</p></dd>
</dl>
<script type="application/javascript"><![CDATA[
// dd 要素を隠す
document.insertBefore (
document.createProcessingInstruction ('xml-stylesheet',
'type="text/css" href="data:text/css,#test dd { display: none }"'),
document.documentElement);
// 出力領域を作成
var dl = document.getElementById ('test');
var div = dl.parentNode.insertBefore (
dl.ownerDocument.createElementNS ('http://www.w3.org/1999/xhtml', 'div'),
dl.nextSibling);
var range = dl.ownerDocument.createRange ();
// イベントリスナ取り付け
document.addEventListener ('click', function (event) {
var node = event.target;
if (node.localName == 'dt') {
while (node = node.nextSibling) {
if (node.localName == 'dd') {
event.preventDefault ();
range.selectNodeContents (div);
range.deleteContents ();
range.selectNodeContents (node);
div.appendChild (range.cloneContents ());
break;
}
}
} else {
range.selectNodeContents (div);
range.deleteContents ();
}
}, false);
]]></script>
</body>
</html>
