JavaScript の例を使用した HTML 要素の操作の詳細な説明

この記事では、javascript に関する関連知識を提供します。主に、操作対象の要素の取得方法、操作対象の要素の内容、プロパティ、スタイルなど、HTML 要素の操作に関連する問題を紹介します。 、など、皆さんの参考になれば幸いです。

#関連する推奨事項:

javascript チュートリアル

1. 操作の要素を取得する

ドキュメント オブジェクトのメソッドとプロパティ

ドキュメント オブジェクトには、要素を検索するためのメソッドがいくつか用意されています。これらのメソッドを使用すると、要素の ID、名前、クラス属性、およびタグ名に基づいて操作対象の要素を取得できます。

概要

document.getElementById() メソッドが指定された ID を持つ要素を返すことを除き、他のすべてのメソッドが返すのは要件を満たすコレクション。オブジェクトの 1 つを取得するには、添字を使用して取得できます。デフォルトでは 0 から始まります。

ドキュメント オブジェクトは、ドキュメント内の要素を取得するために使用できるいくつかのプロパティを提供します。たとえば、すべてのフォームタグ、イメージタグなどを取得します。

#ドキュメント オブジェクトの body 属性は、body 要素を返すために使用されます。

• ドキュメント オブジェクトの documentElement プロパティは、HTML ドキュメントのルート ノードの html 要素を返すために使用されます。

注意

ドキュメント オブジェクトのメソッドを通じて取得される操作要素とドキュメント オブジェクトのプロパティは、同じオブジェクトを表します。たとえば、document.getElementsByTagName(‘body’)[0] は document.body と同一です。

#HTML5 の新しいドキュメント オブジェクト メソッド

HTML5 では、操作を取得するのに便利な要素はドキュメントです。 querySelector() と querySelectorAll() という 2 つの新しいメソッドが追加されました。

querySelector() メソッドは、指定された要素または CSS セレクターに一致するドキュメント内の最初のオブジェクトへの参照を返すために使用されます。

querySelectorAll() メソッドは、指定された要素または CSS セレクターに一致するドキュメント内のオブジェクトのコレクションを返すために使用されます。
• これら 2 つのメソッドは同じように使用されるため、以下では例として document.querySelector() メソッドを使用します。

Element オブジェクトのメソッドとプロパティ

DOM 操作では、Element オブジェクトは、要素内の指定された要素を取得するためのメソッドも提供します。一般的に使用される 2 つのメソッドは、getElementsByClassName( ) と getElementsByClassName( ) です。 getElementsByTagName()。これらは、ドキュメント オブジェクトの同じ名前のメソッドと同じ方法で使用されます。

#さらに、要素オブジェクトは、指定された要素の子要素を取得するための Children 属性も提供します。たとえば、上記の例では ul の子要素を取得します。

#要素オブジェクトの Children 属性もオブジェクトのコレクションを返します。オブジェクトの 1 つを取得したい場合は、次の方法でも取得する必要があります。デフォルトでは 0 から始まる添え字。

さらに、ドキュメント オブジェクトには Children 属性もあり、その最初の子要素は通常 HTML 要素です。
• HTMLCollection オブジェクト

HTMLCollection オブジェクト: getElementsByClassName() メソッド、getElementsByTagName() メソッド、children 属性などを呼び出して返します。 document オブジェクトまたは Element オブジェクト オブジェクトのセット。

NodeList オブジェクト: ドキュメント オブジェクトが getElementsByName() メソッドを呼び出すと、Chrome および FireFox ブラウザーでは NodeList オブジェクトが返され、IE11 では HTMLCollection オブジェクトが返されます。
• HTMLCollection オブジェクトと NodeList オブジェクトの違い:

HTMLCollection オブジェクトは要素の操作に使用されます。

NodeList オブジェクトはノードの操作に使用されます。
• ヒント: getElementsByClassName() メソッド、getElementsByTagName() メソッドによって返されるコレクション、および Children 属性の場合、ID と名前を属性に自動的に変換できます。

2. 要素の内容

JavaScript では、取得した要素の内容を操作したい場合、DOM を使用できます。提供されたプロパティとメソッドの実装。

