js_javascriptスキルでタグ名とIDを使用して要素を取得する方法
この記事では、タグ名と ID を使用して js で要素を取得する 3 つの方法を紹介します。具体的な内容は次のとおりです。
方法 1: ホリスティックな方法 、最初にすべての要素を取得し、次に ai+-b メソッドを使用して必要な要素を計算します
方法 2: 配列メソッド 、グローバル環境で空の配列を作成し、ループする必要がある構造に遭遇した場合、ループ内の要素を取得しますそしてそれらを配列
に入れます
メソッド 3: Function メソッド 、同じ要素グループに遭遇した場合、1 つの要素グループのみを操作し、関数パラメーターを使用してすべての効果を実現します
具体的なコードは次のとおりです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3种用tagname和id获取元素的方法</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
h1{
margin: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<h1 class="box-tit">分类名称</h1>
<ul class="box-list" id="box-list">
<li class="box-listI">
<input class="box-listI-input">
<button>保存</button>
<button>取消</button>
</li>
<li class="box-listI">
<input class="box-listI-input">
<button>保存</button>
<button>取消</button>
</li>
<li class="box-listI">
<input class="box-listI-input">
<button>保存</button>
<button>取消</button>
</li>
</ul>
</div>
<script>
//[1]整体法，先获取所有的元素，再通过ai+-b的方法来算出需要的元素
var oList = document.getElementById('box-list');
var aInput = oList.getElementsByTagName('input');
var aBtn =oList.getElementsByTagName('button');
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
}
for(var i = 0; i < aInput.length; i++){
//确定按钮
aBtn[2*i].onclick = function(){
aInput[this.index/2].disabled = true;
}
//取消按钮
aBtn[2*i+1].onclick = function(){
aInput[(this.index-1)/2].disabled = false;
aInput[(this.index-1)/2].value = '';
console.log(1);
}
}
//[2]数组法，在全局环境下建立空数组，遇到需要循环的结构时，在循环中获取元素，并放入数组
var oList = document.getElementById('box-list');
var aIn = oList.getElementsByTagName('li');
var aInput = [];
var aBtnY = [];
var aBtnX = [];
for(var i = 0; i < aIn.length; i++){
aInput[i] = aIn[i].getElementsByTagName('input')[0];
aBtnY[i] = aIn[i].getElementsByTagName('button')[0];
aBtnX[i] = aIn[i].getElementsByTagName('button')[1];
aBtnY[i].index = aBtnX[i].index = i;
//确定按钮
aBtnY[i].onclick = function(){
aInput[this.index].disabled = true;
}
//取消按钮
aBtnX[i].onclick = function(){
aInput[this.index].disabled = false;
aInput[this.index].value = '';
console.log(2);
}
}
//[3]函数法，遇到相同的几组元素时，只操作一组元素，并用函数传参来实现所有的效果
var oList = document.getElementById('box-list');
var aIn = oList.getElementsByTagName('li');
function fn(i){
var oInput = aIn[i].getElementsByTagName('input')[0];
var oBtnY = aIn[i].getElementsByTagName('button')[0];
var oBtnX = aIn[i].getElementsByTagName('button')[1];
//确定按钮
oBtnY.onclick = function(){
oInput.disabled = true;
}
//取消按钮
oBtnX.onclick = function(){
oInput.disabled = false;
oInput.value = '';
console.log(3);
}
}
for( var i = 0; i < aIn.length; i++){
fn(i);
}
</script>
</body>
</html>
この記事が、js で要素を取得する方法を学ぶ皆さんにとって役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7378
15
1628
14
1357
52
1267
25
1216
29
この Apple ID は iTunes Store でまだ使用されていません: 修正
Jun 10, 2024 pm 05:42 PM
AppleIDを使用してiTunesStoreにログインすると、「このAppleIDはiTunesStoreで使用されていません」というエラーが画面に表示される場合があります。心配するようなエラー メッセージはありません。これらのソリューション セットに従って問題を修正できます。解決策 1 – 配送先住所を変更する iTunes Store にこのプロンプトが表示される主な理由は、AppleID プロファイルに正しい住所がないことです。ステップ 1 – まず、iPhone で iPhone 設定を開きます。ステップ 2 – AppleID は他のすべての設定の最上位にある必要があります。それで、開けてください。ステップ 3 – そこに到達したら、「支払いと配送」オプションを開きます。ステップ 4 – Face ID を使用してアクセスを確認します。ステップ
イベント ビューアでのイベント ID 55、50、98、140 のディスク エラーを修正
Mar 19, 2024 am 09:43 AM
Windows 11/10 のイベント ビューアーでイベント ID 55、50、140、または 98 が表示された場合、またはディスク ファイル システム構造が破損しているため使用できないというエラーが発生した場合は、次のガイドに従って問題を解決してください。イベント 55、ディスク上のファイル システム構造が壊れていて使用できないとはどういう意味ですか?セッション 55 では、Ntfs ディスク上のファイル システム構造が破損しており、使用できません。ボリューム上で chkMSK ユーティリティを実行してください。NTFS がトランザクション ログにデータを書き込むことができない場合、イベント ID 55 のエラーがトリガーされ、NTFS はトランザクション データを書き込むことができず操作を完了できません。このエラーは通常、ディスク上に不良セクタが存在するか、ディスク サブシステムのファイル システムが不十分なために、ファイル システムが破損した場合に発生します。
Alibaba ID はどこで確認できますか?
Mar 08, 2024 pm 09:49 PM
Alibaba ソフトウェアでは、アカウントの登録が完了すると、システムによって一意の ID が割り当てられ、これがプラットフォーム上での ID として機能します。しかし、多くのユーザーは自分の ID を照会したいと考えていますが、その方法がわかりません。次に、この Web サイトの編集者が以下の戦略手順を詳しく紹介します。お役に立てれば幸いです。 Alibaba ID: [Alibaba]-[My] に対する答えはどこで見つかりますか。 1. まず Alibaba ソフトウェアを開きます. ホームページに入ったら、右下隅の [My] をクリックする必要があります; 2. その後、My ページにアクセスすると、ページの上部に [id] が表示されます; Alibaba ID はタオバオと同じですか? アリババ ID とタオバオ ID は異なりますが、この 2 つは同じです
株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます
Dec 17, 2023 pm 06:55 PM
株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
TencentビデオIDを確認できる場所
Feb 24, 2024 pm 06:25 PM
Tencent Video ID はどこで確認できますか? Tencent Video APP には専用の ID がありますが、ほとんどのユーザーは Tencent Video ID を確認する方法を知りません。次は、Tencent Video ID を確認する方法についてのグラフィック チュートリアルです。興味のあるユーザーはぜひ見に来てください！ Tencent Video 使用チュートリアル Tencent Video ID を確認する場所 1. まず Tencent Video APP を開き、メイン ページの右下隅にある [パーソナル センター] から特別エリアに入ります; 2. 次に、パーソナル センター ページに入り、[設定]機能; 3. 次に、設定ページに移動し、下部の[アカウントを終了]をクリックします; 4. 最後に、以下のページで専用のID番号が表示されます。
PHP と JS を使用して株価ローソク足チャートを作成する方法
Dec 17, 2023 am 08:08 AM
PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備 開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3
PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
Dec 18, 2023 pm 03:39 PM
インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した
