DOM用JavaScriptの適用例(1)_DOM

JavaScript を学習するためにここに来る人のほとんどは、ページ内の DOM 要素を使用して実用的で便利なインタラクティブ効果を作成するために JavaScript を使用したいと考えていると思います。したがって、ここでは最も実用的で役立つ JavaScript アプリケーションのみを説明します。ただし、前提条件として、誰もが JavaScript または jQuery プログラミングの基本的な知識を持っている必要があります。まあ、これ以上ナンセンスはありません。
今日の最初の記事では、JavaScript を使用してページ内の DOM 要素を取得する方法を説明します。これは非常に重要です。 JQueryと比較してみます。
ページ内の要素に ID 属性がある場合

JQ メソッド: $("#dom"),
ネイティブ js メソッド: var a = document.getElementById("dom"); この a は $("#dom"); と同等です

親要素の下にある要素を取得したい場合

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

>

JQ メソッド: $("#dom span")、
ネイティブ JS メソッド: var b = document .getElementById("dom").getElementsByTagName("span")[0]; この b は $("#dom span") と同等です
実際には、単純なメソッド var b = document.getElementById(" dom ").childNodes[0] しかし、FF では問題が発生します。これについては後で説明します

ページ内の要素のセットを取得します

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

JQ のメソッド:$("#dom ul li") または $("#dom li") または $("#dom > li")、
ネイティブ JS メソッド: var c = document.getElementById( getElementsByTagName("li"); ただし、この c は上記の JQ のように直接使用できないため、上記と同等ではありません。併用するにはforループが必要です。たとえば、個別に使用する場合、最初の li のみを使用し、必要なのは var c = document.getElementById("dom").getElementsByTagName("li")[0] だけであり、2 番目の li は var c = document です。 .getElementById(" dom").getElementsByTagName("li")[1] など。 JSではDOM要素が配列形式で格納されるためです。

上記は非常にわかりやすいです。これからお話しすることは、誰もがよく使うものです。しかし、ネイティブ JS で取得するのに最も面倒な属性はクラス属性です。

ネイティブ JS メソッド: これは少し面倒です。関数を記述する必要があります。ネイティブ JS にはクラスを直接取得するメソッドが用意されていないため、最初にこのような関数を記述する必要があります。 🎜>


コードをコピーします

コードは次のとおりです: function $class(domclass){ var odiv = document.getElementByTagName("*"); var a;

for(var i = 0;iif(odiv.className ==domclass) 🎜> a = odiv
}
return a;
}
}


この関数を使用して取得するのは非常に簡単です。 var d = $class( "dom" );

この関数の意味について説明します。
var odiv = document.body.getElementByTagName("*");
この文は、すべての DOM 要素を取得することを意味します。ページ内

コードをコピー

コードは次のとおりです: for(var i = 0) ;iif(odiv.className ==domclass){ a = odiv }

これは、次のすべての要素を走査します。渡した domclass パラメータと同じである場合は、この要素を

に渡します。したがって、 var d = $class("dom "); は同等です In var d = a;

(ちなみに className はこの JS の属性で、DOM 要素の名前を取得するクラスです)

はい、今日はこれくらいのことを書きます。理解できないことがあれば、一つずつ質問してください。学びたい、そしてあなたを満足させるために最善を尽くします。

声明：

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