prog*sig

■11.0  Introduction

Document Object Model (DOM)について。
document. 以下
images
forms
links
cookie
などでDOMの要素にアクセスできるが普通は DOM Level 2 である、getElementByIdなどを使う。

■11.1  Access a Given Element and Find Its Parent and Child Elements

getElementByIdで取得できるのはelementオブジェクトかnullである。
そのelementオブジェクトはnodeオブジェクトから継承したものを含む、メソッドやプロパティを持っている。
parentNodeやchildNodesはのプロパティはそのelementに対する相対的な親や子を示す。

■11.2  Accessing All Images in the Web Page

getElementsByTagNameはタグ名を指定してNodeListのコレクションが返ってくる(getElementsなのでね)
これは配列のようにlengthを持っているがNodeListなので配列のプロパティやメソッドを持ってるわけではない。JavaScriptのDOM Core基礎 - 三等兵
話は戻ってdocument.getElementsByTagName('*');というようにgetElementsByTagNameにはuniversal selector (*) を指定する事も可能であるが、IE7(IE8でもIE7モードで動いてる場合も)空のノードリストを返すことがあることに注意。
XHTMLやSVGなどで名前空間を指定するgetElementsByTagNameNS,というメソッドもある。
SVGの例 - Namespace
IEではgetElementsByTagNameNSが動かないので、document.getElementsByTagName("dc:title");というようにする。
IE9ではサポートされてそう

■11.3  Discover All Images Within an Article

getElementsByTagNameはdocumentだけではなくてelementオブジェクトに対しても使えるよって話。

■11.4  Discover all Images in Articles Using the Selectors API

querySelectorについて。
単一のekementを取得するquerySelectorとマッチする要素全部取得するquerySelectorAllがある。
CSSのセレクタを使って指定するので下のような感じでaltが空でないimgが取得できる。

 document.querySelectorAll('img:not([alt=""])');

サポートしてるブラウザは
Firefox 3.x,Opera 10.x, Safari 4.x, and Chrome 4.x. でIE8は限定的にサポートしてる。
一つ注意することはquerySelectorAllはliveなコレクションを返してくれないことだ。
つまりgetElementsByTagNameのようにページのアップデートを反映したコレクションを取得しない。

• querySelectorAllがliveじゃないNodeList返すのはなんで？ - vantguarde - web:g
• liveなquerySelectorAll - 素人がプログラミングを勉強するブログ

■11.5  Finding the Parent Element for a Group of Elements

querySelectorで取得した要素グループの親要素を探す。

var parent = document.querySelector("body p").parentNode;

CSSセレクタには:parentが存在しないので、取得した後にparentNodeのプロパティを見る。

■11.6  Highlighting the First Paragraph in Every Element

querySelectorAllでdiv以下のpで、それぞれpの中で先頭のpにstyleを付ける。

var paras = document.querySelectorAll('div p:first-of-type');
for (var i = 0; i < paras.length; i++) {
    paras[i].setAttribute("style","background-color: #ffff00");
}

IE8は :first-childの疑似要素を使う。

■11.7  Apply a Striping Theme to an Unordered List

ストライプなセレクトをする。
odd 奇数な要素をセレクトする。

nth-childという疑似要素を使う。

var lis = document.querySelectorAll('li:nth-child(2n+1)');
for (var i = 0; i < lis.length; i++) {
   lis[i].setAttribute("style","background-color: #ffeeee");
}
// or:
var lis = document.querySelectorAll('li:nth-child(odd)');
for (var i = 0; i < lis.length; i++) {
   lis[i].setAttribute("style","background-color: #eeeeff");
}

nth-child()はnで表す数式以外にもodd、evenを引数にとることができる。

■11.9  Finding All Elements That Share an Attribute

CSSセレクタにも universal selector (*)はある。

var elems = document.querySelectorAll('*');

class属性を持っている要素をすべて取得。

elems = document.querySelectorAll('*[class="red"]');

class名がredなもの(完全一致)を取得。
このとき*は属性が完全一致では無く含む(contain)という意味でも使える。

var elements = document.querySelectorAll('*[class*="test"]');

クラス名にtestを含む要素を取得。

• CSSセレクタまとめ1 | CSS-EBLOG
• Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex

■11.12  Get Element Attributes

要素の属性値を取得。
クラス名はclassNameのプロパティで取得できる。

var elem = document.getElementById("elem");
alert(elem.className);  // test

ただelementオブジェクトのプロパティには標準的なものしか定義されてないので、独自に付けた属性はgetAttributeを使って取得する。

■11.13 Get Style Information for an Element

styleプロパティについて。
上と同じように elem.style.width のように直接取得もできるが、getAttributeのように要素のstyleを取得するメソッドがある。

function getStyle(elem, cssprop, cssprop2) {
    // IE
    if (elem.currentStyle) {
        return elem.currentStyle[cssprop];
        // other browsers
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
        return document.defaultView.getComputedStyle(elem, null).getPropertyValue(cssprop2);
        // fallback
    } else {
        return null;
    }
}