VUE3.0 をすぐに始める方法: 学習に入る
関連する推奨事項: JavaScript チュートリアル
1.要素を操作する
ドキュメント オブジェクトには、要素を検索するためのメソッドがいくつか用意されています。 ID、名前、クラスに基づいて、属性とタグ名を通じて操作の要素を取得します。
概要:
document.getElementById() メソッドが指定された ID を持つ要素を返すことを除き、他のメソッドは要件を満たすコレクションを返します。オブジェクトの 1 つを取得するには、添字を使用して取得できます。デフォルトでは 0 から始まります。
document オブジェクトは、ドキュメント内の要素を取得するために使用できるいくつかのプロパティを提供します。たとえば、すべてのフォームタグ、イメージタグなどを取得します。
なお、
文書オブジェクトのメソッドにより取得される演算要素と文書オブジェクトのプロパティは同一のオブジェクトを表す。たとえば、document.getElementsByTagName('body')[0] は document.body と一致します。
HTML5 の新しいドキュメント オブジェクト メソッド
操作用の要素を簡単に取得できるようにするために、HTML5 では、querySelector() と querySelectorAll() という 2 つの新しいメソッドがドキュメント オブジェクトに追加されています。
これら 2 つのメソッドは同じように使用されるため、以下では例として document.querySelector() メソッドを使用します。
DOM 操作では、要素オブジェクトは、要素内の指定された要素を取得するためのメソッドも提供します。一般的に使用される 2 つのメソッドは、getElementsByClassName() と getElementsByTagName() です。これらは、ドキュメント オブジェクト内の同じ名前のメソッドと同じ方法で使用されます。
さらに、要素オブジェクトは、指定された要素の子要素を取得するための Children 属性も提供します。たとえば、上記の例では ul の子要素を取得します。
HTMLCollection オブジェクト
HTMLCollection オブジェクトと NodeList オブジェクトの違い:
ヒント: getElementsByClassName() メソッド、getElementsByTagName() メソッド、および Children 属性によって返されるコレクションの場合、ID と名前は自動的に属性に変換できます。
2. 要素の内容
JavaScript では、取得した要素の内容を操作したい場合、DOM が提供するプロパティやメソッドを使用できます。
例を挙げてください
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>要素コンテンツの操作</title>
</head>
<本文>
<p id="ボックス">
最初の段落は...
<p>
2段落目は…
<a href="http://www.example.com">3 番目</a>
</p>
</p>
<スクリプト>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html> innerText 属性を使用すると、ブラウザの互換性の問題が発生する可能性がある
ことに注意してください
。したがって、開発中は、innerHTML を使用して要素のテキスト コンテンツをできるだけ取得または設定することを
お勧めします
。同時に、innerHTML 属性と document.write() メソッドの間には、コンテンツの設定において特定の違いがあります。前者は指定された要素に作用し、後者は HTML ドキュメント ページ全体を再構築します。したがって、読者は開発中に実際のニーズに応じて適切な実装方法を選択する必要があります
。 【事例】ボックスサイズの変更
コード実装アイデア：
① HTMLを記述し、pのサイズを設定します。
② ユーザーのクリック数に応じてボックスサイズの変更が完了します。
③ クリック数が奇数の場合はボックスが大きくなり、クリック数が偶数の場合はボックスが小さくなります。
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<スタイル>
.box{幅:50px;高さ:50px;背景:#eee;マージン:0 自動;}
</スタイル>
</head>
<本文>
<p id="box" class="box"></p>
<スクリプト>
var box = document.getElementById('box');
var i = 0; // ユーザーがボックスをクリックした回数を保存します box.onclick = function() { // ボックスのクリック イベントを処理します ++i;
if (i % 2) { // クリック数は奇数となり大きくなります this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'big';
} else { // クリック数は偶数となり小さくなります this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = '小さい';
}
};
</script>
</body>
</html> 3. 要素の属性
DOM では、JavaScript による指定された HTML 要素の関連属性の取得、変更、および走査を容易にするために、操作属性とメソッドが提供されます。
Attributes 属性を使用すると、HTML 要素のすべての属性、すべての属性の数、長さを取得できます。
例を挙げてください
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>要素属性の操作</title>
<スタイル>
.gray{背景: #CCC;}
#thick{font-weight: ボールド;}
</スタイル>
</head>
<本文>
<p>テスト単語。</p>
<スクリプト>
// p 要素を取得します var ele = document.getElementsByTagName('p')[0];
// ① 現在のeleの属性数を出力 console.log('操作前の属性数: ' + ele.attributes.length);
// ② eleに属性を追加し、属性数を確認する ele.setAttribute('align', 'center');
ele.setAttribute('タイトル', 'テストテキスト');
ele.setAttribute('クラス', 'グレー');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px ソリッドグリーン;');
console.log('属性追加後の属性数: ' + ele.attributes.length);
// ③ eleのスタイル属性値を取得 console.log('スタイル属性値の取得:' + ele.getAttribute('style'));
// ④ ele の style 属性を削除し、残りの属性を確認する ele.removeAttribute('style');
console.log('すべてのプロパティを表示:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html> 4. 要素スタイルの
レビュー: 要素属性の操作を通じてスタイルを変更します。
要素スタイルの構文: style.Attribute name。
要件: CSS スタイル名からハイフン「-」を削除し、英語の 2 番目の頭文字を大文字にする必要があります。
例: 背景色を設定するには、style 属性操作でbackground-color を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");
など
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>classList の使用法</title>
<スタイル>
.bg{背景:#ccc;}
.strong{font-size:24px;color:red;}
.smooth{高さ:30px;幅:120px;ボーダー半径:10px;}
</スタイル>
</head>
<本文>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // 2 番目の li 要素を取得します。 var ele = document.getElementsByTagName('li')[1] // li 要素に強いクラスがない場合は、 if (!ele.classList.contains('strong) を追加します。 ' )) { ele.classList.add('strong'); } // li要素にsmoothクラスがない場合、削除されている場合は追加します。 ele.classList.toggle('smooth'); log('スタイルの後に追加して切り替えます: ');
<スクリプト>
ele.classList.remove('bg');
console.log('削除後:');
コンソール.ログ(ele);
</script>
</body>
</html>さらに、classList 属性は、他の多くの関連する操作メソッドとプロパティも提供します。
5. 【事例】タブバー切り替え効果
コード実装のアイデア:
① HTML を記述してタブ バーの構造とスタイルを設計します。ここで、class は current に等しく、現在表示されているタブを示します。デフォルトは最初のタブです。
②全てのタグとそのタグに対応する表示内容を取得します。
ラベルごとにマウスオーバーイベントを通過し、ラベルに対応するすべてのディスプレイコンテンツをトラバースします。 Remove() メソッドは現在のものから移動します。
コードの実装
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<title>タブバーの切り替え効果</title>
<スタイル>
.tab-box{幅:383px;マージン:10px;border:1px 実線 #ccc;border-top:2px 実線 #206F96;}
.tab-head {height：31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1pxソリッド#ccc;border-right:1pxソリッド#ccc;background:#206F96;line-height:30px;text-整列:センター;カーソル:ポインタ;カラー:#fff;}
.tab-head .current{background:#fff;border-bottom:1px ソリッド #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{表示:なし;マージン:20px 10px;}
.tab-body .current{表示:ブロック;}
</スタイル>
</head>
<本文>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">タブ 1</p>
<p class="tab-head-p">タブ 2</p>
<p class="tab-head-p">タブ 3</p>
<p class="tab-head-p tab-head-r">タブ 4</p>
</p>
<！-jkdjfk？ - >
<p class="tab-body">
<p class="tab-body-p current"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<スクリプト>
// タブ バーのすべてのタブ要素オブジェクトを取得します。 var tabs = document.getElementsByClassName('tab-head-p');
// タブ バーのすべてのコンテンツ オブジェクトを取得します。 var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Traverse the element object tabs[i].onmouseover = function() { // Add a mouseover event to the tag element object for ( var i = 0; i < ps.length; ++i) { // タブバーのコンテンツ要素オブジェクトを走査します if (tabs[i] == this) { // 現在のマウスが持っている li 要素 ps[i] を表示します.classList.add('current'); の上にスライドしました。
tabs[i].classList.add('current');
} else {//他のli要素を非表示ps [i] .classlist.remove（ 'current'）;
tabs[i].classList.remove('current');
}
}
};
}
</script>
</body>
</html>関連する推奨事項：JavaScriptチュートリアル
上記は、JavaScriptの例で詳細に説明されているHTML要素操作の詳細なコンテンツです。
