検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptでHTMLファイルのノードを取得する方法

JavaScriptでHTMLファイルのノードを取得する方法

青灯夜游
青灯夜游オリジナル
2022-01-23 18:36:012139ブラウズ

方法: 1. 「document.getElementById("id 属性値")」ステートメントを使用します。 2. 「document.getElementsByTagName("タグ名")」ステートメントを使用します。 3. 「document.getElementsByTagName("タグ名")」ステートメントを使用します。 documentElement」ステートメント。

JavaScriptでHTMLファイルのノードを取得する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. ドキュメント ノードから取得 (直接取得)

ケース: 

<body>
    <ul >
        <li id="one">一个</li>
        <li name="name1" >二个</li>
        <li class="classname">三个</li>
        <li>四个</li>
    </ul>
</body>

1.1 ID 経由

構文: document.getElementById("id 属性値")

機能: ID 値に基づいて要素を取得し、要素オブジェクトを返します (ID は一意です)
例: 

  var one=document.getElementById("one");
    console.log(one);

JavaScriptでHTMLファイルのノードを取得する方法

1.2 タグ名別

構文: document.getElementsByTagName("タグ名")

機能: タグ名 要素を取得し、複数の DOM オブジェクトを格納する疑似配列を返します;

例: 

 var li=document.getElementsByTagName("li")
    console.log(li);

JavaScriptでHTMLファイルのノードを取得する方法

#1.3 名前 値による

構文: document.getElementsByName("name 属性の値")

機能: name 属性の値に基づいて要素を取得し、擬似オブジェクトを返します。複数の DOM オブジェクトを格納する配列
例: 

var name1=document.getElementsByName("name1")[0];
    console.log(name1);

JavaScriptでHTMLファイルのノードを取得する方法

#1.4 クラス経由

構文:

document.getElementsByClassName( "クラス スタイルの名前")

特徴: クラス スタイルの名前に基づいて要素を取得し、複数の DOM オブジェクトを格納する擬似配列を返します

例: 

 var classname=document.getElementsByClassName("classname")[0];
    console.log(classname);//

JavaScriptでHTMLファイルのノードを取得する方法

1.5 セレクター経由

構文:

document.querySelector("セレクターの名前 ")

機能: セレクターに基づいて要素を取得し、要素オブジェクトを返します。

例: 

 var que1=document.querySelector("#one");
    console.log(que1); //

JavaScriptでHTMLファイルのノードを取得する方法

# #1.6 すべてのセレクターを渡す

構文:

document.querySelectorAll("セレクターの名前")

特徴: セレクターに従って要素を取得し、複数の DOM オブジェクトを格納する疑似配列を返します。

例: 

var queall=document.querySelectorAll("li");
    console.log(queall); //

JavaScriptでHTMLファイルのノードを取得する方法

1.7 特別な要素の取得

構文:

doucumnet.body

機能: body 要素オブジェクトを返します

例: 

  var body=document.body ;
    console.log(body);

JavaScriptでHTMLファイルのノードを取得する方法

1.8 HTML 要素を取得します

構文:

document。 documentElement

機能: html 要素オブジェクト

例: 

var dc=document.documentElement  ;
    console.log(dc);

JavaScriptでHTMLファイルのノードを取得する方法2. 親ノードを通じて

を取得 (通常、親ノードが取得された後、子バイトは親ノードを通じて取得されます) 

<body>
    <div id="digbox">
        <!-- 第一个 -->
        <div id="box1">
            <ul class="ul">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
            </ul>
        </div>
        <!-- 第二个 -->
        <div id="box2">
            <a href="#">这是第二个div</a>
        </div>

        <!-- 第三个 -->
        <div id="box3">
            <a href="#">这是第三个div</a>
        </div>
    </div>
</body>

2.1 最初のノードの取得

構文: 

document.getElementById("test").firstElementChild;
document.getElementById("test").firstChild;

機能: 最初のノードを取得します

例: 

var box=document.getElementById("digbox").firstElementChild;
    console.log(box);
     
    var box1=document.getElementById("digbox").firstChild;
    console.log(box1);

JavaScriptでHTMLファイルのノードを取得する方法

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

構文: 

document.getElementById("test").lastElementChild;；
document.getElementById("test").lastChild;

機能: 最後の子ノードを取得します

#例: 

 var box2= document.getElementById("digbox").lastElementChild;
    console.log(box2);

    var box3= document.getElementById("digbox").lastChild;
    console.log(box3);

