JavaScript for CSS (2)

要素を検索する方法は他にもたくさんあります。

DOM（Document Object Model）では、ターゲットとするノードを
基準にすると以下のような関係になる。
childNodesについては、子ノードが存在しない場合は空のノードリ
ストが返るが、それ以外は存在しなければnullが返る。
読み出し専用。

parentNode
  previousSibling ターゲット nextSibling
    childNodes ( firstChild childNodes.item(1) .. lastChild )

itemメソッドは0から始まるソース上での出現順で検索する。存在しない場合はnullが返る。

○ 親要素を操作する
<SCRIPT type="text/javascript">
<!--
function myFunc1(obj){
 if(document.styleSheets) obj.style.backgroundColor="#ccf";
}

function myFunc2(obj){
 if(document.all)
  obj.parentElement.style.backgroundColor="#fcc";
 else if(document.styleSheets)
  obj.parentNode.style.backgroundColor="#fcc";
}

function myFunc3(obj){
 if(document.all)
  obj.parentElement.parentElement.style.backgroundColor="#cfc";
 else if(document.styleSheets)
  obj.parentNode.parentNode.style.backgroundColor="#cfc";
}
//-->
</SCRIPT>

<P> <SPAN onmouseover="myFunc1(this)" onclick="myFunc2(this) ondblclick="myFunc3(this)"">イベントを受け取る要素</SPAN> </P>

○ 子要素を操作する

DOMではテキストノードやコメントノードもカウントするため、IEのDHTML Object Modelとインデックスが異なる。子孫ではなく子であることに注意。

<SCRIPT type="text/javascript">
<!--
function myFunc4(obj){
 if(document.all)
  obj.children.item(0).style.backgroundColor="#ccf";
 else if(document.styleSheets)
  obj.childNodes.item(1).style.backgroundColor="#ccf";
}

function myFunc5(obj){
 if(document.all)
  obj.children[1].children[0].style.color="blue";
 else if(document.styleSheets)
  obj.childNodes[3].childNodes[1].style.color="blue";
}
//-->
</SCRIPT>
<DIV onmouseover="myFunc4(this)" onclick="myFunc5(this)">
テキスト<SPAN>最初の子要素</SPAN>テキスト<SPAN>2番目の子要素の<SPAN>最初の子要素</SPAN></SPAN>
</DIV>

○ Documentオブジェクト（HTML文書全体）のメソッド, プロパティを利用する
Xdocument.write(X)
document.documentElement
document.getElementsByTagName
document.getElementById
document.getElementsByName

DOMを利用。IE5/6はいつものように中途半端に、Netscape6は細かいバグが目立つがDOM2の大部分までサポートしている。毎度のことながら、IEはOSによって動作が異なる場合も多い。

namedItemメソッドはid属性値を検索後、name属性が許されていればname属性値も検索する。存在しない場合はnullが返る。

tagNameプロパティは読み出し専用で、要素名をHTMLの場合は大文字で返す。

<SCRIPT type="text/javascript">
<!--
function fDom1(){
 if(document.documentElement)
  alert(document.documentElement.tagName);
}

function fDom2_1(){
 if(document.getElementsByTagName){
  var obj=document.getElementsByTagName("SPAN").item(6);
  obj.style.display="block";
 }
}

function fDom2_2(){
 if(document.getElementsByTagName){
  var obj
   =document.getElementsByTagName("INPUT").namedItem("bN1");
  obj.style.marginLeft="100px";
 }
}
function fDom2_3(){
 if(document.getElementsByTagName){
  var vA=document.getElementsByTagName("IFRAME");
  var vB=document.getElementsByTagName("SPAN").item(1000);
  var vC=document.getElementsByTagName("LINK").item(0).childNodes;
  if(vA!=null && vC!=null) alert(vA+"\n"+vB+"\n"+vC);
   // IFRAME要素は存在しないが、vAはnullではない。
   // LINKは空要素だが、vCはnullではない。
 }
}

function fDom3(){
 if(document.getElementById){
  var obj=document.getElementById("dom1");
  obj.style.backgroundColor="yellow";
 }
}

