1. DOM の「D」
「D」はドキュメント (ドキュメント)
2. : DOM の「O」
「O」はオブジェクト (オブジェクト) を表します オブジェクトの分類
- ユーザー定義オブジェクト (ユーザー定義オブジェクト)
- ネイティブオブジェクト
- ホスト オブジェクト
window オブジェクト window オブジェクトはブラウザ ウィンドウ自体に対応し、通常、このオブジェクトのプロパティとメソッドを総称して BOM (Browse Object Model) と呼ばれます。BOM が提供します。 window.open や window.blur などのメソッド。さまざまなポップアップ ウィンドウやドロップダウン メニューで悪用されているほどです
3. モデル: DOM の "M"
"M" は "Model" の略です (モデル). DOM はドキュメントを表します ツリーのコード例 (数学的概念)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h1 id="What-to-buy">What to buy</h1> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <body> </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1 id="ul-这三个属于兄弟关系-ul-也是一个父元素-有三个子元素-他们都是-li-元素-pre-p-ドキュメントのさまざまな要素を家系図として想像できれば-DOM-を同じ用語で説明できます-しかし-strong-ノードツリー-strong-p-h-と呼ぶ方が正確だと思います-ノード">、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
ドキュメントのさまざまな要素を家系図として想像できれば、DOM を同じ用語で説明できます。しかし、 「ノードツリー」
と呼ぶ方が正確だと思います。 4. ノード
ノード (node) はネットワーク用語で、ネットワーク内の接続点を表します。ネットワーク。ネットワークはノードの集合です。 DOM にも同じことが当てはまります。ドキュメントはノードのコレクションです。
- 要素ノード
- テキストノード
- 属性ノード
4.1 要素ノード
DOM のアトムは 要素ノード (要素ノード)
、、
4. 2 テキスト ノード
上の例では、
というテキストが含まれています。これは テキスト ノードです。 (テキストノード)。
4.3 属性ノード
属性ノードは、要素のより具体的な説明を提供します。たとえば、ほとんどすべての要素には title 属性があり、この属性を使用して要素に含まれる内容を正確に説明できます。
属性ノード<p title="a gentle reminder">Don't forget to buy this stuff.<p>、前の例では、順序なしリスト要素
- に id 属性があります。一部のリスト要素
- には class 属性があります。
3 つの関係.png
4, 4 CSS
JavaScript スクリプトと同様に、ドキュメントに CSS スタイルを埋め込むこともできます。 head> セクション (style> タグの間)。別のファイルに配置することもできます。 **HTML ファイル内で CSS ファイルを参照する形式:
継承<link type="text/css" href="file.css" rel="stylesheet">
は、CSS テクノロジーの強力な機能です。 1) クラス属性は、上記のコード
<p class="special">This pargraph has the special class<p><h2 id="So-dose-this-headline">So dose this headline</h2>
のスタイル シートで定義することも、次のように定義することもできます
special{font-style: italic;}2)、id 属性 id 属性の目的は、Web ページ内の要素に一意の識別子を追加することです:
h2.special{text-transform: uppercase;}スタイル シート定義
<ul id="purchases">
4, 5 要素の取得#purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}#purchases li{font-weight:bold;}要素ノードを取得するには、要素 ID 経由、タグ名経由、クラス名経由の 3 つの DOM メソッドがあります。
getElementById- getElementsByTagName
- getElementsByClassName
- 1)getElementById
JavaScript の
の場合に注意してください。これは、ドキュメント オブジェクトに固有の関数です。スクリプト コードでは、関数名の後に 1 対の括弧を続ける必要があります。この 1 対の括弧には、 関数のパラメーターが含まれます。 document.getElementById(id) の getElementById メソッドにはパラメーターが 1 つだけあります: 取得する要素の id 属性の値 この id 属性は一重引用符または二重引用符で囲む必要があります。 。この docment.getElementById("purchases") の呼び出しは、オブジェクトを返します。このオブジェクトは、ドキュメント オブジェクトの一意の要素に対応します。その要素の HTLM id 属性値は、purchase です。結果はオブジェクト
2) getElementsByTagNameShoping List<title> </head> <body> <h1 id="What-to-buy">What to buy</h1> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> alert(typeof docment.getElementById("purchases")); </script> <body> </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre> <p> getElementsByTagName メソッドはオブジェクトの配列を返します。各オブジェクトはドキュメント内の指定されたタグを持つ要素に対応します。そのパラメータはタグの名前です: device.getElementByTagName(tag)</p> <h3> </h3> <p>getElementsByTagName では、パラメータとしてワイルドカード文字を使用できます。ワイルドカード文字 (*) は引用符で囲む必要があります </p>。 <pre class='brush:php;toolbar:false;'>alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre> <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Shoping List<title> </head> <body> <h1 id="What-to-buy">What to buy</h1> <p title="a gentle reminder">Don’t forget to buy this stuff.<p> <ul id="purchases"> <li> A tin of beans<li> <li class="sale">Cheese<li> <li class="sale important">Milk<li> </ul> <script> var items=document.getElementByTagName("li"); for (var i=0; i<items.length;i++){ alert(typeof items[i]); } </script> <body> </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</pre> <p>3) getElementByClassName</p> <pre class='brush:php;toolbar:false;'>alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre>このメソッドでは、クラス属性のクラス名を使用して要素にアクセスできます。これはクラス名である 1 つのパラメーターのみを受け入れます。 <pre class='brush:php;toolbar:false;'>var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre> <h3 id="このメソッドの戻り値も-getElementsByTagName-に似ており-同じクラス名を持つ要素の配列です">このメソッドの戻り値も getElementsByTagName に似ており、同じクラス名を持つ要素の配列です。 </h3> <pre class='brush:php;toolbar:false;'>document.getElementsByClassName("sale")</pre> <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p> <pre class='brush:php;toolbar:false;'>alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre> <p>也可以和getElementById组合使用</p> <pre class='brush:php;toolbar:false;'> var shopping=document.getElementById("purchase"); var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre> <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p> <pre class='brush:php;toolbar:false;'>function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){ if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i]; } }return results； }}</pre> <h4 id="获取和设置属性">5 获取和设置属性</h4> <ul> <li> <strong>getAttribute方法</strong>(获取元素的属性)</li> <li> <strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li> </ul> </li> </ul></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">声明</div><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">関連記事<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796796249.html" title="HTML：それはプログラミング言語か何か他のものですか？" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174464723172609.jpg?x-oss-process=image/resize,p_40" alt="HTML：それはプログラミング言語か何か他のものですか？" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796796249.html" title="HTML：それはプログラミング言語か何か他のものですか？" class="phphistorical_Version2_mids_title">HTML：それはプログラミング言語か何か他のものですか？</a><span class="Articlelist_txts_time">Apr 15, 2025 am 12:13 AM</span><p class="Articlelist_txts_p">htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796795665.html" title="HTML：Webページの構造の構築" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174456085285529.jpg?x-oss-process=image/resize,p_40" alt="HTML：Webページの構造の構築" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796795665.html" title="HTML：Webページの構造の構築" class="phphistorical_Version2_mids_title">HTML：Webページの構造の構築</a><span class="Articlelist_txts_time">Apr 14, 2025 am 12:14 AM</span><p class="Articlelist_txts_p">HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796795191.html" title="テキストからウェブサイトへ：HTMLの力" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174447404295304.jpg?x-oss-process=image/resize,p_40" alt="テキストからウェブサイトへ：HTMLの力" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796795191.html" title="テキストからウェブサイトへ：HTMLの力" class="phphistorical_Version2_mids_title">テキストからウェブサイトへ：HTMLの力</a><span class="Articlelist_txts_time">Apr 13, 2025 am 12:07 AM</span><p class="Articlelist_txts_p">HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796794693.html" title="HTML、CSS、およびJavaScriptの理解：初心者向けガイド" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174438733162787.jpg?x-oss-process=image/resize,p_40" alt="HTML、CSS、およびJavaScriptの理解：初心者向けガイド" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796794693.html" title="HTML、CSS、およびJavaScriptの理解：初心者向けガイド" class="phphistorical_Version2_mids_title">HTML、CSS、およびJavaScriptの理解：初心者向けガイド</a><span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796794180.html" title="HTMLの役割：Webコンテンツの構造" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174430155217186.jpg?x-oss-process=image/resize,p_40" alt="HTMLの役割：Webコンテンツの構造" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796794180.html" title="HTMLの役割：Webコンテンツの構造" class="phphistorical_Version2_mids_title">HTMLの役割：Webコンテンツの構造</a><span class="Articlelist_txts_time">Apr 11, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796793634.html" title="HTMLとコード：用語を詳しく見る" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174424853215422.jpg?x-oss-process=image/resize,p_40" alt="HTMLとコード：用語を詳しく見る" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796793634.html" title="HTMLとコード：用語を詳しく見る" class="phphistorical_Version2_mids_title">HTMLとコード：用語を詳しく見る</a><span class="Articlelist_txts_time">Apr 10, 2025 am 09:28 AM</span><p class="Articlelist_txts_p">htmlisaspecifictypeofcodefocuseduructuringwebcontent</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796793129.html" title="HTML、CSS、およびJavaScript：Web開発者に不可欠なツール" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174412873346901.jpg?x-oss-process=image/resize,p_40" alt="HTML、CSS、およびJavaScript：Web開発者に不可欠なツール" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796793129.html" title="HTML、CSS、およびJavaScript：Web開発者に不可欠なツール" class="phphistorical_Version2_mids_title">HTML、CSS、およびJavaScript：Web開発者に不可欠なツール</a><span class="Articlelist_txts_time">Apr 09, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ja/faq/1796792987.html" title="HTML、CSS、およびJavaScriptの役割：コアの責任" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174411031220217.jpg?x-oss-process=image/resize,p_40" alt="HTML、CSS、およびJavaScriptの役割：コアの責任" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ja/faq/1796792987.html" title="HTML、CSS、およびJavaScriptの役割：コアの責任" class="phphistorical_Version2_mids_title">HTML、CSS、およびJavaScriptの役割：コアの責任</a><span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span><p class="Articlelist_txts_p">HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。</p></div></div><a href="https://m.php.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>ホットAIツール</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>リアルなヌード写真を作成する AI 搭載アプリ</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>写真から衣服を削除するオンライン AI ツール。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>脱衣画像を無料で</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI衣類リムーバー</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>AIヘンタイを無料で生成します。</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ja/ai">もっと見る</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>人気の記事</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/1796780570.html" title="R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4週間前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/1796780641.html" title="R.E.P.O.最高のグラフィック設定" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.最高のグラフィック設定</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4週間前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/1796785841.html" title="アサシンのクリードシャドウズ：シーシェルリドルソリューション" class="phpgenera_Details_mainR4_bottom_title">アサシンのクリードシャドウズ：シーシェルリドルソリューション</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2週間前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/1796780520.html" title="R.E.P.O.誰も聞こえない場合はオーディオを修正する方法" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O.誰も聞こえない場合はオーディオを修正する方法</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4週間前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/1796779766.html" title="WWE 2K25：Myriseのすべてのロックを解除する方法" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25：Myriseのすべてのロックを解除する方法</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 か月前</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ja/article.html">もっと見る</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>ホットツール</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/toolset/development-tools/1527" title="VSCode Windows 64 ビットのダウンロード" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e2151b57e8e3927.png" src="/static/imghw/default1.png" alt="VSCode Windows 64 ビットのダウンロード" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/toolset/development-tools/1527" title="VSCode Windows 64 ビットのダウンロード" class="phpmain_tab2_mids_title"><h3>VSCode Windows 64 ビットのダウンロード</h3></a><p>Microsoft によって発売された無料で強力な IDE エディター</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/toolset/development-tools/1492" title="EditPlus 中国語クラック版" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e21527e79622256.png" src="/static/imghw/default1.png" alt="EditPlus 中国語クラック版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/toolset/development-tools/1492" title="EditPlus 中国語クラック版" class="phpmain_tab2_mids_title"><h3>EditPlus 中国語クラック版</h3></a><p>サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/toolset/development-tools/1471" title="SublimeText3 Linux 新バージョン" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5aab420a5fb42187.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Linux 新バージョン" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/toolset/development-tools/1471" title="SublimeText3 Linux 新バージョン" class="phpmain_tab2_mids_title"><h3>SublimeText3 Linux 新バージョン</h3></a><p>SublimeText3 Linux 最新バージョン</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"><h3>ドリームウィーバー CS6</h3></a><p>ビジュアル Web 開発ツール</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ja/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/005/169233952150073.png" src="/static/imghw/default1.png" alt="DVWA" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ja/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ja/ai">もっと見る</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>ホットトピック</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7508</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1378</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/steamdzhmcssmgs" title="Steamのアカウント名の形式は何ですか" class="phpgenera_Details_mainR4_bottom_title">Steamのアカウント名の形式は何ですか</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>78</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/winactivationkeyper" title="Win11 Activation Key Permanent" class="phpgenera_Details_mainR4_bottom_title">Win11 Activation Key Permanent</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ja/faq/newyorktimesdailybrief" title="NYTの接続はヒントと回答です" class="phpgenera_Details_mainR4_bottom_title">NYTの接続はヒントと回答です</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>19</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>58</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ja/faq/zt">もっと見る</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>