JavaScriptでHTMLタグを操作する方法

JavaScript は、Web ページ内の Html タグを操作して動的な効果やユーザー インタラクションを実現するために使用できるクライアント側のスクリプト言語です。

最初に強調すべきことは、JavaScript は作成された HTML タグを直接操作するのではなく、指定されたタグへの参照を取得し、JavaScript のプロパティとメソッドを使用してタグを変更および制御するということです。

まず、指定されたタグの参照を取得する必要があります。一般的に使用されるメソッドは次のとおりです。

1. id ​​属性を使用する
   HTML タグで id 属性を定義し、JavaScript で document.getElementById() メソッドを使用してタグへの参照を取得します。 。例:

HTML コード

<div>这是一个Div标签</div>

JavaScript コード

var myDiv = document.getElementById("myDiv");

2. クラス属性を使用する
   HTML タグと JavaScript でクラス属性を定義します。 document.getElementsByClassName() メソッドを使用して、このクラスのすべてのタグへの参照を取得します。例:

HTML コード

<div>这是一个class为myClass的Div标签</div>
<div>这是另一个class为myClass的Div标签</div>

JavaScript コード

var myDivs = document.getElementsByClassName("myClass");

3. タグ名を使用
   JavaScript で document.getElementsByTagName() メソッドを使用して取得します。指定されたタグ名を持つすべてのタグへの参照。例:

HTML コード

<div>这是一个Div标签</div>
这是一个P标签

JavaScript コード

var divs = document.getElementsByTagName("div");//获取所有的div标签
var p = document.getElementsByTagName("p");//获取所有的p标签

4. querySelector() メソッドを使用する
   JavaScript で document.querySelector() メソッドを使用する指定されたセレクターに最初に一致するタグへの参照を取得します。例:

HTML コード

这是一个class为myClass的Div标签
<div>这是一个Div标签</div>

JavaScript コード

var myDiv = document.querySelector("#myDiv");//获取id为myDiv的标签
var myClass = document.querySelector(".myClass");//获取class为myClass的第一个标签

指定したタグの参照を取得した後、JavaScript のプロパティとメソッドを使用して操作できます。 HTML タグ。一般的に使用される操作は次のとおりです。

1. タグのコンテンツと属性を変更する
   innerHTML 属性とタグの setAttribute() メソッドを使用して、タグのコンテンツと属性を変更できます。 。例:

JavaScript コード

myDiv.innerHTML = "我是新内容";//修改myDiv的内容为"我是新内容"
myDiv.setAttribute("class", "newClass");//将myDiv的class属性改成"newClass"

2. タグの表示または非表示
   タグの style.display 属性を使用して、タグの表示または非表示を制御できます。鬼ごっこ。例:

JavaScript コード

myDiv.style.display = "none";//将myDiv标签隐藏

3. タグの追加または削除
   createElement() メソッドを使用して新しいタグを作成し、appendChild( ) メソッドで新しいタグを追加します。 指定したタグに移動し、removeChild() メソッドを使用して、親要素から指定したタグを削除します。例:

JavaScript コード

var newDiv = document.createElement("div");//创建新的div标签
newDiv.innerHTML = "我是新添加的div";//设置新标签的内容
myDiv.appendChild(newDiv);//将新标签添加到myDiv中
myDiv.parentNode.removeChild(myDiv);//将myDiv从它的父标签中删除

要約すると、指定したタグの参照を取得することで、JavaScript で HTML タグを操作して、動的効果や対話型機能を実現できます。ウェブページ。もちろん、これは JavaScript による Html タグの操作方法の氷山の一角にすぎず、私たちが探索し実践するのを待っている強力なテクニックがまだたくさんあります。

以上がJavaScriptでHTMLタグを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。