function fDom4(){
 if(document.getElementsByName){
  var obj=document.getElementsByName("bN1").item(0);
  obj.style.padding="10px";
 }
}
//-->
</SCRIPT>

<SPAN id="dom1">SPAN</SPAN>
<INPUT type="button" name="bN1" value="bN1">

span



← WinIE5（MacIE5, WinIE6はOK）はエラーになる


※全ての要素にマッチする特別な値として「"*"」を使用することができるのですが、WinIE5（MacIE5, WinIE6はOK）は正しく実装していません。

要素へのリファレンスを取得後、getElementsByTagNameメソッドで子要素集合にアクセスすることも可能ですが、getElementByIdやgetElementsByNameメソッドは使えません。

○ all

IE4以降のみ（iCabも?）で利用できる全要素の集合体。インデックスは0から始まるソース上での出現順。

  • all(要素のインデックス。「<」で始まるものはみんな数えてしまう)
  • all("id属性値またはname属性値")
  • all("複数存在するname属性値", インデックス)
  • all.item(要素のインデックス。「<」で始まるものはみんな数えてしまう)
  • all.item("id属性値またはname属性値")
  • all.item("複数存在するname属性値", インデックス)
  • all.tags("要素名").item(インデックス)
  • all.tags("要素名").item("id属性値またはname属性値")
  • all.tags("要素名").item("複数存在するname属性値", インデックス)
  • all.tags("要素名")[インデックス]
<SCRIPT type="text/javascript">
<!--
function fAll(){
 if(document.all){
  document.all("bN2",0).style.margin="2em";
   // document.all("bN2")
   // document.all.tags("INPUT").item(1)

  document.all("id1").style.color="red";
   // document.all.item("id1")
   // document.all.tags("SPAN").item(7)
 }
}
//-->
</SCRIPT>

<SPAN id="id1">span</SPAN>
<INPUT type="button" name="bN2" value="test" onclick="fAll()">

span

○ layers

NN4のみで利用できる。LAYER（独自拡張）, ILAYER（独自拡張）, 絶対配置, 相対配置要素の集合体。Netscape6ではサポートされていない。

<SCRIPT type="text/javascript">
<!--
function fLayer(){
 if(!document.layers) return; // サポートしていなければスキップ 

 var parentLayer=document.layers["layer1"];
 var childLayer=parentLayer.layers["layer2"];

 childLayer.bgColor="silver";
 parentLayer.bgColor="yellow";
}
//-->
</SCRIPT>

<DIV id="layer1" style="position: relative">layer1
<SPAN id="layer2" style="position: relative">layer2</SPAN>
</DIV>
layer1 layer2

○ body

文書の内容がBODYで包含されていればBODY要素、フレームセット文書であれば最も外側のFRAMESET要素を返す。

<SCRIPT type="text/javascript">
<!--
function fBody(p){
 if(document.styleSheets){
  document.body.style[p]="5em";
  document["bo"+"dy"]["style"]["marginBottom"]="5em";
 }
   // document.getElementsByTagName("BODY").item(0)
}
//-->
</SCRIPT>

○ images

文書の全IMG要素の集合体。

<SCRIPT type="text/javascript">
<!--
var myImg;

if(document.images){    // NN3, IE4以降
 myImg=new Image(); // ダウンロードしておく
 myImg.src="img/img2.gif";
}

function fImage(){
 if(document.images) document.images["img1"].src=myImg.src;

 if(document.styleSheets){
  var imgS=document.images[0].style;
   // document.getElementsByTagName("IMG").item(0)
   // document.getElementById("img1")
   // document.getElementsByTagName("IMG").namedItem("img1")

  imgS.width="50%";
  imgS.height="20px";
  imgS.border="5px double red";
 } 
}
//-->
</SCRIPT>

<A href="uri" onmouseover="fImage()" onclick="return false">
<IMG src="img/img.gif" name="img1" id="img1" width="30"
        height="30" alt="サンプル画像" onclick="fImage()"></A>

