要素のテキストコンテンツを取得できる関数をカプセル化します。
今回は要素のテキスト内容を取得できる関数をカプセル化する際の注意点を紹介します。実際のケースを見てみましょう。
A.1 論理的なステップ
目標: 要素のすべての兄弟 + 要素ノードを取得します
S1 親要素ノード + そのすべての子ノードを取得します
S2 返される疑似配列オブジェクトを宣言します
S3 入力自体を削除します要素ノード
S4 は array.length を使用して配列の内容を添字で渡します (i を使用すると、i をスキップすることができ、順序は変わりません)
S5 この疑似配列を返します
A.1 特定のコード
<body> <ul> <li id="item1">选项1</li> <li id="item2">选项2</li> <li id="item3">选项3</li> <li id="item4">选项4</li> <li id="item5">选项5</li> </ul> </body>
//S5 封装为函数(API)
function getSiblings(node){
var allChildren = node.parentNode.children; //S1 获取li的父元素节点 + 其所有子节点
var array = {length:0}; //S2 声明将要返回的伪数组对象
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // S3 去除本身传入的元素节点
array[array.length] = allChildren[i]; // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
array.length += 1;
}
}
// console.log(array); // {0:li#item1, 1:li#item2......}
return array; // S6 返回这个伪数组
}A.2 論理ステップ
目標: バッチ内の要素にクラス名を追加/削除する
S1 オブジェクトのキー値を走査する
S2 クラス名の値が true の場合、クラス名を追加します。それ以外の場合は削除します
A .2 特定のコード
function addClass(node, classes){
// var classes = {'a':true, 'b':false, 'c':true} //S1 构造要传入的类名对象
for (let key in classes){ //S2 遍历对象的key值
value = classes[key];
// if (value){ //S3 当类名的值为ture时，添加类名
// node.classList.add(key);
// }else{
// node.classList.remove(key);
// }
// 以上 if/else可以优化为
var methodName = value ? 'add':'remove';
node.classList[methodName](key);
}
}B は namespace を追加します。これは
window.mydom = {};
mydom.getSiblings = function getSiblings(node){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
mydom.addClass = function addClass(node, classes){
classes.forEach( (value)=> node.classList.add(value) );
}`
呼び出しメソッドは mydom.getSiblings(item3); 'a','b']) mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
而希望的调用方法是item3.getSibling() / item3.addClass('['a', 'b']) 必要な呼び出しメソッドは item3.getSibling() / item3.addClass('['a', 'b'])です
C .1 this+prototypechain
Node.prototype.getSiblings = function getSiblings(){
var allChildren = this.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== this){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
Node.prototype.addClass = function addClass(classes){
classes.forEach( (value)=> this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )C.2 node2 function_object mode
window.Node2 = function(node){ //要挂载到全局window上，才能直接访问
return {
getSiblings: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )C.3 簡略化された jQuery をシミュレートする
window.jQuery = function(nodeOrSelector){
let node;
if (typeof nodeOrSelector === 'string'){ //类型检测
node = document.querySelector(nodeOrSelector); //只支持返回一个节点
} else {
node = nodeOrSelector;
}
return{
getSibligs: function(){
var allChildren = node.parentNode.children;
var array = {length:0};
for (let i = 0 ; i < allChildren.length; i++){
if (allChildren[i] !== node){
array[array.length] = allChildren[i];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])C.4 1 つ/複数のノードの受け渡しをサポートする
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// for (let i = 0; i < nodes.length; i++){
// classes.forEach( (value) => nodes[i].classList.add(value) );
// }
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
return nodes
}
//调用效果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );D 他の関数を追加する
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
// 获取元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 获取其文本内容，并推送到存储的 数组;
// S3 返回数组
nodes.getText = function(){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent); //获取元素节点内容并推入到数组
}
return texts
}
// 设置元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 设置其文本内容为传入的参数内容
nodes.setText = function(text){
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
// 合并为一个接口
// S1 判断是否传入了参数, 传入了就是设置，没传入就是读取
nodes.text = function(text){
if (text === undefined){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent);
}
return texts
} else {
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
}
return nodes
}
// 调用结果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );
// 获取文本内容
// var text = node2.text();
// console.log(text);
// 设置文本内容
node2.text('hi');あなたはこの記事のケースを読みました。この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用の実践的な概要
以上が要素のテキストコンテンツを取得できる関数をカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7694
15
1640
14
1393
52
1287
25
1229
29
Googleセキュリティコードはどこで入手できますか
Mar 30, 2024 am 11:11 AM
Google Authenticator はユーザー アカウントのセキュリティを保護するために使用されるツールであり、そのキーは動的検証コードを生成するために使用される重要な情報です。 Google Authenticator のキーを忘れて、セキュリティ コードでしか認証できない場合は、この Web サイトの編集者が Google セキュリティ コードの入手先について詳しく説明しますので、お役に立てれば幸いです。詳細を知る ユーザーは以下を読み続けてください。まず電話の設定を開き、設定ページに入ります。ページを下にスクロールして Google を見つけます。 Googleページに移動し、「Googleアカウント」をクリックします。アカウント ページに入り、確認コードの下にある [表示] をクリックします。パスワードを入力するか、指紋を使用して身元を確認します。 Google セキュリティ コードを取得し、そのセキュリティ コードを使用して Google の ID を確認します。
ダウンロードフォルダを削除してもいいでしょうか？
Feb 19, 2024 pm 03:38 PM
ダウンロードは削除できますか? 近年、デジタル時代の到来により、私たちの生活にはデジタル製品やサービスがますます登場しています。次に、デジタル コンテンツに対する需要が日に日に増加していることがわかります。私たちの日常生活や仕事では、ドキュメント、写真、オーディオ、ビデオなどのさまざまなファイルをダウンロードする必要があることがよくあります。これらのダウンロードされたファイルは通常、「downloads」というフォルダーに保存されます。しかし、時間が経つにつれて、私たちはしばしば次のことに気づきます。
どのゲームが i34150 および 1G 独立グラフィックスでのプレイに適していますか (どのゲームが i34150 に適していますか)
Jan 05, 2024 pm 08:24 PM
1G 独立グラフィックスを備えた i34150 ではどのようなゲームをプレイできますか? LoL などの小さなゲームもプレイできますか? GTX750 および GTX750TI は、グラフィックス カードの選択肢として非常に適しています。小規模なゲームをプレイするだけの場合、またはゲームをプレイしない場合は、i34150 統合グラフィックス カードを使用することをお勧めします。一般に、グラフィックス カードとプロセッサーの価格差はそれほど大きくないため、合理的な組み合わせを選択することが重要です。 2G のビデオ メモリが必要な場合は、GTX750TI を選択することをお勧めします。1G のビデオ メモリのみが必要な場合は、GTX750 を選択してください。 GTX750TI は、オーバークロック機能を備えた GTX750 の強化版と見なされます。どのグラフィックス カードを i34150 と組み合わせることができるかはニーズによって異なります。スタンドアロン ゲームをプレイする予定がある場合は、グラフィックス カードの変更を検討することをお勧めします。選んでいいですよ
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
最新のアップデートを今すぐ入手: 不足している最新アップデートを修正する
Nov 08, 2023 pm 02:25 PM
[最新の更新プログラムが利用可能になり次第入手する] オプションが見つからない、またはグレー表示されている場合は、開発者チャネルの Windows 11 ビルドを実行している可能性がありますが、これは正常です。その他の場合は、KB5026446 (22621.1778) 更新プログラムのインストール後に問題が発生します。 「最新のアップデートが利用可能になり次第、すぐに入手する」オプションを再び表示するためにできることは次のとおりです。 「最新のアップデートが入手可能になり次第入手する」オプションを元に戻すにはどうすればよいですか?以下の解決策のいずれかを開始する前に、最新の Windows 11 更新プログラムを確認してインストールしてください。 1. ViVeTool を使用して Microsoft Update カタログ ページに移動し、KB5026446 更新プログラムを探します。 PC にアップデートをダウンロードして再インストールします
Realme 12 ProにデュアルSIMをインストールするにはどうすればよいですか?
Mar 18, 2024 pm 02:10 PM
国内の携帯電話の一般的な操作は非常に似ていますが、携帯電話のモデルやメーカーが異なると、デュアル SIM のインストール方法が異なる場合があるなど、細部ではまだいくつかの違いがあります。新しい携帯電話 Erzhenwo 12Pro もデュアル SIM デュアル スタンバイをサポートしていますが、この携帯電話にデュアル SIM をインストールするにはどうすればよいですか? Realme 12ProにデュアルSIMをインストールするにはどうすればよいですか?インストールする前に必ず携帯電話の電源を切ってください。ステップ 1: SIM カード トレイを見つける: 電話機の SIM カード トレイを見つける. 通常、Realme 12 Pro では、SIM カード トレイは電話機の側面または上部にあります。ステップ 2: 最初の SIM カードを挿入します. 専用の SIM カード ピンまたは小さな物体を使用して、SIM カード トレイのスロットに挿入し、最初の SIM カードを慎重に挿入します。
画面の高さをすばやく取得するための jQuery のヒント
Feb 24, 2024 pm 06:30 PM
jQuery のヒント: 画面の高さをすばやく取得する方法 Web 開発では、レスポンシブ レイアウトの実装、要素サイズの動的計算など、画面の高さを取得する必要がある状況によく遭遇します。 jQueryを利用すると画面の高さを取得する機能を簡単に実現できます。次に、jQueryを使って画面の高さを高速に取得する実装方法をいくつか紹介し、具体的なコード例を添付します。方法 1: jQuery の height() メソッドを使用して画面の高さを取得します。
CSS トランジション効果: 要素のスライド効果を実現する方法
Nov 21, 2023 pm 01:16 PM
CSS トランジション効果: 要素のスライド効果を実現する方法 はじめに: Web デザインでは、要素の動的な効果によりユーザー エクスペリエンスを向上させることができます。その中でも、スライド効果は一般的で人気のあるトランジション効果です。 CSS のトランジション プロパティを使用すると、要素のスライド アニメーション効果を簡単に実現できます。この記事では、CSS トランジション プロパティを使用して要素のスライド効果を実現する方法を紹介し、読者がよりよく理解して適用できるように具体的なコード例を示します。 1. CSS トランジション属性の概要 トランジション CSS トランジション属性 tra
