masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pengenalan kepada HTML DOM dan ciri baharu

Pengenalan

  • Dalam teras DOM, sifat dan kaedah yang disediakan sudah boleh mengendalikan halaman web. Mengapa kita memerlukan HTMLDOM?

  • Jika tahap nod dalam halaman web sangat dalam dalam DOM teras, ia akan menjadi sangat menyusahkan untuk mengakses nod ini.

  • Kemudian, HTMLDOM menyediakan kaedah untuk mencari nod terus melalui ID, bukannya bermula dari nod akar HTML.

Ciri baharu HTMLDOM

  • Setiap teg HTML sepadan dengan objek elemen. Contohnya: <img> sepadan dengan objek imej

  • Atribut setiap teg HTML sepadan dengan atribut objek elemen yang sepadan dalam surat-menyurat satu-dengan-satu. 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
        window.onload = function(){
            //获取网页中id=img01的图片对象
            var imgObj = document.getElementById("img1");
            //修改图片的属性的值，图片标记的属性，元素对象也能用。
            imgObj.src = "/upload/course/000/000/009/580af7f52278b486.jpg";
            imgObj.width = 400;
            imgObj.border = 2;
            imgObj.style = "cursor:pointer";
            imgObj.title = "唯美图片";
            //核心DOM中的属性方法，元素对象都能用
            imgObj.parentNode.bgColor = "#f0f0f0";
        }
        </script>
    </head>
    <body >
        <img id="img1" src="/upload/course/000/000/009/580ae23c4a88a881.jpg" />
    </body>
</html>
Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //获取网页中id=img01的图片对象 var imgObj = document.getElementById("img1"); //修改图片的属性的值，图片标记的属性，元素对象也能用。 imgObj.src = "/upload/course/000/000/009/580af7f52278b486.jpg"; imgObj.width = 400; imgObj.border = 2; imgObj.style = "cursor:pointer"; imgObj.title = "唯美图片"; //核心DOM中的属性方法，元素对象都能用 imgObj.parentNode.bgColor = "#f0f0f0"; } </script> </head> <body > <img id="img1" src="/upload/course/000/000/009/580ae23c4a88a881.jpg" /> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492830 permainan