##2.3 すべての子ノードを取得

JavaScriptでHTMLファイルのノードを取得する方法

構文: 

document.getElementById("test").children[0];
document.getElementById("test").childNodes;
document.getElementById("test").childElementCount;
機能: すべての子ノードを取得#例: 

 var box4= document.getElementById("digbox").children[0];
    console.log(box4);

    var box5= document.getElementById("digbox").childNodes;
    console.log(box5);

    var box6= document.getElementById("digbox").childElementCount;
    console.log(box6);

##2.4 直接の子ノードを取得ノード

JavaScriptでHTMLファイルのノードを取得する方法構文:

document.getElementById("id")

機能: 直接の子ノードを取得する

例: <pre class="brush:js;toolbar:false;"> var box7= document.getElementById(&quot;digbox&quot;); console.log(box7);</pre>

2.5 対応する属性を持つノードを取得します

JavaScriptでHTMLファイルのノードを取得する方法構文:

document.getElementById("id").getElementsByClassName(" ul");

機能: 対応する属性 (ID、クラス、属性、ラベルの可能性があります) のノードを取得するために一般的に使用されます。

例: <pre class="brush:js;toolbar:false;"> var box8= document.getElementById(&quot;digbox&quot;).getElementsByClassName(&quot;ul&quot;); console.log(box8);</pre><p><img src="https://img.php.cn/upload/article/000/000/024/e46d8a0d19bfdc1dae9d4db483c5a21b-12.png" alt="JavaScriptでHTMLファイルのノードを取得する方法"></p> <h2>3. 通过兄弟节点获取</h2><pre class="brush:html;toolbar:false;">&lt;body&gt; &lt;div id=&quot;box&quot;&gt; &lt;p&gt;这是第一个标签&lt;/p&gt; &lt;p id=&quot;box2&quot;&gt;这是第二个标签&lt;/p&gt; &lt;div &gt;&lt;a href=&quot;&quot;&gt;这是第三个标签&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</pre><p><strong>3.1 获取当前节点的前一个节点</strong></p> <p>语法：</p><pre class="brush:js;toolbar:false">document.getElementById(&quot;id&quot;).previousElementSibling； document.getElementById(&quot;id&quot;).previousSibling</pre><p>特点： 返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。</p> <p>示例：</p><pre class="brush:js;toolbar:false;">var box1=document.getElementById(&quot;box2&quot;).previousElementSibling; console.log(box1); var box2=document.getElementById(&quot;box2&quot;).previousSibling; console.log(box2);</pre><p><img src="https://img.php.cn/upload/article/000/000/024/e46d8a0d19bfdc1dae9d4db483c5a21b-13.png" alt="JavaScriptでHTMLファイルのノードを取得する方法"></p> <p><strong>3.2 获取当前节点的后一个节点</strong></p> <p>语法：</p><pre class="brush:js;toolbar:false">document.getElementById(&quot;id&quot;).nextSibling document.getElementById(&quot;id&quot;).nextElementSibling；</pre><p>特点： 返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。</p> <p>示例：</p><pre class="brush:js;toolbar:false;"> var box3=document.getElementById(&quot;box2&quot;).nextElementSibling; console.log(box3); var box4=document.getElementById(&quot;box2&quot;).nextSibling; console.log(box4);</pre><p><img src="https://img.php.cn/upload/article/000/000/024/b71dd0ce5365c1fc2f52e9edbaf0f876-14.png" alt="JavaScriptでHTMLファイルのノードを取得する方法"></p> <h2>4. 通过子级节点获取</h2> <p><strong>4.1 通过子节点获取父级节点</strong></p><pre class="brush:js;toolbar:false;">&lt;body&gt; &lt;div id=&quot;box&quot;&gt; &lt;p id=&quot;box2&quot;&gt;这是第二个标签&lt;/p&gt; &lt;/div&gt; &lt;/body&gt;</pre><p>语法：<code>document.getElementById("id").parentNode

特点： 返回指定节点的父节点,如果指定节点没有父节点，则返回 null。

示例：

  var box=document.getElementById("box2").parentNode;
  console.log(box);

JavaScriptでHTMLファイルのノードを取得する方法

【相关推荐：javascript学习教程】

以上がJavaScriptでHTMLファイルのノードを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html NULL class 对象 dom 选择器 ul
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptを使って色を変える方法次の記事：JavaScriptを使って色を変える方法

関連記事

続きを見る