JavaScript DOM 学習 第 1 章 W3C DOM 入門_基礎知識

この章では主に、新世代のブラウザでサポートされている W3C の第 1 レベル DOM について紹介します。それらがどのように機能するかについての一般的なアイデアを提供し、それらを使用して何ができるかについてのアイデアを提供します。
まず、DOM に関するいくつかの提案と DOM 設計の目的について説明し、次にノードとは何か、DOM ツリー内でノードを移動する方法について説明します。次は、特定のノードを取得する方法と、その値と属性を変更する方法です。最後に、DOM の最終目標は、独自の新しいノードを作成する方法です。
推奨事項
レベル 1DOM は、XML ドキュメントにアクセスするためのプログラミング言語を提供するために W3C によって開発されました。 XML ドキュメントの処理に使用する言語プログラムは、レベル 1DOM のメソッドと属性であれば関係ありません。 Perl、VBScript、JavaScript のいずれであっても、必要な値を読み取って変更できます。
ご想像のとおり、この段落では理想的な状況について説明していますが、相違点は依然として存在します (ブラウザーなど)。ただし、コンテンツのこの部分はまだ比較的小さいため、JavaScript で XML を処理する方法を学習することは、他の言語の学習にも役立ちます。
HTML は、ある程度、XML ドキュメントとみなすこともできます。ブラウザが対応するスクリプトを処理できる限り、レベル 1 DOM は HTML でも非常に適切に実行できます。
各 HTML タグのテキストと属性を読み取ったり、各タグとその内容を削除したり、サーバー上で変更を加えることなく、既存のドキュメントに新しいタグをリアルタイムで挿入したりすることができます。
XML の変更に関するあらゆる側面を設計の開始時に考慮する必要があるため、通常の Web エンジニアには決して使用できない方法がいくつかあります。たとえば、これを使用して HTML コメントを変更できますが、なぜこれを行う必要があるのか​​わかりません。 Web デザインでは必要のない DTD/Doctype コンテンツの DOM 処理もいくつかあるため、それを無視して日常のニーズに集中してください。
ノード
ドキュメント オブジェクト モデルは、ドキュメント内の複数の要素がどのように相互に関連しているかを示すモデルです。レベル 1 DOM では、すべてのオブジェクトがノードです。

コードをコピーします コードは次のとおりです:

これは次のとおりです。 a段落 p>

次に、要素 P と「これは段落です」という内容のテキスト ノードの 2 つのノードを作成します。このテキスト ノードは P 要素内に含まれるため、p ノードの子ノードと考えることができます。逆に、p 要素はテキスト ノードの親ノードです。
次のように記述する場合:

コードをコピーします コードは次のとおりです。

これは < ;B>段落

要素ノード p には 2 つの子ノードがあり、そのうちの 1 つは独自の子ノードを持ちます。
最後はパラメータノードです。 (紛らわしいことに、これらは要素ノードの子としてカウントされません。実際、この章を書いているときにいくつかのテストを行ったのですが、IE5 はパラメータ ノードを要素の子としてまったく扱いません。) つまり、次のようになります。

コードをコピーします コードは次のとおりです:

これは段落

の構造は次のようになります:

       <p> ----------------<br><br>     --------------     ALIGN<br><br>  This is a     <b>     |<br>            |    right<br><br>          paragraph</b></p>

これは要素ノード、テキストノード、パラメータノードです。 HTML ページの 99% はこれらで構成されており、主なタスクはそれらをどのように配置するかです。もちろん、他にも多くのノードがありますが、ここでは省略します。

ご存知のとおり、p 要素には独自の親ノードもあります。これは通常ドキュメントですが、場合によっては DIV である場合もあります。したがって、ドキュメント全体は多くのノードで構成されるツリーとして見ることができ、これらのノードのほとんどには独自の子ノードがあります。

      <br><br>        |-------------------------------------<br><br>       <p> ----------------      lots more nodes<br><br>     --------------     ALIGN<br><br>  This is a     <b>     |<br>            |    right<br><br>          paragraph</b></p>

DOM ツリーを走査する
DOM ツリーの構造を理解したら、DOM ツリーを走査して必要な要素を見つけることができます。たとえば、要素ノード p がすでに変数 x に格納されているとします (これがどのように行われるかについては後ほど説明します)。この時点で BODY にアクセスしたい場合:

