1.getElementsbyName (): Dapatkan nama.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `
contoh:
<p name = "pn"> halo </p> <p name = "pn"> halo </p> <p name = "pn"> halo </p> <script> function getName () {var count = document.geteLementsbyname ("pn"); waspada (count.length); var p = count [2]; p.innerhtml = "dunia"; } </script>Hasil: Antarmuka mencetak tiga neraka, disertai dengan kotak prompt "3". Saat mengklik ok, konten yang ditampilkan pada antarmuka menjadi halo halo dunia
~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~
2.getElementsbyTagname (): Dapatkan elemen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<p> Halo </p> <p> Halo </p> <p> Halo </p> <script> function getName () {var count = document.geteLementsByTagname ("p"); waspada (count.length); var p = count [2]; p.innerhtml = "dunia"; } </script>Hasil: Antarmuka mencetak tiga neraka, disertai dengan kotak prompt "3". Saat mengklik ok, konten yang ditampilkan pada antarmuka menjadi halo halo dunia
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.getAttribute (): Dapatkan atribut elemen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<a id = "aid"> </a> <script> function getAttr1 () {var anode = document.getElementById ("aid"); var attr = anode.getAttribute ("id"); alert ("ID A adalah:"+attr); } function getAttr2 () {var anode = document.geteLementById ("aid"); var attr = anode.getAttribute ("title"); alert ("Konten judul A adalah:"+attr); } getAttr1 (); getAttr2 (); </script>Hasil: Kotak Prompt "ID A adalah: AID". Setelah mengklik OK, Kotak Prompt "Konten Judul A adalah: Dapatkan Atribut Tag A".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.setAttribute () Mengatur atribut elemen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<a id = "aid2"> Aid2 </a> <script> function setAttr () {var anode = document.getElementById ("AID2"); anode.setAttribute ("title", "pengaturan dinamis atribut judul"); var attr = anode.getAttribute ("title"); alert ("Pengaturan dinamis nilai judul adalah:"+attr); } setAttr (); </script>Hasil: Kotak prompt "Nilai judul pengaturan dinamis adalah: secara dinamis mengatur properti judul" pop-up.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.Childnodes (): Akses node anak.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <script> function getChildNode () {var childnode = document.geteLementsbyTagname ("ul") [0] .childnodes; peringatan (childnode.length); waspada (childnode [0] .nodetype); } getChildNode (); </script>Hasil: Antarmuka mencetak kotak dialog "3" muncul di .1.2.3, dan kemudian tekan OK untuk muncul.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.parentnode (): Akses node induk.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<dv> <p id = "pid"> </p> </div> <script> function getParentNode () {var div = document.getElementById ("pid"); alert (div.parentnode.nodename); } getParentNode (); </script>Hasil: Kotak cepat muncul: Div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.Createelement (): Buat Node Elemen.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh:
<script> function createNode () {var body = document.body; var input = document.createElement ("input"); input.type = "tombol"; input.value = "tombol"; body.appendChild (input); // masukkan node} createNode (); </script>Hasil: Tombol muncul.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.CreateTextNode (): Buat Node Teks.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh:
<script> function createNode () {var element = document.createElement ("div"); element.classname = "pesan"; var textNode = document.createTextNode ("Hello World!"); element.AppendChild (TextNode); document.body.appendChild (elemen); } createNode (); </script>Analisis Kode: Contoh ini membuat elemen <div> baru dan menentukan atribut kelas dengan nilai "pesan". Kemudian, simpul teks lain dibuat dan ditambahkan ke elemen yang dibuat sebelumnya. Langkah terakhir adalah menambahkan elemen ini ke elemen <body> dalam dokumen, sehingga Anda dapat melihat elemen dan node teks yang baru dibuat di browser.
Hasil: Halaman menunjukkan Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.InSertBefore (): Masukkan simpul.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<Div id = "Div"> <p id = "pid"> p elemen </p> </div> <script> function addnode () {var div = document.getElementById ("div"); var node = document.getElementById ("pid"); var newNode = document.createElement ("p"); newnode.innerHtml = "penyisipan dinamis elemen p"; div.insertbefore (newnode, node); } addNode (); </script>Hasil: Antarmuka dicetak: Masukkan elemen P secara dinamis
elemen p
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.removechild (): Hapus node.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh
<div id = "Div"> <p id = "pid"> p elemen </p> </div> <script> function removenode () {var div = document.getElementById ("div"); var p = div.removechild (div.childnodes [1]); } removenode (); </script>Hasil: Antarmuka tidak menunjukkan apa -apa.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.OffsetHeight: Ukuran halaman web
12.ScrollHeight: Ukuran halaman web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
contoh:
<script> function getSize () {var width = document.documentelement.offsetWidth || document.body.offsetWidth; // menyelesaikan masalah kompatibilitas var height = document.documentelement.offsetheight || document.body.offsetheight; peringatan (lebar+","+tinggi); } getSize (); </script>Menunjukkan hasil:
Artikel ini terutama memperkenalkan JS DOM untuk mengontrol elemen HTML. Konten artikel terutama termasuk DOM, HTML, dll. Artikel berasal dari Internet, silakan merujuknya.