Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk mendapatkan nod fail html dalam javascript

Bagaimana untuk mendapatkan nod fail html dalam javascript

青灯夜游
Lepaskan: 2022-01-23 18:36:01
asal
2084 orang telah melayarinya

Kaedah: 1. Gunakan pernyataan "document.getElementById("id attribute value"); 2. Gunakan pernyataan "document.getElementsByTagName("Tag name")" 3. Gunakan "document. documentElement" kenyataan .

Bagaimana untuk mendapatkan nod fail html dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

1. Dapatkan melalui nod dokumen (pemerolehan terus)

Kes:

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

1.1 Melalui ID

Sintaks: document.getElementById("id属性值")

Ciri: Dapatkan elemen berdasarkan nilai ID dan kembalikan objek elemen; (id adalah unik)
Contoh:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

1.2 Gunakan nama teg

Sintaks: document.getElementsByTagName("标签名字")

Ciri: Dapatkan elemen mengikut nama teg dan kembalikan tatasusunan pseudo, yang menyimpan berbilang objek DOM; 🎜>

Contoh:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

1.3 Mengikut nilai nama

Sintaks:

document.getElementsByName("name属性的值")

Ciri: Dapatkan elemen berdasarkan nilai atribut nama dan kembalikan tatasusunan pseudo yang menyimpan berbilang objek DOM

Contoh:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

1.4 Melalui kelas

Sintaks:

document.getElementsByClassName("类样式的名字")

Ciri: Dapatkan elemen berdasarkan nama gaya kelas dan kembalikan tatasusunan pseudo, yang mengandungi berbilang objek DOM

Contoh:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

1.5 Mengikut pemilih

Sintaks:

document.querySelector("选择器的名字")

Ciri: Dapatkan elemen berdasarkan pemilih dan kembalikan objek elemen;

Contoh:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

1.6 Lulus semua pilihan

Sintaks:

document.querySelectorAll("选择器的名字")

Ciri: Dapatkan elemen mengikut pemilih, dan kembalikan tatasusunan pseudo, yang menyimpan berbilang objek DOM;


1.7 Pemerolehan elemen khas
var queall=document.querySelectorAll("li");
    console.log(queall); //
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript Sintaks:

Ciri: Kembalikan objek Elemen badan Contoh:

doucumnet.body


1.8 Pemerolehan elemen HTML
  var body=document.body ;
    console.log(body);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript Sintaks:

Ciri: objek elemen html Contoh:

document.documentElement


2. Dapatkan

var dc=document.documentElement  ;
    console.log(dc);
Salin selepas log masuk
melalui nod induk (biasanya selepas nod induk diperolehi , dapatkan bait anak melalui nod induk)

Bagaimana untuk mendapatkan nod fail html dalam javascript

2.1 Dapatkan nod pertama

Sintaks:
<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>
Salin selepas log masuk

Ciri: Dapatkan nod pertama

Contoh:

document.getElementById("test").firstElementChild;
document.getElementById("test").firstChild;
Salin selepas log masuk

2.2 Dapatkan nod anak terakhir
var box=document.getElementById("digbox").firstElementChild;
    console.log(box);
     
    var box1=document.getElementById("digbox").firstChild;
    console.log(box1);
Salin selepas log masuk

Sintaks: Bagaimana untuk mendapatkan nod fail html dalam javascript

Ciri: Dapatkan anak terakhir nodContoh:

document.getElementById("test").lastElementChild;;
document.getElementById("test").lastChild;
Salin selepas log masuk

2.3 Dapatkan semua nod anak
 var box2= document.getElementById("digbox").lastElementChild;
    console.log(box2);

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

Bagaimana untuk mendapatkan nod fail html dalam javascript Sintaks:

Ciri: Dapatkan semua nod anak

Contoh:

document.getElementById("test").children[0];
document.getElementById("test").childNodes;
document.getElementById("test").childElementCount;
Salin selepas log masuk

2.4 Dapatkan nod anak langsung
 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);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript Sintaks:

Ciri: Dapatkan nod anak langsung

Contoh:

document.getElementById("id")

2.5 Dapatkan nod dengan atribut sepadan
  var box7= document.getElementById("digbox");
    console.log(box7);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascriptSintaks:

Ciri: Dapatkan nod dengan atribut sepadan (boleh ID , kelas, atribut, label) yang biasa digunakan ;

Contoh:

    var box8= document.getElementById("digbox").getElementsByClassName("ul");
    console.log(box8);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript

3. 通过兄弟节点获取

<body>
    <div id="box">
        <p>这是第一个标签</p>
        <p id="box2">这是第二个标签</p>
       <div ><a href="">这是第三个标签</a></div>
    </div>
</body>
Salin selepas log masuk

3.1 获取当前节点的前一个节点

语法:

document.getElementById("id").previousElementSibling;
document.getElementById("id").previousSibling
Salin selepas log masuk

特点: 返回指定节点的前一个节点,如果没有 previousSibling 节点,则返回值为 null。

示例:

var box1=document.getElementById("box2").previousElementSibling;
  console.log(box1);

  var box2=document.getElementById("box2").previousSibling;
  console.log(box2);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript

3.2 获取当前节点的后一个节点

语法:

document.getElementById("id").nextSibling
document.getElementById("id").nextElementSibling;
Salin selepas log masuk

特点: 返回指定节点之后紧跟的节点,如果没有 nextSibling 节点,则返回值为 null。

示例:

 var box3=document.getElementById("box2").nextElementSibling;
  console.log(box3);

  var box4=document.getElementById("box2").nextSibling;
  console.log(box4);
Salin selepas log masuk

Bagaimana untuk mendapatkan nod fail html dalam javascript

4. 通过子级节点获取

4.1 通过子节点获取父级节点

<body>
    <div id="box">
        <p id="box2">这是第二个标签</p>
    </div>
</body>
Salin selepas log masuk

语法:document.getElementById("id").parentNode

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

示例:

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

Bagaimana untuk mendapatkan nod fail html dalam javascript

【相关推荐:javascript学习教程

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nod fail html dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan