JavaScript DOM 学習第 1 章 W3C DOM 入門_基礎知識-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:34 PM

dom javascript

この章では主に、新世代のブラウザでサポートされている 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 と「これは段落です」という内容のテキストノードの 2 つのノードを作成します。このテキストノードは P 要素内に含まれるため、p ノードの子ノードと考えることができます。逆に、p 要素はテキストノードの親ノードです。
次のように記述する場合:

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

これは < ;B>段落

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

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

これは段落

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

       <P> ----------------<br><br>     --------------     ALIGN<br><br>  This is a     <B>     |<br>            |    right<br><br>          paragraph

ログイン後にコピー

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

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

      <BODY><br><br>        |-------------------------------------<br><br>       <P> ----------------      lots more nodes<br><br>     --------------     ALIGN<br><br>  This is a     <B>     |<br>            |    right<br><br>          paragraph

ログイン後にコピー

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 を与えることです:

これは 段落です< ;/B>

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

>
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);

你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了：
 ------------ paragraph A new text node has been appended!
ログイン後にコピー

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

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
1 か月前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法
3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7643

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTの接続はヒントと回答です

33

151

もっと見る

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM
WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM
JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

 簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM
使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript と WebSocket: 効率的なリアルタイム画像処理システムの構築 Dec 17, 2023 am 08:41 AM
JavaScript は Web 開発で広く使用されているプログラミング言語であり、WebSocket はリアルタイム通信に使用されるネットワークプロトコルです。 2 つの強力な機能を組み合わせることで、効率的なリアルタイム画像処理システムを構築できます。この記事では、JavaScript と WebSocket を使用してこのシステムを実装する方法と、具体的なコード例を紹介します。まず、リアルタイム画像処理システムの要件と目標を明確にする必要があります。リアルタイムの画像データを収集できるカメラデバイスがあるとします。

See all articles