Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Mengubah suai DOM Halaman Web

Manipulasikan Model Objek Dokumen (DOM) halaman web dengan menambah, membuang atau mengubah elemen serta atributnya.

Pelajaran 2 daripada 411 langkah

Mengubah suai DOM Halaman Web ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Pengenalan kepada Pengubahsuaian DOM

Selamat datang ke pelajaran tentang mengubah suai kandungan halaman web! Pelajaran ini mengajar anda cara mengubah perkara yang dilihat pengguna di sesebuah laman web menggunakan sambungan anda.

Kita akan mendalami Document Object Model (DOM), iaitu struktur seperti pepohon yang mewakili semua elemen pada halaman web. Skrip kandungan sambungan anda boleh berinteraksi dengan pepohon ini.

Mencari Elemen pada Halaman

Sebelum anda boleh mengubah elemen, anda perlu mencarinya! JavaScript menyediakan beberapa cara untuk memilih elemen daripada DOM.

document.querySelector(): Mencari elemen pertama yang sepadan dengan pemilih CSS.
document.querySelectorAll(): Mencari semua elemen yang sepadan dengan pemilih CSS.
document.getElementById(): Mencari elemen berdasarkan ID uniknya.

Inilah alat utama anda untuk menyasarkan bahagian tertentu pada halaman web.

Mengakses Elemen: Demo

Mari lihat cara mendapatkan sesuatu elemen. Bayangkan halaman web mempunyai perenggan dengan ID 'myParagraph' dan beberapa perenggan lain.

Cuba jalankan kod ini:

// This code would run in your content script.
// It assumes a page with a <p id="myParagraph"> and other <p> tags.

const specificParagraph = document.getElementById('myParagraph');
const allParagraphs = document.querySelectorAll('p');

if (specificParagraph) {
  console.log('Found specific paragraph:', specificParagraph.textContent);
}

console.log('Total paragraphs on page:', allParagraphs.length);

// For demonstration, we'll change a dummy element if it exists.
// In a real scenario, this would modify the live page.
const dummyDiv = document.createElement('div');
dummyDiv.id = 'coddykit-output';
document.body.append(dummyDiv);

if (specificParagraph) {
  dummyDiv.textContent = `Found by ID: ${specificParagraph.textContent}. Total Ps: ${allParagraphs.length}`;
} else {
  dummyDiv.textContent = `No #myParagraph found. Total Ps: ${allParagraphs.length}`;
}

Mengemas Kini Kandungan Teks

Setelah anda mempunyai sesuatu elemen, menukar teksnya adalah mudah. Anda boleh menggunakan sifat textContent.

textContent menetapkan atau mengembalikan kandungan teks nod yang ditentukan serta semua turunannya. Sifat ini biasanya lebih diutamakan berbanding innerText dari segi prestasi dan keselamatan.

Menukar Teks: Demo

Mari kemas kini teks tajuk pertama pada halaman. Ini ialah tugas biasa untuk sambungan yang mahu menambah maklumat atau amaran.

Pada pendapat anda, apakah kesan kod ini terhadap tajuk utama halaman?

// This code would run in your content script.
// It assumes the page has at least one <h1> element.

const mainHeading = document.querySelector('h1');

if (mainHeading) {
  mainHeading.textContent = '🥳 This Heading Was Modified by CoddyKit!';
  mainHeading.style.color = 'blue'; // Add some style for visibility
} else {
  // If no h1, create one to show the effect
  const newHeading = document.createElement('h1');
  newHeading.textContent = '🥳 New Heading from CoddyKit!';
  newHeading.style.color = 'blue';
  document.body.prepend(newHeading);
}

Mengubah Atribut Elemen

Elemen selalunya mempunyai atribut seperti src untuk imej, href untuk pautan atau class untuk penggayaan. Anda juga boleh mengubah atribut ini!

element.setAttribute(name, value): Menambah atau mengemas kini atribut.
element.removeAttribute(name): Membuang atribut.
element.classList.add(className): Menambah kelas CSS.
element.classList.remove(className): Membuang kelas CSS.

Demo Atribut dan Kelas

Mari tukar sumber imej dan tambahkan kelas pada perenggan. Bayangkan anda mahu menggantikan imej ruang letak atau menyerlahkan teks tertentu.

