JavaScript for CSS (10)

  1. Netscape6, WinIE5ではスクリプトに全角スペースが紛れ込んでいてもエラーにならない。MacIE4はバグだらけ。

  2. 場合分けが煩わしいなら、新たに関数を定義できる。

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

function ModifyButton(){
  getElementById('input1').value="成功!";
  getElementsByTagName('INPUT')[0].style.height="3em";
}

function getElementById(id){
 var element=d.getElementById && d.getElementById(id)
        || d.all && d.all(id);

 return element;
}

function getElementsByTagName(tagName){
 var elements=
       d.getElementsByTagName && d.getElementsByTagName(tagName)
        || d.all && d.all.tags(tagName);

 return elements;
}
//-->
</SCRIPT>
    Xdocument.write(X)
    document.getElementsById
    window.getElementById
    （新たに定義したもの）
    document.getElementsByTagName
    window.getElementsByTagName
    （新たに定義したもの）
     

    <SCRIPT type="text/javascript">
<!--
function getElementsByClassName(ClassName,tagName,parentElement){
 var elements=new Array();
 var d=parentElement ? parentElement : document;
 var allElements;

 if(tagName)
   allElements=d.all && d.all.tags(tagName)
    || d.getElementsByTagName && d.getElementsByTagName(tagName);
 else allElements=d.all || d.getElementsByTagName("*");
 
 /* 要素数が多い場合、要素数を再カウントしないようにしないと
    WinIEではかなり遅くなる。 */
 for(var i=0,len=allElements.length; i<len; i++)
  if(allElements[i].className==ClassName)
   elements[elements.length]=allElements[i];

 return elements;
}

function ModifyElementByClassName(obj){
 var timeStart=new Date();

 for(var i=0,elements; i<10; i++)
  elements=getElementsByClassName('test');
   // class="test"のコレクションを10回取得

 var timeEnd=new Date();
 obj.value=(timeEnd-timeStart)+"ms";
}

function ModifyPreByClassName(obj){
 var timeStart=new Date();

 for(var i=0,elements; i<10; i++)
  elements=getElementsByClassName('test','pre');
   // pre class="test"のコレクションを10回取得

 var timeEnd=new Date();
 obj.value=(timeEnd-timeStart)+"ms";
}
//-->
</SCRIPT>


    <SCRIPT type="text/javascript">
<!--
function getClassList(tagName,parentElement){
 var elements=new Array();
 var d=parentElement ? parentElement : document;
 var allElements;

 if(tagName)
   allElements=d.all && d.all.tags(tagName)
    || d.getElementsByTagName && d.getElementsByTagName(tagName);
 else allElements=d.all || d.getElementsByTagName("*");
 
 for(var i=0,len=allElements.length; i<len; i++){
  var cN=allElements[i].className;

  if(cN){
   if(elements[cN]){
    elements[cN][elements[cN].length]=allElements[i];
   } 
   else{
    elements[cN]=new Array();
    elements[cN][0]=allElements[i];
   }
  } 
 }

 return elements;
}

function ModifyElementByClassName2(obj){
 var timeStart=new Date();

 for(var i=0,elements; i<10; i++)
  elements=getClassList()['test'];

 var timeEnd=new Date();
 obj.value=(timeEnd-timeStart)+"ms";
}

function ModifyPreByClassName2(obj){
 var timeStart=new Date();

 for(var i=0,elements; i<10; i++)
  elements=getClassList('pre')['test'];

 var timeEnd=new Date();
 obj.value=(timeEnd-timeStart)+"ms";
}
//-->
</SCRIPT>

  3. language="JavaScript1.2"とすると、NN4, Netscape6はそうでない場合と異なる振る舞いをするものがある。例えば、等値演算子で型変換が行われない。IE, ICab, Opera等はlanguage属性値に関わらず型変換が行われる。

    <SCRIPT type="text/javascript">
