Articles
แนะนำ JavaScript
JavaScript และ HTML

JavaScript และ HTML

บทความนี้อธิบายเกี่ยวกับ JavaScript และ HTML

YouTube Video

ออบเจ็กต์ window ใน JavaScript

ออบเจ็กต์ window ใน JavaScript เป็นออบเจ็กต์ระดับโกลบอลในสภาพแวดล้อมของเบราว์เซอร์ โดยมีฟังก์ชันและข้อมูลที่เกี่ยวข้องกับหน้าเว็บและหน้าต่างเบราว์เซอร์ เนื่องจาก window เป็นขอบเขตระดับโกลบอลของเบราว์เซอร์ โค้ด JavaScript ทั้งหมดที่ทำงานในเบราว์เซอร์จะกลายเป็นส่วนหนึ่งของออบเจ็กต์ window ออบเจ็กต์ window มีบทบาทสำคัญในการทำงานของ JavaScript ในสภาพแวดล้อมเบราว์เซอร์ โดยมี API และคุณสมบัติมากมาย

คุณสมบัติสำคัญของออบเจ็กต์ window

คุณสมบัติ 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: เข้าถึงเอกสาร HTML ปัจจุบัน
  • window.location: จัดการ URL ปัจจุบันและการนำทางในเบราว์เซอร์
  • window.history: เข้าถึงข้อมูลประวัติการใช้งานของเบราว์เซอร์และอนุญาตการนำทางไปข้างหน้าหรือถอยหลัง
  • window.navigator: ให้ข้อมูลเกี่ยวกับเบราว์เซอร์และอุปกรณ์
  • window.innerWidth / window.innerHeight: ดึงค่าความกว้างและความสูงของพื้นที่มุมมอง

เมธอด 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): แสดงกล่องข้อความเตือน
  • window.confirm(): แสดงกล่องข้อความเพื่อขอการยืนยันจากผู้ใช้และคืนค่าผลลัพธ์เป็น OK หรือ Cancel
  • window.prompt(): แสดงกล่องข้อความเพื่อขอข้อมูลจากผู้ใช้และดึงค่าที่ป้อน
  • window.open(): เปิดหน้าต่างใหม่หรือแท็บใหม่
  • window.setTimeout() / window.setInterval(): ตั้งเวลาเพื่อเรียกใช้ฟังก์ชันหลังจากเวลาที่กำหนดหรือเป็นช่วงเวลาที่กำหนด

การจัดการเหตุการณ์ 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: เหตุการณ์ที่ทำงานเมื่อหน้าเว็บโหลดเสร็จสมบูรณ์
  • window.onresize: เหตุการณ์ที่ทำงานเมื่อขนาดหน้าต่างเปลี่ยนไป
  • window.onscroll: เหตุการณ์ที่ทำงานเมื่อผู้ใช้เลื่อนหน้าเว็บ

บทบาทในฐานะตัวแปรระดับโลก 

1var myVar = 10;
2console.log(window.myVar); // 10
  • ออบเจ็กต์ window เก็บตัวแปรและฟังก์ชันระดับโลก กล่าวอีกนัยหนึ่ง ตัวแปรและฟังก์ชันที่ประกาศไว้จะกลายเป็นพร็อพเพอร์ตี้ของ window โดยอัตโนมัติ

การจัดการ DOM ใน JavaScript

การจัดการ DOM (Document Object Model) ใน JavaScript ถูกใช้เพื่อโต้ตอบกับองค์ประกอบในหน้าเว็บในลักษณะแบบไดนามิก DOM แสดงโครงสร้างของเอกสาร HTML ในรูปแบบต้นไม้ ซึ่งสามารถปรับเปลี่ยนได้โดยใช้ JavaScript เพื่อแก้ไขโครงสร้างและควบคุมการแสดงผลของหน้า

พื้นฐานของ DOM

DOM มอง HTML ของหน้าเว็บเป็นออบเจ็กต์ ทำให้สามารถเข้าถึงและแก้ไของค์ประกอบและแอตทริบิวต์ได้ ใช้ออบเจ็กต์ document เพื่อเข้าถึงเอกสาร HTML

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

การดึงองค์ประกอบ DOM

