コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > DOM向けJavaScriptアプリケーション解析(2)_DOM

DOM向けJavaScriptアプリケーション解析(2)_DOM

WBOY
リリース： 2016-05-16 17:54:13
オリジナル
951 人が閲覧しました

実際、ネイティブ JS にもこれらの属性があります。 JQ とほぼ同じですが、少し少ないです。ただし、JQ よりも使用するのが少し面倒です。主な原因は FF ブラウザです。FF では改行が DOM 要素として扱われるためです。たとえば、

コードをコピーします コードは次のとおりです:






ネイティブ JS を使用して、要素の下の dom 子要素として ID を取得します。最初の章で説明したメソッドは var a = document.getElementById("dom").getElementsByTagName("div"); です。これは問題ありません。はい、alert(a.length) プロンプトは 2 になりますが、ここでは別のメソッドを使用して、前の章で説明した var b = document.getElementById("dom").childNodes を取得します。 )IE ブラウザでは問題なく 2 のままですが、FF ブラウザでは 4 であることが表示されます。これは、FF が改行を要素として扱うためです。
JS を使用するには、これらの属性を処理する必要があります。アイデアの処理は、これらの要素をたどるだけで簡単に行えます。タイプがスペースとテキストである要素をすべて削除します。処理関数はこんな感じです
コードをコピー コードは次のとおりです。

function del_space( elem){
var elem_child = elem.childNodes;
for(var i=0;iif(elem_child.nodeName == "#text" && !/S /.test( elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

この関数について説明します
var elem_child = elem.childNodes; 🎜>Pass 受信した elem 要素の子要素が elem_child にスローされます。

コードをコピーします。 コードは次のとおりです。 🎜>
for(var i=0;iif(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue) )
{elem.removeChild (elem_child)}
}


これらの子要素を反復処理します。これらの要素にテキストのノード タイプがあり、このテキスト タイプ ノードのノード値が空である場合。削除してください

(nodeName は、このノードのノード タイプを取得するために使用される JS の属性です。/S/ は、JS の非 null 文字の正規表現です。先頭に感嘆符を追加します)のは null 文字であることを意味します。Test は、その内部のものと外部のものを比較するメソッドです。removeChild は、このノード内の値を取得するメソッドでもあります。これらの属性を呼び出す前に、この関数を呼び出してスペースをクリアするだけで済みます。たとえば、


< のように安心して使用できます。 🎜>
コードをコピーします
コードは次のとおりです:
;/div>


var a = ドキュメント。 getElementById("dom");
del_space(a); スペースをクリーンアップする関数を呼び出します。
var b = a.childNodes; a の親ノードを取得します。
var d = a.nextSbiling; a
var e = a.previousSbiling の前の兄弟ノードを取得します。 ; a
の最初の子ノードを取得します。 var g = a.lastChild a

の最後の子ノードを取得します。


(さらに、 var b = a.childNodes; も配列を取得します。たとえば、最初のノードを使用する場合は、childNodes[1] になります。 on)

DOM の取得はここで終わりです。次の章では、DOM 要素の操作方法を説明します。
関連ラベル：
dom
ソース：php.cn
前の記事：カスタム コンソール クラスを共有すると、JS_javascript スキルのデバッグ コードの互換性を心配する必要がなくなります。 次の記事：ブラウザが js_javascript スキルによって生成された HTML を解析する際のスタイルの問題の解決策
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React では、localstorage.getItem は null を返します Index.js：importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';i...
から 2024-04-05 14:18:19
0
1
1523
テーブルではなく DOM を通じてデータをレンダリングする方法 作成中のアプリケーションについて質問があります。Oracle データベースを使用しており、データベースから情報を取得し、テーブルを介して画面に表示していますが、データを個別に処理し...
から 2024-04-04 18:17:27
0
1
3567
ルーティングパスがreact.jsコンポーネントをレンダリングしない Framer-motionを使用していくつかのアニメーションパスルートを作成しようとしていますが、コンポーネントが表示されず、どうやらHome、Contact、aboutのルートが...
から 2024-04-04 10:37:17
0
1
429
要素間のスペース不足による動的追加の問題 マークアップには次のテンプレートがあります。 <templateid="unsequenced-template"><buttontype=&...
から 2024-04-02 16:51:12
0
1
315
authts/react-oidc-context ライブラリと keycloak 認証サーバーを使用してログアウトする方法 これは、ライブラリ バージョン「oidc-client-ts」:"^2.2.4","re​​act- oidc-context":"...
から 2024-03-31 19:13:55
0
1
544
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート