Pengenalan kepada JavaScript DOM

Apakah itu Dom?

Model Objek Dokumen (DOM) ialah antara muka pengaturcaraan standard yang disyorkan oleh organisasi W3C untuk memproses bahasa penanda yang boleh diperluaskan. Sejarah Model Objek Dokumen boleh dikesan kembali kepada "perang pelayar" antara Microsoft dan Netscape pada akhir 1990-an Untuk bersaing untuk hidup dan mati dalam JavaScript dan JScript, kedua-dua pihak memberikan pelayar fungsi yang berkuasa secara besar-besaran. Microsoft telah menambahkan banyak perkara proprietari pada teknologi web, termasuk VBScript, ActiveX, dan format DHTML milik Microsoft sendiri, yang menyebabkan banyak halaman web tidak dapat dipaparkan dengan betul menggunakan platform dan penyemak imbas bukan Microsoft. DOM ialah karya agung yang dibancuh pada masa itu.

DOM (Document Object Model) ialah antara muka pengaturcaraan aplikasi (API) HTML dan XML. DOM akan merancang keseluruhan halaman menjadi dokumen yang terdiri daripada tahap nod.

Model Objek Dokumen sebenarnya merupakan perwakilan dalaman pelbagai elemen dalam HTML halaman web, seperti pengepala, perenggan, senarai, gaya, ID, dsb. dalam HTML melalui DOM Jom lawati.

JavaScript akhirnya perlu mengendalikan halaman Html, menukar Html menjadi DHtml dan mengendalikan halaman Html memerlukan penggunaan DOM. DOM mensimulasikan halaman Html menjadi objek Jika JavaScript hanya melakukan beberapa pengiraan, gelung dan operasi lain, tetapi tidak boleh mengendalikan Html, ia akan kehilangan makna kewujudannya.

DOM ialah model halaman Html Setiap teg dianggap sebagai objek JavaScript boleh mengawal kotak teks, lapisan dan elemen lain dalam halaman web dengan memanggil sifat dan kaedah dalam DOM. Contohnya, dengan memanipulasi objek DOM kotak teks, anda boleh membaca dan menetapkan nilai dalam kotak teks.

JavaScript boleh menukar semua elemen HTML dalam halaman

JavaScript boleh menukar semua atribut HTML dalam halaman

JavaScript boleh menukar semua gaya CSS dalam halaman

JavaScript mampu bertindak balas terhadap semua acara dalam halaman

Cari elemen HTML

Biasanya, dengan JavaScript, anda perlu memanipulasi elemen HTML.

Untuk melakukan ini, anda mesti mencari elemen terlebih dahulu. Terdapat tiga cara untuk melakukan ini:

Cari elemen HTML mengikut id

Cari elemen HTML mengikut nama teg

Cari elemen HTML mengikut nama kelas

Cara paling mudah untuk mencari elemen HTML dalam DOM ialah dengan menggunakan id elemen.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
 <script>
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //弹出    我是第一个P
        }
  </script>
</body>
</html>

Cari elemen HTML

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    <script>
        window.onload = function () {
            var str = document.getElementsByTagName("p")[1].innerHTML;
            alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始
        }   
      </script>
</body>
</html>

Cari elemen HTML

mengikut nama kelas

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
<body>
    <div id="div1">
        <p id="p1" class="class1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    <script>
        window.onload = function () {
            var node = document.getElementsByClassName("class1")[0];
            alert(node.innerHTML);
        }
      </script>
</body>
</html>

bahagian seterusnya

fail baharu

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<head>
 <style type="text/css">
 body {background-color:#eeeeee}
 </style>
</head>

<body>
 <h3>通过 id 查找 HTML 元素</h3>
 <p id = "hw">Hello world!</p>
 <script>
 x = document.getElementById("hw");
 document.write('<p>id="hw"的段落的文本是：'+x.innerHTML+'</p>');
 </script>

 <button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button>
 <script>
 function setCurrentTime(){
 x = document.getElementById("hw");
 x.innerHTML = Date()
 }

 </script>

 <h3>通过 标签名 查找 HTML 元素</h3>
 <div id = "mainDiv">
 <p>This is a paragragph.</p>
 <p>This is another paragragph.</p>
 <p>Yes you're right! This is also paragragph.</p>
 </div>

 <script>
 xx = document.getElementById("mainDiv");
 tagContents = xx.getElementsByTagName("p");
 document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>");
 for(i=0;;i++){
 var tag = tagContents[i]
 if(tag!=null){
 document.write("<p>"+tag.innerHTML+"</p>")
 }else{
 document.write("<p>共有"+i+"条内容</p>")
 break;
 }
 }
 </script>

 <h3>修改 CSS 样式</h3>
 <p>
 <span id = "para_1">This is a test paragraph.</span>
 <button onclick="changeTextColor()">改变文字颜色</button>
 </p>
 <p>
 <span id = "para_2">This is another paragraph.
 <button onclick="changeTextFont()">改变字体</button>
 </p>
 <p>
 <span id = "para_3">This is HELLO WORLD.</span>
 <button onclick="changeTextSize()">改变字号</button>
 </p>
 <p>
 <button onclick="changeVisibility()">显示/隐藏</button>
 <span id = "para_4">示例文字</span>
 </p>

 <script>
 function changeTextColor(){
 ele_1 = document.getElementById("para_1");
 ele_1.style.color = "red";
 }

 function changeTextFont(){
 ele_2 = document.getElementById("para_2");
 ele_2.style.fontFamily = "Arial";
 }

 function changeTextSize(){
 ele_3 = document.getElementById("para_3");
 ele_3.style.fontSize = "larger";
 }

 document.getElementById("para_4").style.visibility = "visible"
 function changeVisibility(){
 ele_4 = document.getElementById("para_4");
 if(ele_4.style.visibility.match("visible")){
 ele_4.style.visibility = "hidden"
 }else{
 ele_4.style.visibility = "visible"
 }
 }
 </script>
</body>
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh