<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
color: #000000;
background-color: #FFCCCC;
}
div.Ar_text{
color: #000000;
background-color: #FFFFFF;
margin: 1em auto;
padding: 1px;
width: 70%;
}
div.Ar_text div.section{
margin: 1em 1em;
}
div.Ar_text p{
margin: 0em;
}
div.Ar_text p.Ar_Button{
color: #000000;
background-color: #CCCCFF;
width: 320px;
margin: 1em;
}
</style>
<script type="text/javascript">
function Ar_ChangeMain(Ar_Button){
var Ar_text = Ar_Button.firstChild.nodeValue;
var Ar_child = Ar_Button.parentNode.getElementsByTagName('div');
for (i=0;i<Ar_child.length;i++){
if(Ar_child[i].className.match(/Ar_main/i)){
if(Ar_text == '続きを読む'){
Ar_child[i].style.display = "block";
Ar_text = document.createTextNode('文章を閉じる');
Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
}
else{
Ar_child[i].style.display = "none";
Ar_text = document.createTextNode('続きを読む');
Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
}
}
}
}
function Ar_SetButton(){
if(document.compatMode=="CSS1Compat"){
var Ar_div = document.getElementsByTagName('div');
for (i=0;i<Ar_div.length;i++){
if(Ar_div[i].className.match(/Ar_text/i)){
var Ar_p = document.createElement('p');
var Ar_text = document.createTextNode('続きを読む');
Ar_p.appendChild(Ar_text);
Ar_p.className = 'Ar_Button';
Ar_div[i].appendChild(Ar_p);
Ar_p.onclick = function(){
Ar_ChangeMain(this);
}
}
if(Ar_div[i].className.match(/Ar_main/i)){
Ar_div[i].style.display = "none";
}
}
}
}
window.onload = function(){
Ar_SetButton();
}
</script>
</head>
<body>
<h1>夢野久作</h1>
<div class="section Ar_text">
<div class="section Ar_first">
<h2>縊死体</h2>
<p>どこかの公園のベンチである。</p>
</div>
<div class="section Ar_main">
<p>眼の前には一条の噴水が、夕暮の青空高く高くあがっては落ち、あがっては落ちしている。</p>
<p>その噴水の音を聞きながら、私は二三枚の夕刊を拡げ散らしている。そうして、どの新聞を見ても、私が探している記事が見当らないことがわかると、私はニッタリと冷笑しながら、ゴシャゴシャに重ねて押し丸めた。</p>
</div>
</div>
<div class="section Ar_text">
<div class="section Ar_first">
<h2>虫の生命</h2>
<p>炭焼きの勘太郎は妻も子も無い独身者（ひとりもの）で、毎日毎日奥山で炭焼竈（がま）の前に立って煙の立つのを眺めては、淋しいなあと思っておりました。</p>
</div>
<div class="section Ar_main">
<p>今年も勘太郎は炭焼竈に楢の木や樫の木を一パイ詰めて、火を点（つ）けるばかりにして正月を迎えましたが、丁度二日の朝の初夢に不思議な夢を見ました。</p>
<p>勘太郎は睡っているうちに、どこからともなく悲しい小さい声で歌う唱い声が聞こえて来ました。</p>
</div>
</div>
</body>
</html>function Ar_SetButton(){
var Ar_p = document.createElement('p');
Ar_p.onclick = function(){
Ar_ChangeMain(this);
}
}(前略)
<script type="text/javascript">
function Ar_ChangeMain(Ar_Button){
var Ar_text = Ar_Button.firstChild.nodeValue;
var Ar_child = Ar_Button.parentNode.getElementsByTagName('div');
for (var i=0;i<Ar_child.length;i++){
if(Ar_child[i].className.match(/Ar_main/i)){
if(Ar_text == '続きを読む'){
Ar_child[i].style.display = "block";
Ar_text = document.createTextNode('文章を閉じる');
Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
}
else{
Ar_child[i].style.display = "none";
Ar_text = document.createTextNode('続きを読む');
Ar_Button.replaceChild(Ar_text, Ar_Button.firstChild);
}
}
}
}
function Ar_SetButton(){
if(document.compatMode=="CSS1Compat"){
var Ar_div = document.getElementsByTagName('div');
for (var i=0;i<Ar_div.length;i++){
if(Ar_div[i].className.match(/Ar_text/i)){
var Ar_p = document.createElement('p');
var Ar_text = document.createTextNode('続きを読む');
Ar_p.appendChild(Ar_text);
Ar_p.className = 'Ar_Button';
Ar_div[i].appendChild(Ar_p);
Ar_p.onclick = function(){
Ar_ChangeMain(this);
}
Ar_p = null;
}
if(Ar_div[i].className.match(/Ar_main/i)){
Ar_div[i].style.display = "none";
}
}
}
}
window.onload = function(){
Ar_SetButton();
}
</script>
(後略) script engine ! DOM Tree
!
! root
! |
+------------Function1------------+ ! +-----+-----+
| | ! | |
| [n1]----------------------------|----!---> node1 |
| | ! |
| [n2]----------------------------|----!----------> +---node2---+
| | ! | |
| [f1]---> +---Function2----+ <---|----!------------|--[click] |
| | | | ! | |
| | [n1] [n2] [f1] | | ! +-----------+
| | | | !
| +----------------+ | !
| | !
+---------------------------------+ !
!