コードをコピー コードは次のとおりです:

x。 parentNode

x の親要素を取得し、それを変更できます。この方法でノード B に到達できます:

コードをコピー コードは次のとおりです:

x.childNode[ 1]

childNode は、x のすべての子ノードを含む配列です。もちろん、配列には 0 から始まる番号が付けられているため、childNode[0] はテキスト ノード「This is a」、childNode[1] は B ノードです。
2 つの特別なもの: x.firstChild は x の最初の子ノードを表し、x.lastChild は x の最後の子ノードを表します。
p が BODY の最初の子ノード、BODY が document の最初の子ノードであると仮定すると、ノード B に到達するには、次のメソッドのいずれかを使用できます:

コードをコピーします コードは次のとおりです:

document.firstChild.firstChild.lastChild
document.firstChild.childNodes[0] .lastChild;
document.firstChild.childNodes[0].childNodes[1];

この愚かなものでも:

コピーコード コードは次のとおりです:

document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

要素を取得します
しかし、この方法でドキュメントを移動するのは非常に面倒です。レベル 1 DOM 設計の目標は、DOM ツリー全体を変更できるようにすることであるため、DOM ツリーの構造を正確に把握する必要があり、これによりすぐに問題が発生します。
目的の要素にすばやくアクセスする方法がいくつかあります。ここに到達すると、DOM ツリー全体のすべてのノードを横断できるようになります。
前の例を続けてみましょう。要素 B に到達したいとします。最も簡単な方法は、飛び越えることです。 document.getElementByTagName を使用すると、ドキュメント内のすべての B タグを含む配列をすばやく作成できます。 B が最初のものであると仮定すると、次のように単純に書くことができます:

コードをコピー コードは次のとおりです:

var x = document.getElementsByTagName('B')[0]

x には要素ノード B が含まれます。まず、ドキュメント全体のすべての要素 B(document.getElementByTagName('B')) を取得するようにブラウザに指示し、次に最初のドキュメントの最初の要素 B([0]) を選択すると、必要なものが得られます。 。
次のように書くこともできます:

コードをコピー コードは次のとおりです:

var x = document .getElementsByTagName( 'P')[0].lastChild;

ここで、まずドキュメントの最初の段落 P に到達し (P が最初の要素であると仮定します)、次に p の最後の子要素に到達します。
DOM 構造を必要とせずに要素に正確に到達する最良の方法は、B に ID を与えることです:

これは 段落です

コードをコピーします コードは次のとおりです。

>
var x = document.getElementById('hereweare');

要素 B は x に格納されます。

ノードを変更する ノードに到達したので、いくつかの変更を加えることができます。テキストの太字部分を「テキストの太字部分」に変更するとします。正しい要素にアクセスし、そのnodeValueを変更する必要があります。ここで、正しい要素は要素 B ではなく、その子要素のテキスト ノードです。変更したいのは要素ではなくテキストです。 コードをコピー

コードは次のとおりです。

document.getElementById('hereweare' ).firstChild.nodeValue='太字のテキスト';

要素が変更されます。 nodeValue を通じて任意のテキスト ノードまたはパラメータを変更できます。たとえば、段落の ALIGN パラメータを変更できます。これも非常に簡単です。まず必要な要素 (この場合は B 要素の親要素) を見つけてから、setAttribute() メソッドを使用して必要な値を設定します。 コードをコピー

コードは次のとおりです:

function test2(val) {
if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}

else warning('お使いのブラウザはレベルをサポートしていません1 DOM'); }
创建和删除元素
修改元素固然有用，但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。
创建元素使用下面的方法:
var x=document.createElemnt(‘HR')
这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN，我们就把它插入到这。所以我们使用appendChild()方法：

复制代码 代码如下:

document.getElementById('inserthrhere').appendChild(x);

删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN，然后我告诉他移除他的第一个子元素：

复制代码 代码如下:

var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);

同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。

复制代码 代码如下:

var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了：

 <b><br><br> ------------<br><br> paragraph A new text node<br> has been appended!</b>

(可以通过normalize()来把他们合并，但是IE5不支持）

我不打算告诉你怎么移除它，自己练习会比较有收获

翻译地址：http://www.quirksmode.org/dom/intro.html

转载请保留以下信息
作者：北玉(tw:@rehawk)