DOMオブジェクトの指定ノードにアクセスするメソッドのJS実装例_javascriptスキル

不言
リリース: 2018-04-04 17:19:19
オリジナル
1721 人が閲覧しました

この記事では、DOM オブジェクトの指定されたノードにアクセスするための JS のメソッドを主に紹介し、DOM 要素のノード属性に対する JavaScript の関連操作スキルをサンプルの形式で分析します。この記事では、DOM オブジェクトの指定されたノードにアクセスするための JS 実装について説明します。参考までに皆さんと共有してください。詳細は次のとおりです:

はじめにgetElementById() メソッドを使用して、指定された ID を持つノードにアクセスし、

nodeName

属性、getElementById()方法来访问指定id的节点,并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点名称、节点类型和节点值。

1、nodeName属性

该属性用来获取某一个节点的名称。

[sName=]obj.nodeName

sName:字符串变量用来存储节点的名称。

2、nodeType属性

该属性用来获取某一个节点的类型。

[sType=]obj.nodeTypenodeType

属性、および

nodeValue 属性を使用して、ノード名、ノード タイプ、およびノー​​ド値を表示します。

1.


nodeName

🎜属性🎜🎜 この属性は、ノードの名前を取得するために使用されます。 🎜🎜[sName=]obj.nodeName🎜🎜🎜sName🎜: ノードの名前を保存するために使用される文字列変数。 🎜🎜2. 🎜🎜nodeType🎜🎜Attribute🎜🎜 この属性は、ノードのタイプを取得するために使用されます。 🎜🎜[sType=]obj.nodeType🎜🎜🎜sType🎜: ノードのタイプを格納するために使用される文字列変数。このタイプの値は数値です。このパラメータのタイプを次の表に示します。 🎜🎜🎜🎜
タイプ 数値 ノード名 説明
要素 1 タグ 任意の HTML または XML タグ
属性 2 属性 タグ内の属性
text (テキスト) 3 #text にはタグ内のテキストが含まれます
Comment(コメント) 8 #comment HTMLコメント
Document(ドキュメント) 9 #document Documentオブジェクト
ドキュメントタイプ(documentType) 10 DOCTYPE DTD仕様

3、nodeValue属性

この属性はノードの値を返します。

[txt=]obj.nodeValue

txt: 文字列変数はノード値を格納するために使用されます。テキストノードタイプを除き、他のタイプのノード値は「null」です。

2

を使用して、指定したノードにアクセスします。この例では、指定したノードの名前、ノードのタイプ、およびノー​​ドの値が、ページ上にポップアップ表示されるプロンプト ボックスに表示されます。 。

3つのコード

<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 访问指定节点</title>
</head>
<body id="b1">
<h3 >三号标题</h3>
<b>加粗内容</b>
<script language="javascript">
 <!--
 var by=document.getElementById("b1");
 var str;
 str="节点名称:"+by.nodeName+"\n";
 str+="节点类型:"+by.nodeType+"\n";
 str+="节点值:"+by.nodeValue+"\n";
 alert(str);
 -->
</script>
</body>
</html>
ログイン後にコピー

を4つ実行すると、次のプロンプトボックスが表示されます

関連する推奨事項:

DOM の操作jsメソッドの要素

jsでのDOMイベントバインディングの詳しい説明

Dom属性の使い方

以上がDOMオブジェクトの指定ノードにアクセスするメソッドのJS実装例_javascriptスキルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!