JavaScriptでHTMLファイルのノードを取得する方法-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2022-01-23 18:36:01

オリジナル

2084 人が閲覧しました

方法: 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")

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

例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> var box7= document.getElementById("digbox"); console.log(box7);</pre><div class="contentsignin">ログイン後にコピー</div></div>

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

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

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

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

例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> var box8= document.getElementById("digbox").getElementsByClassName("ul"); console.log(box8);</pre><div class="contentsignin">ログイン後にコピー</div></div><p><img src="https://img.php.cn/upload/article/000/000/024/e46d8a0d19bfdc1dae9d4db483c5a21b-12.png" alt="JavaScriptでHTMLファイルのノードを取得する方法"/></p><h2>3. 通过兄弟节点获取</h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><body> <div id="box"> <p>这是第一个标签</p> <p id="box2">这是第二个标签</p> <div ><a href="">这是第三个标签</a></div> </div> </body></pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>3.1 获取当前节点的前一个节点</strong></p><p>语法：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">document.getElementById("id").previousElementSibling； document.getElementById("id").previousSibling</pre><div class="contentsignin">ログイン後にコピー</div></div><p>特点：返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。</p><p>示例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var box1=document.getElementById("box2").previousElementSibling; console.log(box1); var box2=document.getElementById("box2").previousSibling; console.log(box2);</pre><div class="contentsignin">ログイン後にコピー</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">document.getElementById("id").nextSibling document.getElementById("id").nextElementSibling；</pre><div class="contentsignin">ログイン後にコピー</div></div><p>特点：返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。</p><p>示例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> var box3=document.getElementById("box2").nextElementSibling; console.log(box3); var box4=document.getElementById("box2").nextSibling; console.log(box4);</pre><div class="contentsignin">ログイン後にコピー</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><body> <div id="box"> <p id="box2">这是第二个标签</p> </div> </body></pre><div class="contentsignin">ログイン後にコピー</div></div><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ファイルのノードを取得する方法

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

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

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