<!--
var obj;
//-->
</SCRIPT>
    「obj==null」はtrue?
    <SCRIPT ...document.write(obj==null)
    type="text/javascript"
    type="text/javascript" language="JavaScript1.2"
    type="text/javascript" language="JavaScript1.3"
    type="text/javascript" language="I LOVE YOU,OK"

  4. 実行時エラーでダイアログが出るのを回避する。Netscape6やiCabはエラーダイアログが出ないようなので除外。「※」は構文エラー


    		サンプルNN2NN3NN4IE4/5/6
     
    window.onerror=null;
    		テスト1 ×○○×
    function f(){
 return true;
}
window.onerror=f;
    		テスト2 ×○○○
    window.onerror=
new Function("return true");
    		テスト3 ※×○○
    window.onerror=
function() { return true };
    		テスト4 ※※○○

  5. スクリーンおよびウインドウのサイズ情報取得について。IE4以降とNetscape6で見比べてください。

    ※ WinIE6は自称厳格モ−ド(document.compatMode == "CSS1Compat")と下位互換モード(document.compatMode == "BackCompat")で*印の値が異なるようです。

    参考リンク
    エレメントの大きさと位置を測定する
    <SCRIPT type="text/javascript">
<!-- 
if(document.getElementsByTagName){
 var oH1=document.getElementsByTagName('H1').item(0);
 var oTA=document.getElementsByTagName('TEXTAREA').item(0);
 var oPRE=d.getElementsByTagName('PRE').item(8); // ここ
} 
else if(document.all){
 oH1=document.all.tags('H1').item(0);
 oTA=document.all.tags('TEXTAREA').item(0);
 oPRE=d.all.tags('PRE').item(8);
}
//-->
</SCRIPT>
    Xdocument.write(X)読み込み完了時
    screen.height
    		-
    screen.width
    		-
    screen.availHeight
    		-
    screen.availWidth
    		-
    window.outerHeight
    		-
    window.outerWidth
    		-
    window.innerHeight
    		-
    window.innerWidth
    		-
    document.height
    		-
    document.width
    		-
    document.documentElement.scrollHeight*
    		-
    document.documentElement.scrollWidth*
    		-
    document.documentElement.offsetParent
    		-
    document.documentElement.offsetHeight
    		-
    document.documentElement.offsetWidth
    		-
    document.documentElement.clientHeight*
    		-
    document.documentElement.clientWidth*
    		-
    document.documentElement.offsetTop
    		-
    document.documentElement.offsetLeft
    		-
    document.documentElement.clientTop*
    		-
    document.documentElement.clientLeft*
    		-
    document.documentElement.scrollTop
    		-
    document.documentElement.scrollLeft
    		-
    document.body.scrollHeight*
    		-
    document.body.scrollWidth*
    		-
    document.body.offsetParent
    		-
    document.body.offsetHeight*
    		-
    document.body.offsetWidth*
    		-
    document.body.clientHeight*
    		-
    document.body.clientWidth*
    		-
    document.body.offsetTop*
    		-
    document.body.offsetLeft*
    		-
    document.body.clientTop*
    		-
    document.body.clientLeft*
    		-
    document.body.scrollTop
    		-
    document.body.scrollLeft
    		-
    oH1.scrollHeight
    		-
    oH1.scrollWidth
    		-
    oH1.offsetParent
    		-
    oH1.offsetHeight
    		-
    oH1.offsetWidth
    		-
    oH1.clientHeight
    		-
    oH1.clientWidth
    		-
    oH1.offsetTop*
    		-
    oH1.offsetLeft*
    		-
    oTA.scrollHeight
    		-
    oTA.scrollWidth
    		-
    oTA.offsetParent
    		-
    oTA.offsetHeight
    		-
    oTA.offsetWidth
    		-
    oTA.clientHeight
    		-
    oTA.clientWidth
    		-
    oTA.offsetTop*
    		-
    oTA.offsetLeft*
    		-
    oTA.clientTop
    		-
    oTA.clientLeft
    		-
    oTA.scrollTop
    		-
    oTA.scrollLeft
    		-
    oPRE.scrollHeight
    		-
    oPRE.scrollWidth
    		-
    oPRE.offsetParent
    		-
    oPRE.offsetHeight
    		-
    oPRE.offsetWidth
    		-
    oPRE.clientHeight
    		-
    oPRE.clientWidth
    		-
    oPRE.offsetTop*
    		-
    oPRE.offsetLeft*
    		-

  6. DOMのサポート状況について。

    <SCRIPT type="text/javascript">