Cuba jalankan contoh ini:

// This code would run in your content script.
// It assumes a page has an <img> and a <p> element.

const firstImage = document.querySelector('img');
const firstParagraph = document.querySelector('p');

if (firstImage) {
  firstImage.setAttribute('src', 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  firstImage.setAttribute('alt', 'CoddyKit Replaced Image');
  firstImage.style.border = '2px solid green'; // Make changes visible
}

if (firstParagraph) {
  firstParagraph.classList.add('coddykit-highlight');
  // Add some inline style for the added class for visibility
  firstParagraph.style.backgroundColor = '#ffff0050'; // Light yellow tint
  firstParagraph.style.padding = '5px';
  firstParagraph.textContent += ' (Highlighted by CoddyKit!)';
} else {
  const newP = document.createElement('p');
  newP.textContent = 'This is a new paragraph with a highlight!';
  newP.classList.add('coddykit-highlight');
  newP.style.backgroundColor = '#ffff0050';
  newP.style.padding = '5px';
  document.body.append(newP);
}

Mencipta dan Menambah Elemen Baharu

Sambungan juga boleh menyuntik kandungan yang baharu sepenuhnya ke dalam halaman! Dengan cara ini, anda boleh menambah butang tersuai, bar sisi atau pemberitahuan.

document.createElement(tagName): Mencipta nod elemen baharu.
parentNode.appendChild(childNode): Menambah nod sebagai anak terakhir induk.
parentNode.prepend(childNode): Menambah nod sebagai anak pertama induk.
parentNode.insertBefore(newNode, referenceNode): Menyisipkan nod sebelum nod rujukan.

Menyuntik Elemen: Demo

Mari cipta elemen div baharu dan tambahkan elemen itu ke bahagian paling atas body halaman web.

Ini menunjukkan cara sambungan boleh mengintegrasikan elemen UI baharu dengan lancar.

// This code would run in your content script.

const newDiv = document.createElement('div');
newDiv.textContent = '👋 Hello from your CoddyKit Extension!';
newDiv.style.backgroundColor = '#ADD8E6'; // Light blue background
newDiv.style.padding = '10px';
newDiv.style.textAlign = 'center';
newDiv.style.borderBottom = '1px solid #87CEEB';
newDiv.style.position = 'sticky';
newDiv.style.top = '0';
newDiv.style.width = '100%';
newDiv.style.zIndex = '9999';

document.body.prepend(newDiv); // Add to the top of the body

// You can also remove elements:
// const elementToRemove = document.querySelector('.some-ad-class');
// if (elementToRemove) {
//   elementToRemove.remove();
// }

Semakan Pantas: Tindakan DOM

Antara kaedah JavaScript berikut, yang manakah boleh digunakan untuk menambah, mengalih keluar atau mengubah suai elemen pada halaman web?

Jawab dalam pelajaran interaktif

Ulang Kaji: Mengubah Suai Halaman Web

Tahniah! Anda telah mempelajari teknik asas untuk berinteraksi dengan dan mengubah suai struktur serta kandungan halaman web menggunakan skrip kandungan.

Anda boleh mencari elemen menggunakan querySelector, querySelectorAll dan getElementById.
Anda boleh mengubah teks dengan textContent.
Anda boleh mengubah atribut dan kelas dengan setAttribute, removeAttribute, classList.add dan classList.remove.
Anda boleh mencipta dan menyuntik elemen baharu menggunakan createElement serta kaedah seperti appendChild atau prepend.
Anda boleh mengalih keluar elemen dengan element.remove().

Alat yang hebat ini membolehkan sambungan anda menyesuaikan pengalaman penyemakan imbas pengguna dengan sepenuhnya. Seterusnya, kita akan meneroka cara berinteraksi dengan data pada halaman ini!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengubah suai DOM Halaman Web” percuma?

Ya — teks penuh “Mengubah suai DOM Halaman Web” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengubah suai DOM Halaman Web”?

Manipulasikan Model Objek Dokumen (DOM) halaman web dengan menambah, membuang atau mengubah elemen serta atributnya. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Mengubah suai DOM Halaman Web” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)