サンプル画像

○ applets

文書の全OBJECT要素（APPLET要素を含む）の集合体。

<SCRIPT type="text/javascript">
<!--
function fApplet(){
 if(document.styleSheets){
  var objS=document.applets[0].style;

  objS.width="50%";
  objS.height="20px";
  objS.border="5px double red";
 } 
}
//-->
</SCRIPT>
<OBJECT data="img/img.gif" type="image/gif"
      width="30" height="30" onmouseover="fApplet()">
サンプル画像
</OBJECT>
サンプル画像
○ links

href属性に値を持つ全てのAREAとA要素の集合体。

<SCRIPT type="text/javascript">
<!--
function fLink(){
 if(document.styleSheets){
  document.links[17].style.textDecoration="underline overline";
  document.links[18].style.display="none";
 }
}
//-->
</SCRIPT>

次のページ 前のページ

○ forms

文書の全フォームの集合体。プロパティとして、コントロールの全集合体であるelementsを持つ。各コントロールのformプロパティは、自身を含むFORM要素（存在しない場合はnull）を返す。 

<SCRIPT type="text/javascript">
<!--
function fForm(){
 var obj=document.forms[1];
  // document.forms["fName1"];

 obj.elements[0].value="入力欄1";
 obj.elements["eName2"].value="入力欄2";

 if(document.styleSheets){
  obj.elements[0].style.width="100px";
  obj.elements["eName2"].style.height="50px";
  obj.style.backgroundColor="#48d1cc";
 }
}
function fForm_2(){
 if(document.styleSheets)
  arguments[0].style.border="3px green solid";
}
//-->
</SCRIPT>

<FORM action="./" name="fName1">
<P>
<INPUT name="eName1"> <INPUT name="eName2">
<INPUT name="eName3" type="button" value="×"
 onclick="fForm_2(this.form)"
 ondblclick="fForm_2(this.form.elements[0])">
</P>
</FORM>

○ anchors

文書に含まれるname属性に値を持つ全てのA要素の集合体。

<SCRIPT type="text/javascript">
<!--
function fAnchor(){
 var obj=document.anchors[0];

 if(document.styleSheets)
  obj.style.font="italic bold large Verdana, sans-serif";
}
//-->
</SCRIPT>

<P><A name="eName1" onclick="fAnchor()">anchor</A></P>

anchor

○ 集合体を構成している要素（ノード）の数

それぞれの集合体を構成している（読み込み済みの）要素の数は、lengthプロパティで取得できます。 

<SCRIPT type="text/javascript">
<!--
function myFunc11(){
 alert(document.links.length);
}
//-->
</SCRIPT>


<SCRIPT type="text/javascript">
<!--
function myFunc12_1(){
 if(!document.styleSheets) return; // スキップ
 var coll=document.links;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].style.color="white";
  coll[i].style.backgroundColor="black";    
 }
}

function myFunc12_2(){
 if(!document.styleSheets) return;
 var coll=document.links;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].setAttribute("style"
   ,"color: blue;background-color: #fcc");
 } // Netscape6ならまとめて書ける。 
}   // IE不可。

function myFunc12_3(){
 if(!document.styleSheets) return;
 var coll=document.links;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].style.cssText="color: red;background-color: #ccf";
 } // IE4以降はこれならOK。
}

function myFunc12_4(){
 if(!document.styleSheets) return;
 var coll=document.links;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].removeAttribute("style");
 }
}

//-->
</SCRIPT>


<SCRIPT type="text/javascript">
<!--
function myFunc13_1(){
 if(!document.styleSheets) return;
 var coll=document.links;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].removeAttribute("style");
 } // style属性を削除する。IE4/5（WinIE6はOK）不可。
}

function myFunc13_2(){
 var coll=document.links;
 if(!document.styleSheets) return;

 for (i=0,j=coll.length; i<j; i++){
  coll[i].style.cssText="";
 } // IE4以降はこれならOK。
}
//-->
</SCRIPT>

Prev | Next | CSS1 主要属性対応表 | HOMEへ戻る