<!--
var d=document;
var dI=d.implementation;

if(dI){
  d.write('<UL>');

  if(dI.hasFeature("XML","1.0"))
      d.write('<LI>DOM1 XML<\/LI>');
  if(dI.hasFeature("HTML","1.0"))
      d.write('<LI>DOM1 HTML<\/LI>');
  if(dI.hasFeature("Core","2.0"))
      d.write('<LI>DOM2 Core<\/LI>');
  if(dI.hasFeature("XML","2.0"))
      d.write('<LI>DOM2 XML<\/LI>');
  if(dI.hasFeature("HTML","2.0"))
      d.write('<LI>DOM2 HTML<\/LI>');
  if(dI.hasFeature("Views","2.0"))
      d.write('<LI>DOM2 View<\/LI>');
  if(dI.hasFeature("StyleSheets","2.0"))
      d.write('<LI>DOM2 StyleSheet<\/LI>');
  if(dI.hasFeature("CSS","2.0"))
      d.write('<LI>DOM2 CSS<\/LI>');
  if(dI.hasFeature("CSS2","2.0"))
      d.write('<LI>DOM2 CSS2<\/LI>');
  if(dI.hasFeature("Events","2.0"))
      d.write('<LI>DOM2 Event<\/LI>');
  if(dI.hasFeature("UIEvents","2.0"))
      d.write('<LI>DOM2 User interface Event<\/LI>');
  if(dI.hasFeature("MouseEvents","2.0"))
      d.write('<LI>DOM2 Mouse Event<\/LI>');
  if(dI.hasFeature("MutationEvents","2.0"))
      d.write('<LI>DOM2 Mutation Event<\/LI>');
  if(dI.hasFeature("HTMLEvents","2.0"))
      d.write('<LI>DOM2 HTML Event<\/LI>');
  if(dI.hasFeature("Traversal","2.0"))
      d.write('<LI>DOM2 Traversal<\/LI>');
  if(dI.hasFeature("Range","2.0"))
      d.write('<LI>DOM2 Range<\/LI>');
  if(dI.hasFeature("ABC","1.0"))
      d.write('<LI>でも、嘘ついてるかも。<\/LI>');

  d.write('<\/UL>');
}

else{
  d.write('<P># DOMをサポートしていません。<\/P>');
}

//-->
</SCRIPT>

    ブラウザの対応は以下のようになっています。iCab Pre 2.51はよくわかりません。


    		IE4Win
    IE5    		Win
    IE6    		Mac
    IE5    		NN4Netscape6iCab
    Pre 2.51
    DOM 1 XML×××○×○×
    DOM 1 HTML××○○×○×
    DOM 2 Coreモジュール×××××××
    DOM 2 XMLモジュール×××××○×
    DOM 2 HTMLモジュール×××××○×
    DOM 2 Viewモジュール×××××○×
    DOM 2 StyleSheetモジュール×××××○×
    DOM 2 CSSモジュール×××××○×
    DOM 2 CSS2モジュール×××××××
    DOM 2 Eventモジュール×××××○×
    DOM 2 User interface Eventモジュール×××××××
    DOM 2 Mouse Eventモジュール×××××○×
    DOM 2 Mutation Eventモジュール×××××××
    DOM 2 HTML Eventモジュール×××××○×
    DOM 2 Traversalモジュール×××××××
    DOM 2 Rangeモジュール×××××○×
Prev | Next | CSS1 主要属性対応表 | HOMEへ戻る