この記事では、DOM を使用して JS で HTML 要素を制御するための関連情報を主に紹介します。必要な友人は参照してください。
1.getElementsByName(): 名前を取得します。
~~~~~~~~~ ~~ ~~~~~~~~~~~~~~~~~~~~~~`
例:
<p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=document.getElementsByName("pn"); alert(count.length); var p=count[2]; p.innerHTML="world"; } </script>
結果: インターフェイスは、プロンプト ボックスとともに 3 つの hello を出力します。 3" で [OK] をクリックすると、インターフェイスに表示される内容が hello hello world に変わります
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ~~~~~~~~~~~~~~~~~~・
2.getElementsByTagName(): 要素を取得します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<p>hello</p> <p>hello</p> <p>hello</p> <script> function getName(){ var count=document.getElementsByTagName("p"); alert(count.length); var p=count[2]; p.innerHTML="world"; } </script>
結果: インターフェイスは 3 つの hello を出力します。プロンプト ボックス「3」が表示され、[OK] をクリックすると、インターフェイスに表示される内容が hello hello world
~~~~~~~~~~~~~~~~~~~~ に変わります。 ~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute(): 要素の属性を取得します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid" title="得到a的标签属性"></a> <script> function getAttr1(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("id"); alert("a的ID是:"+attr); } function getAttr2(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("title"); alert("a的title内容是:"+attr); } getAttr1(); getAttr2(); </script>
結果: ポップアッププロンプト「a の ID は次のとおりです。」ボックス 「OK」をクリックすると、「a のタイトル内容は次のとおりです。a のラベル属性を取得します。」というプロンプトが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute() 要素の属性を設定します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<a id="aid2">aid2</a> <script> function setAttr(){ var anode=document.getElementById("aid2"); anode.setAttribute("title","动态设置a的title属性"); var attr=anode.getAttribute("title"); alert("动态设置的title值为:"+attr); } setAttr(); </script>
結果: A 「動的に設定されるタイトル値は次のとおりです: a のタイトル属性を動的に設定します」というプロンプト ボックスが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.childNodes(): 子ノードにアクセスします。
~~~~~~~~~~~~~~~~~~~~~~~~~~...
Example
<ul><li>1</li><li>2</li><li>3</li></ul> <script> function getChildNode(){ var childnode=document.getElementsByTagName("ul")[0].childNodes; alert(childnode.length); alert(childnode[0].nodeType); } getChildNode(); </script>
結果: インターフェイスが出力されます。1 .2 3ダイアログボックス「3」が表示され、「OK」をクリックすると「1」が表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentNode():親ノードにアクセスします。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~・
例
<p> <p id="pid"></p> </p> <script> function getParentNode(){ var p=document.getElementById("pid"); alert(p.parentNode.nodeName); } getParentNode(); </script>
結果: ポップアッププロンプトボックス:p.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.createElement(): 要素の作成ノード。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例:
<script> function createNode(){ var body=document.body; var input=document.createElement("input"); input.type="button"; input.value="按钮"; body.appendChild(input);//插入节点 } createNode(); </script>
結果: ボタンが表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.createTextNode(): テキストノードを作成します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例:
<script> function createNode(){ var element = document.createElement("p"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); } createNode(); </script>
コード分析: この例は作成されました新しい
要素には、値「message」を持つクラス属性が割り当てられます。次に、別のテキスト ノードが作成され、以前に作成された要素に追加されます。最後のステップでは、この要素をドキュメント内の
要素に追加して、新しく作成された要素とテキスト ノードがブラウザに表示されるようにします。結果: ページに hello world が表示されます。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.insertBefore( ): ノードを挿入します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例
<p id="p"> <p id="pid">p元素</p> </p> <script> function addNode(){ var p=document.getElementById("p"); var node=document.getElementById("pid"); var newnode=document.createElement("p"); newnode.innerHTML="动态插入一个p元素"; p.insertBefore(newnode,node); } addNode(); </script>
結果: インターフェイスは次のように出力します。 p 要素を動的に挿入します
10.removeChild(): ノードを削除します。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~・
例
<p id="p"> <p id="pid">p元素</p> </p> <script> function removeNode(){ var p=document.getElementById("p"); var p=p.removeChild(p.childNodes[1]); } removeNode(); </script>
結果: インターフェイスには何も表示されません。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetHeight: Web ページのサイズ
12.scrollHeight :ウェブページサイズ
~~~~~~~~~~~~~~~~~~~~~~~~~~・
例:
<script> function getSize(){ var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题 var height=document.documentElement.offsetHeight||document.body.offsetHeight; alert(width+","+height); } getSize(); </script>
表示結果:
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
JSON データを HTML で表示する方法以上がJS で DOM を使用して HTML 要素を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

メモ帳++7.3.1
使いやすく無料のコードエディター

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
