DOM向けJavaScriptアプリケーション解析(3)_DOM

この DOM 要素にスタイルがない場合、操作は行われません。 2. JS を直接使用して、DOM 要素を HTML に動的に書き込むこともできます。
今日この章では、これら 2 つのアプリケーションについて説明します
(1) HTML 内の既存の DOM 要素を操作します。
上で述べたように、既存の DOM 要素を操作することは、スタイルを操作することに他なりません。したがって、最初にこの DOM 要素のスタイルを取得できるようにする必要があります。 DOM 要素のスタイルの取得について話す前に。まずはDOM要素のスタイルリンク方法について説明します。 3種類あります。

1 つは、

などの HTML ドキュメントにスタイルを直接記述する方法です。

2 つ目は、HTML ドキュメントの先頭に
#dom{width:300px;height:200px;background:#000;}

3 番目は、


などの一般的に使用されるリンク方法です。JS を使用してスタイルを操作するこれら 3 つの方法は同じではありません。 🎜>重要な点は、3 番目のリンクイン スタイルの操作について説明することです。これは、最も一般的に使用され、最も便利であるためです。
2 番目のリンク形式は操作が面倒です。
3 番目のリンク スタイルは操作が面倒で、スタイルを直接変更することはできません。変更したい場合は、最初の方法を使用する必要があります。つまり、見るだけで触ることはできません。

最初のタイプのリンク スタイルの操作方法
例

高さ属性を取得するには、最初のステップとして DOM 要素を取得します。前の章のメソッドを使用します。
var a = document.getElementById("dom ");
その高さ属性を再度取得します。これは非常に簡単です
var h = a.style.height
そして、幅を取得し、背景色
var w = a.style.width;
var bg = a.style.background;
これを取得するには、次のように記述することはできません。
var mt = a.style.margin-top;
JQ で説明されている Camel の記述方法を使用する必要があります
var mt = a.style.marginTop;

取得しても意味がありません。変更できる必要があります。変更すると非常に便利です。たとえば、高さを 100 に変更したい場合、それは非常に簡単です。
a.style.height = "100px";
残りは同じです。これ以上は言いません。 🎜>

スタイルをリンクする 2 番目の方法
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules; となります。 a = domcss[ 0].style.height;
変更は次のようになります
domcss[0].style.height = "100px";
なぜ次のように書かれているかは説明しませんこれ。興味があれば、自分で調べてください。

スタイル操作をリンクする 3 番目の方法


この操作もブラウザーを区別する必要があります。
これを取得するには、通常、次のような関数を作成します。 function CurrentStyle(element){
return element.currentStyle(element, null); }
css.css ファイルに高さ属性があるとします。
取得メソッドは var a = CurrentStyle("dom").height;
ここでのメソッドでは直接変更できません。
なぜこのように書かれているかは説明しません。興味のある方はご自身で調べてみてください。

(2) JS を使用して DOM 要素を動的に作成します。
実際には、これはいくつかの JS メソッドだけで非常に簡単ですが、家を建てるときと同じように段階的に行う必要があります。たとえば、次のような DOM 要素を作成したいとします。




最初のステップは div ノードを作成することです。 var newobj = document.createElement("div");

2 番目のステップでは、このセクションに id 属性を追加します。属性名は dom です。 newobj.setAttribute("id","dom");

3 番目のステップは、このノードに属性を追加することです。1 つは、先ほど説明した newobj .style のようなスタイルを変更することです。 .width = "100px"; 別のメソッドは、2 番目のステップで使用される newobj.setAttribute("width", "100px") であり、他の属性に対しても同様です

4 番目のステップは、このノードをhtmlドキュメントの場合、メソッドは次のようになります。 document.body.appendChild(newobj) はこれを意味します。 document.body は body 要素
を取得し、appendChild(newobj) は作成したノードである body 要素に子要素を追加します。


このノードを削除する場合、これは document.body.removeChild(newobj);
(これは、子要素を追加したいノードに置き換えることができます。たとえば、con という ID を持つ要素にノードを追加したい場合は、document.getElementById("con").appendChild(newobj))

と記述するだけで完了です。 JSにはappendChildに似たメソッドがたくさんあります。使い方はこれと同じなので興味のある方はBaiduへどうぞ。一般的には使用されないため、ここでは説明しません。

この章はここまでです。次の章では、いくつかのエフェクトの作成方法を説明します。