2007-11-17

CSS/DOM : 動的にスタイルシートへルールを追加する

スタイル属性を動的に一括して設定します。
引数にはセレクタとルールを指定します。 

//使用例
//addCSSRule(selector, declaration);

addCSSRule('div.test', 'width:200px; height:100px;');
addCSSRule('div.test', 'background:#ccc;');


var addCSSRule = (/*@cc_on!@*/false)
    ? (function(sheet){
          return function(selector, declaration){
              sheet.addRule(selector, declaration);
          };
      })(document.createStyleSheet())
    : (function(sheet){
          return function(selector, declaration){
              sheet.insertRule(selector + '{' + declaration + '}', sheet.cssRules.length);
          };
      })((function(e){
            e.appendChild(document.createTextNode(''));
            (document.getElementsByTagName('head')[0] || (function(h){
                document.documentElement.insertBefore(h, this.firstChild);
                return h;
            })(document.createElement('head'))).appendChild(e);
            return e.sheet;
        })(document.createElement('style')))
    ;


資料

投稿者 latchet 時刻: 15:18 0 コメント

ラベル:

2007-11-13

XPath/DOM : javascriptファイルの呼び出し元script要素を取得する

XPathを用いると、きめ細かく要素を指定できるようです。
たとえばamachangさんによるscript要素取得コードは以下のようなXPath式で表現可能です。
createElementで動的に生成されたscript要素を、その時点でのDOMツリーの末尾以外の任意の位置にappendChildしている場合には要素を取得できずにnullを返すか、ブラウザが解析中にたまたま末尾に存在する別のscript要素が返されます。
静的にHTMLで記述されたscript要素についてはその心配はありません。

var currentScript = !!(document.implementation && document.implementation.hasFeature && document.implementation.hasFeature('XPath', '3.0'))
    ? document.evaluate(
          '//*[local-name()="SCRIPT" or local-name()="script"][not(ancestor-or-self::*[following-sibling::*])]',
          document,
          null,
          XPathResult.FIRST_ORDERED_NODE_TYPE,
          null
      ).singleNodeValue
    : (function(e){
          return (!e) ? null
               : (e.nodeName.toLowerCase() == 'script') ? e
               : arguments.callee(e.lastChild);
      })(document)
    ;

探索対象文書（XML, HTML）、ブラウザの種類によってXPath式で判定可能な要素名の大文字・小文字の種別に影響があるようです。

たとえば、このブログのアドレスバーで以下のブックマークレットを実行した場合、Firefox2とOpera9で挙動が異なります。IEは現時点でXPathをサポートしていないため両方ともエラーとなります。
XPathでscript要素を抽出し、成功したらnodeNameを表示します。

■大文字（SCRIPT）でXPathにより要素抽出
○　Firefox2
×　Opera9
×　IE
javascript: try{alert(document.evaluate('//*[local-name()="SCRIPT"]',document,null,9,null).singleNodeValue.nodeName);}catch(e){alert(e);};



■小文字（script）でXPathにより要素抽出
×　Firefox2
○　Opera9
×　IE
javascript: try{alert(document.evaluate('//*[local-name()="script"]',document,null,9,null).singleNodeValue.nodeName);}catch(e){alert(e);};



資料

投稿者 latchet 時刻: 18:31 0 コメント

ラベル:

2007-11-08

XPath/DOM : Class属性による要素抽出 - クロスブラウザ document.getElementsByClassName

javascriptの優れたライブラリが近年続々と公開されています。

幸いな事にprototype.js、jQuery、そして最近ではさらにamachangさんによるライブラリによってjavascriptによるDOM要素抽出が気軽に見通しよく記述することができる環境が整っているようです。

車輪の再実装ですがタグ名とクラス名を指定してDOM要素抽出を行なうという用途のための小さなコードを書きました。既存ライブラリを使わない小さなサイズのスクリプトでちょっとしたDOM操作のために。

使い方はgetBoxes(klass, tag)　でクラス属性値klass、タグ名tagのDOM要素を配列にして抽出します。tagを省略すると、指定されたクラス属性値を持つ全てのタグを抽出します。 たとえば、getBoxes('test', 'div') では、testをクラス属性値に持つタグ名divの要素を配列で返します。

■追記：2007/11/12
getBoxes(klass, tag, context) のように第３引数にDOM要素を指定すると、その要素と子孫要素が探索対象範囲となる機能を追加しました。第３引数を指定しなければページ内の全要素が探索対象となります。
XPathを使用する場合、XPath式とnamespace resolver（ここでは、nullです）から生成されるオブジェクトを保存し再利用するようにしました。 

var getBoxes
    = (/Firefox\/(\d+)/.test(navigator.userAgent) && RegExp.$1 > 2) ?
          (function(){
              var toChangeCase = (document.documentElement.nodeName == 'HTML')
                               ? 'toUpperCase' : 'toLowerCase';
              return function(klass, tag, context){
                  var boxes = (context || document).getElementsByClassName(klass);
                  return (tag && (tag = tag[toChangeCase]()))
                       ? Array.filter(boxes, function(e){return e.nodeName == tag;})
                       : boxes;
              };
          })()
    : (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature('XPath', '3.0')) ?
          (function(){
              var toChangeCase = (document.evaluate('//*[local-name()="HTML"]', document, null, XPathResult.BOOLEAN_TYPE, null).booleanValue)
                               ? 'toUpperCase' : 'toLowerCase',
                  cache = {};
              return function(klass, tag, context){
                  var boxes = [],
                      key   = (tag || '*') + ':' + klass,
                      exp   = cache[key] || 
                             (cache[key] = document.createExpression('//*'
                            + (tag ? ('[local-name()="' + tag[toChangeCase]() + '"]') : '')
                            + '[contains(concat(" ",@class," ")," ' + klass + ' ")]', null)),
                      nodes = exp.evaluate(context || document, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null),
                      node,
                      i = 0;
                  if(nodes)
                      while(node = nodes.iterateNext())
                          boxes[i++] = node;
                  return boxes;
              };
          })()
    :     function(klass, tag, context){
              var boxes = [],
                  regex = new RegExp('(?:^|\\s)' + klass + '(?:\\s|$)'),
                  i = 0;
              /*@cc_on
              if(@_jscript_version > 5.5 || @_mac || tag || !context){
                @*/
              var nodes = /*@cc_on (@_jscript_version < 5.6 && !@_mac && !tag && !context) ? document.all : @*/
                          (context || document).getElementsByTagName(tag && tag.toLowerCase() || '*'),
                  node,
                  j = 0;
              if(nodes)
                  while(node = nodes[i++])
                      if(regex.test(node.className))
                          boxes[j++] = node;
              /*@cc_on
              }else{
                  (function walk(e){
                      if(e.nodeType == 1 && regex.test(e.className)) boxes[i++] = e;
                      e = e.firstChild;
                      while(e){
                          walk(e);
                          e = e.nextSibling;
                      };
                  })(context);
              };@*/
              return boxes;
          };


資料

投稿者 latchet 時刻: 23:46 0 コメント

ラベル:

登録: 投稿 (Atom)