JavaScript มีหลายเมธอดในการเข้าถึงองค์ประกอบใน DOM

  • document.getElementById(): ดึงองค์ประกอบโดยใช้แอตทริบิวต์ id
  • document.getElementsByClassName(): ดึงองค์ประกอบโดยใช้ชื่อคลาส (HTMLCollection)
  • document.getElementsByTagName(): ดึงองค์ประกอบโดยใช้ชื่อแท็ก (HTMLCollection)
  • document.querySelector(): ดึงองค์ประกอบแรกที่ตรงกันโดยใช้ตัวเลือก CSS
  • document.querySelectorAll(): ดึงองค์ประกอบทั้งหมดที่ตรงกันโดยใช้ตัวเลือก CSS (NodeList)

ตัวอย่าง: getElementById และ querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

การจัดการ DOM

สามารถดำเนินการหลากหลายบนองค์ประกอบที่ดึงมาได้

การเปลี่ยนข้อความ

เพื่อเปลี่ยนข้อความขององค์ประกอบ ให้ใช้ textContent หรือ innerHTML

  • textContent: ดึงหรือเปลี่ยนเนื้อหาข้อความขององค์ประกอบ แท็ก HTML จะไม่ถูกตีความ
  • innerHTML: ดึงหรือเปลี่ยนเนื้อหา HTML ขององค์ประกอบ สตริงที่มีแท็ก HTML จะถูกประมวลผลด้วย
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

เปลี่ยนแปลงคุณสมบัติ

ใช้ setAttribute() และ getAttribute() เพื่อเปลี่ยนแปลงคุณสมบัติขององค์ประกอบ

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

เปลี่ยนแปลง CSS

ใช้คุณสมบัติ style เพื่อเปลี่ยนรูปแบบ CSS

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

การจัดการคลาส

ใช้ classList เพื่อเพิ่มหรือลบคลาสออกจากองค์ประกอบ

  • add(): เพิ่มคลาส
  • remove(): ลบคลาส
  • toggle(): เพิ่มหรือลบคลาสตามเงื่อนไขการมีอยู่
  • contains(): ตรวจสอบว่าคลาสมีอยู่หรือไม่
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

การสร้างและลบองค์ประกอบ DOM

การสร้างองค์ประกอบใหม่

ใช้ document.createElement() เพื่อสร้างองค์ประกอบใหม่และเพิ่มเข้าใน DOM

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

การลบองค์ประกอบ

ใช้วิธี remove() เพื่อลบองค์ประกอบ

1newDiv.remove();  // Remove the created element

การเพิ่มอีเวนต์

ในส่วนหนึ่งของการจัดการ DOM คุณสามารถเพิ่มตัวจัดการอีเวนต์เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้ ใช้ addEventListener() เพื่อจัดการอีเวนต์ เช่น การคลิกและการโต้ตอบผ่านคีย์บอร์ด

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

ในตัวอย่างนี้ การคลิกปุ่มจะเปลี่ยนข้อความขององค์ประกอบ #content

การนำทางผ่านต้นไม้ DOM

คุณสามารถนำทางผ่าน DOM เพื่อเข้าถึงองค์ประกอบพาเรนต์และพี่น้อง

  • parentNode: เข้าถึงโหนดพาเรนต์
  • childNodes: เข้าถึงโหนดย่อย (ทุกประเภท)
  • firstChild / lastChild: องค์ประกอบลูกตัวแรก/ตัวสุดท้าย
  • nextSibling / previousSibling: องค์ประกอบพี่น้องถัดไป/ก่อนหน้า
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

ตัวอย่าง: การเพิ่มรายการใหม่ในรายการ

นี่คือตัวอย่างของการเพิ่มรายการใหม่ในรายการ

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

ในโค้ดนี้ เมื่อคลิกปุ่ม "Add Item" จะเพิ่มองค์ประกอบ <li> ใหม่ลงในรายการ

สรุป

  • การจัดการ DOM ด้วย JavaScript ช่วยให้คุณสามารถดึง แก้ไข สร้าง และลบองค์ประกอบในเอกสาร HTML ได้
  • คุณสามารถดึงองค์ประกอบได้โดยใช้เมธอด เช่น getElementById() และ querySelector()
  • ใช้ textContent หรือ innerHTML เพื่อเปลี่ยนข้อความและ HTML และใช้ setAttribute() เพื่อจัดการแอตทริบิวต์
  • ใช้ createElement() เพื่อสร้างองค์ประกอบใหม่ และใช้ remove() เพื่อลบองค์ประกอบ
  • คุณสามารถสร้างเว็บเพจที่ตอบสนองต่อการกระทำของผู้ใช้ได้ผ่านการจัดการอีเวนต์

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

ฟังก์ชัน Generator ใน JavaScript