動的サイトをいじる時、直接HTMLをいじる事ができないので、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動することなどが必要と聞きました。

Question

動的サイトをいじる時、直接HTMLをいじる事ができないので、要素をbeforeで固定するのではなく、insertBeforeなどのDOM操作で移動することなどが必要と聞きました。

DOM操作で変更するJQUERYのメソッド一覧など、調べても出てこなかったのですが、

DOM操作で変更するJQUERYのメソッド一覧や、そのような記載がある所はありますでしょうか？

DOM操作で変更するJQUERYのメソッドのみで、サイトを変更するのは現実難しいし、大変でしょうか？

下記くらいの情報しか見つかりませんでした。
http://internetcom.jp/developer/20090630/26.html

Answer 1

下記でJqueryのAPIの日本語訳を紹介してくれていますので、DOM操作が知りたい場合は「Manipulation / DOM操作」の欄などを見てみてください。
http://alphasis.info/jquery-api/

DOM操作で変更するJQUERYのメソッドのみで、サイトを変更するのは現実難しいし、大変でしょうか？

Jqueryのみで動的部分を構築しているサイトは結構あると思います。大変かどうかは個人のスキルや主観による所が多いので、なんとも言えませんが、慣れている人であれば大変だとは感じないと思います。

Comments

[退会済みユーザー]

ありがとうございます。

Manipulation / DOM操作」の欄にあるメソッドであれば、すべて DOM操作限定なので、直接HTML、CSSをいじってしまい、他のページまで変更してしまうことがないのですね。

[chiku_]

おっしゃられる通り、他のページまで変更するような事はないです。

[退会済みユーザー]

ありがとうございます。

念のため確認させていただきたいのですが、下記ページの一般属性～スタイルプロパティまでのすべてのメソッドが、直接HTMLをいじらないDOM操作のみということでよろしいでしょうか？おそらくこちらがあっていると思います。

念のため確認ですが、それともDOM挿入の部分のみのメソッドがHTMLをいじらないのでしょうか？こちらはおそらく間違い。

http://alphasis.info/jquery-api/manipulation/

[chiku_]

DOM操作でも値を変更するような操作をすればhtmlは変更されます。
例えばhtmlで
<input type="text" id="input-id">
があった場合に
$("#input-id").val("test");
を実行するとhtmlは
<input type="text" id="input-id" value="test">
に変更されます。

DOM操作のみとおっしゃられているのがよく分かりません。
DOM操作のみでhtmlを変更しない処理は無意味な操作だと思います。
htmlを変更しなければ画面の表示などは変わりませんので。。

Jqueryを使用する事で何を実現したいのか具体的に言っていただけれると、もう正確な回答ができると思います。

[退会済みユーザー]

知識不足で、ちゃんと伝えられず大変恐縮ですが、動的サイトの一ページをいじっていて、
直接、html、cssをいじらず、DOM操作でいじることにより、他のページに影響が出ないようにしてほしいといわれています。
たとえば、上下の要素を移動したい場合にはjQueryのinsertAfterやinsertBeforeを使うようにいわれています。

[chiku_]

ああ、分かりました。説明ありがとうございます。
DOM操作でもhtmlは変更されますが、先方が言われているのは、直接、html、cssをいじらずという事なので、DOM操作でのhtml変更はやっていいという事ですね。
DOM操作でhtmlを変更したからといって元のhtmlファイル自体が変更される訳ではありません。DOM操作での変更は一時的な物で画面がリロードされれば元に戻ります。
ですので、JQueryのinsertAfterやinsertBeforeやその他のDOM操作、変更は要件の範囲内であれば問題ないと思います。

[退会済みユーザー]

ありがとうございます。
何度もすいませんが、

念のため確認させていただきたいのですが、下記ページの一般属性～スタイルプロパティまでのすべてのメソッドが、直接HTMLをいじらないDOM操作のみということでよろしいでしょうか？おそらくこちらがあっていると思います。

念のため確認ですが、それともDOM挿入の部分のみのメソッドがHTMLをいじらないのでしょうか？こちらはおそらく間違い。

http://alphasis.info/jquery-api/manipulation/

下記などもDOM操作でのCSS変更なので、動的サイトでも使えるのですね。
jQuery( セレクター ) . css( プロパティ名 );

[chiku_]

> 念のため確認させていただきたいのですが、下記ページの一般属性～スタイルプロパティまでのすべてのメソッドが、直接HTMLをいじらないDOM操作のみということでよろしいでしょうか？おそらくこちらがあっていると思います。
ほとんどがHTMLが変更されます。DOM挿入もHTMLが変更されます。
HTMLは変更されますが、元々のHTMLを変更する訳ではないので、お伺いする限り問題ないと思います。

> 下記などもDOM操作でのCSS変更なので、動的サイトでも使えるのですね。
> jQuery( セレクター ) . css( プロパティ名 );
JQueryでの操作は動的サイトであろうと静的サイトであろうと関係なしに使えます。
表示されたHtmlに対してのDOM操作になりますので。。

[退会済みユーザー]

何度も大変ありがとうございました。
下記のページ記載のメソッドであれば、大本のHTMLは固定化されず、動的サイトに使えるという事がお蔭様でわかりました。
http://alphasis.info/jquery-api/manipulation/

[退会済みユーザー]

追記です。下記のようなコメントも頂いています。

直接HTMLで記述すると固定化されるため、
特定の要素をclassで括りたい等の場合には、jQueryのwrapなどを使って欲しい。
上下の要素を移動したい場合にはjQueryのinsertAfterやinsertBeforeを使って欲しい。