• プロパティは Element オブジェクトに属し、メソッドはドキュメント オブジェクトに属します。
• innerHTML は、使用時に記述された形式とタグ スタイルを維持します。
• innerText は、すべての書式設定とタグが削除されたプレーン テキスト コンテンツです。
• textContent 属性は、タグを削除した後もテキスト形式を保持します。

#例

コードの実装

	nbsp;html>
	
	
	<meta>
	<title>元素内容操作</title>
	
	
	<p>
	The first paragraph...
	</p><p>
	The second paragraph...
	<a>third</a>
	</p>
	

<script> var box = document.getElementById(&#39;box&#39;); console.log(box.innerHTML); console.log(box.innerText); console.log(box.textContent); </script> Note

innerText 属性を使用すると、ブラウザの互換性の問題が発生する可能性があります。したがって、開発中は、innerHTML を使用して要素のテキスト コンテンツをできるだけ取得または設定することをお勧めします。また、innerHTML 属性と document.write() メソッドの間には、コンテンツの設定において一定の違いがあり、前者は指定された要素に作用するのに対し、後者は HTML ドキュメント ページ全体を再構築します。したがって、読者は開発中に実際のニーズに応じて適切な実装方法を選択する必要があります。

【事例】ボックスサイズの変更

#コード実装のアイデア:

① HTMLを記述し、pのサイズを設定します。 ② ユーザーのクリック数に基づいてボックスのサイズを変更します。

③ クリック数が奇数の場合はボックスが大きくなり、クリック数が偶数の場合はボックスが小さくなります。

コードの実装

	nbsp;html>
	
	
	<meta>
	<style>
	.box{width:50px;height:50px;background:#eee;margin:0 auto;}
	</style>
	
	
	<p></p>
	<script>
	var box = document.getElementById(&#39;box&#39;);
	var i = 0; // 保存用户单击盒子的次数
	box.onclick = function() { // 处理盒子的单击事件
	++i;
	if (i % 2) { // 单击次数为奇数，变大
	this.style.width = &#39;200px&#39;;
	this.style.height = &#39;200px&#39;;
	this.innerHTML = &#39;大&#39;;
	} else { // 单击次数为偶数，变小
	this.style.width = &#39;50px&#39;;
	this.style.height = &#39;50px&#39;;
	this.innerHTML = &#39;小&#39;;
	}
	};
	</script>
	
	

3. 要素の属性

DOM では、JavaScript の取得、変更を容易にするために、 HTML 要素の関連属性は、操作の属性とメソッドを提供します。

attributes 属性を使用して、HTML 要素のすべての属性とすべての属性の長さを取得します。

#例

コードの実装

	nbsp;html>
	
	
	<meta>
	<title>元素属性操作</title>
	<style>
	.gray{background: #CCC;}
	#thick{font-weight: bolder;}
	</style>
	
	
	<p>test word.</p>
	<script>
	// 获取p元素
	var ele = document.getElementsByTagName(&#39;p&#39;)[0];
	// ① 输出当前ele的属性个数
	console.log(&#39;未操作前属性个数：&#39; + ele.attributes.length);
	// ② 为ele添加属性，并查看属性个数
	ele.setAttribute(&#39;align&#39;, &#39;center&#39;);
	ele.setAttribute(&#39;title&#39;, &#39;测试文字&#39;);
	ele.setAttribute(&#39;class&#39;, &#39;gray&#39;);
	ele.setAttribute(&#39;id&#39;, &#39;thick&#39;);
	ele.setAttribute(&#39;style&#39;, &#39;font-size:24px;border:1px solid green;&#39;);
	console.log(&#39;添加属性后的属性个数：&#39; + ele.attributes.length);
	// ③ 获取ele的style属性值
	console.log(&#39;获取style属性值：&#39; + ele.getAttribute(&#39;style&#39;));
	// ④ 删除ele的style属性，并查看剩余属性情况
	ele.removeAttribute(&#39;style&#39;);
	console.log(&#39;查看所有属性：&#39;);
	for (var i = 0; i < ele.attributes.length; ++i) {
	console.log(ele.attributes[i]);
	}
	</script>
	
	

4 . 要素のスタイル

復習: 要素の属性の操作を通じてスタイルを変更します。

要素スタイルの構文: style.属性名。

要件: CSS スタイル名の水平ダッシュ「-」を削除し、英語の 2 番目の頭文字を大文字にする必要があります。

例: 背景色を設定するbackground-colorは、style属性操作でbackgroundColorに変更する必要があります。

#注意

CSS の float スタイルは、JavaScript の予約語と競合します。ブラウザが異なれば解決策も異なります。たとえば、IE9～11、Chrome、FireFoxでは「float」と「cssFloat」、Safariブラウザでは「float」、IE6～8では「styleFloat」が使用できます。

質問: 要素には複数のクラス セレクターを含めることができます。開発中にセレクター リストを操作するにはどうすればよいですか?

元の解決策: 要素オブジェクトの className 属性を使用して結果を取得し、取得された結果は文字型であり、実際の状況に応じて文字列を処理します。

HTML5 によって提供されるメソッド: 新しい classList (読み取り専用) 要素のクラス セレクター リスト。

例: p 要素のクラス値が「box header navlist title」の場合、ヘッダーを削除するにはどうすればよいですか?

HTML5 ソリューション: p 要素 object.classList.toggle("header");

例:

コード実装

	nbsp;html>
	
	
	<meta>
	<title>classList的使用</title>
	<style>
	.bg{background:#ccc;}
	.strong{font-size:24px;color:red;}
	.smooth{height:30px;width:120px;border-radius:10px;}
	</style>
	
	
	

• PHP
• JavaScript
• C++
• Java

<script> // 获取第2个li元素 var ele = document.getElementsByTagName(&#39;li&#39;)[1]; // 若li元素中没有strong类，则添加 if (!ele.classList.contains(&#39;strong&#39;)) { ele.classList.add(&#39;strong&#39;); } // 若li元素中没有smooth类，则添加；若有删除 ele.classList.toggle(&#39;smooth&#39;); console.log(&#39;添加与切换样式后：&#39;); console.log(ele); </script> <script> ele.classList.remove(&#39;bg&#39;); console.log(&#39;删除后：&#39;); console.log(ele); </script> さらに、classList 属性は、他の多くの関連する操作メソッドとプロパティも提供します。

5. 【事例】タブバー切り替え効果

##コード実装のアイデア

:

① タブ バーの構造とスタイルのデザインを実現する HTML を記述します。クラスは current に等しく、現在表示されているタブを示します。デフォルトは a ラベルです。

② すべてのタグとそのタグに対応する表示内容を取得します。

• ③ 各ラベルのマウス オーバー イベントをトラバースして追加します。イベント ハンドラーで、ラベルに対応するすべての表示コンテンツをトラバースします。マウスがラベル上をスライドするときに、 classList add() メソッドは現在を追加します。それ以外の場合は、remove() メソッドを通じて削除されます。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃コード＃＃＃＃＃＃

  	nbsp;html>
  	
  	
  	<meta>
  	<title>标签栏切换效果</title>
  	<style>
  	.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
  	.tab-head{height:31px;}
  	.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
  	.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
  	.tab-head-r{border-right:0;}
  	.tab-body-p{display:none;margin:20px 10px;}
  	.tab-body .current{display:block;}
  	</style>
  	
  	
  	<p>
  	</p><p>
  	</p><p>标签一</p>
  	<p>标签二</p>
  	<p>标签三</p>
  	<p>标签四</p>
  	
  	<!--jkdjfk?-->
  	<p>
  	</p><p> 1 </p>
  	<p> 2 </p>
  	<p> 3 </p>
  	<p> 4 </p>
  	
  	
  	<script>
  	// 获取标签栏的所有标签元素对象
  	var tabs = document.getElementsByClassName(&#39;tab-head-p&#39;);
  	// 获取标签栏的所有内容对象
  	var ps = document.getElementsByClassName(&#39;tab-body-p&#39;);
  	for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象
  	tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件
  	for (var i = 0; i < ps.length; ++i) { // 遍历标签栏的内容元素对象
  	if (tabs[i] == this) { // 显示当前鼠标滑过的li元素
  	ps[i].classList.add(&#39;current&#39;);
  	tabs[i].classList.add(&#39;current&#39;);
  	} else { // 隐藏其他li元素
  	ps[i].classList.remove(&#39;current&#39;);
  	tabs[i].classList.remove(&#39;current&#39;);
  	}
  	}
  	};
  	}
  	</script>
  	
  	

  相关推荐：javascript教程

以上がJavaScript の例を使用した HTML 要素の操作の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。