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

JavaScript และ HTML

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

YouTube Video

javascript-html-dom.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

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

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

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

คุณสมบัติ 

 1// Get and display the document's title
 2console.log(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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

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

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

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

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

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>
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"
3console.log(id);

เปลี่ยนแปลง 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: เข้าถึงโหนดลูก คุณสามารถเข้าถึงโหนด ทุกประเภท ไม่ใช่แค่โหนดองค์ประกอบอย่างแท็ก HTML แต่ยังรวมถึงโหนดข้อความและโหนดคอมเมนต์ด้วย
  • 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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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

สรุป

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

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

YouTube Video

ฟังก์ชัน Generator ใน JavaScriptShadow DOM ในภาษา JavaScript