DOM คืออะไร Selenium WebDriver: โครงสร้าง แบบฟอร์มเต็ม

โดย: Krishna รุ่งทา Krishna รุ่งทา
Hours วันที่อัพเดท

DOM คืออะไร Selenium เว็บไดร์เวอร์?

DOM in Selenium WebDriver เป็นองค์ประกอบสำคัญของการพัฒนาเว็บโดยใช้ HTML5 และ Javaสคริปต์ เวอร์ชันเต็มของ DOM คือ Document Object Model DOM ไม่ใช่แนวคิดของวิทยาการคอมพิวเตอร์ แต่เป็นชุดอินเทอร์เฟซที่เรียบง่ายซึ่งได้มาตรฐานสำหรับนักพัฒนาเว็บเพื่อเข้าถึงและจัดการเอกสารในรูปแบบ HTML หรือ XML โดยใช้ Javaต้นฉบับ

มาตรฐานเหล่านี้ช่วยให้นักพัฒนาสามารถสร้างเว็บเพจได้โดยไม่ต้องกังวลเกี่ยวกับรายละเอียดการใช้งาน องค์กรบางแห่งที่เกี่ยวข้องกับการกำหนดมาตรฐานอินเทอร์เฟซเหล่านี้ เช่น Mozilla, Apple Microsoft, Google, Adobe ฯลฯ อย่างไรก็ตาม W3C เป็นผู้กำหนดมาตรฐานอย่างเป็นทางการและเผยแพร่ – ดูที่นี่ (https://dom.spec.whatwg.org/).

บทช่วยสอนนี้มุ่งเน้นที่จะครอบคลุมแนวคิดพื้นฐานของโครงสร้างเอกสาร HTML และวิธีการจัดการโดยใช้ Javaสคริปต์ เราจะครอบคลุมหัวข้อต่อไปนี้ในบทช่วยสอนนี้:

ทำความเข้าใจเกี่ยวกับโครงสร้าง DOM

คุณจะต้องเข้าใจโครงสร้าง DOM หากคุณกำลังสร้างเว็บไซต์ที่เกี่ยวข้องกับการใช้สคริปต์ Javaสคริปต์ การทำความเข้าใจ DOM มีความสำคัญยิ่งขึ้นหากคุณกำลังทำสิ่งที่ซับซ้อนอย่างใดอย่างหนึ่งหรือทั้งหมดต่อไปนี้บนเว็บไซต์ของคุณ

  1. การพัฒนาเนื้อหาที่อัปเดตตัวเองอย่างต่อเนื่องโดยไม่ต้องรีเฟรชทั้งหน้า เช่น ราคาปัจจุบันของหุ้นทั้งหมดในพอร์ตโฟลิโอของผู้ใช้ของคุณ
  2. การพัฒนาการโต้ตอบกับผู้ใช้ขั้นสูง เช่น การเพิ่มหรือแก้ไขเนื้อหาแบบไดนามิก เช่น ความสามารถในการเพิ่มหุ้นในพอร์ตโฟลิโอของคุณ
  3. พัฒนาเนื้อหาที่ผู้ใช้ปรับแต่งได้เหมือนสามารถปรับเปลี่ยนรูปแบบเพื่อให้พอร์ตกองทุนรวมปรากฏก่อนพอร์ตหุ้น
  4. การพัฒนาเนื้อหาที่ตอบสนองในเว็บไซต์ของคุณ ทำให้เว็บไซต์ของคุณปรับให้เข้ากับหน้าจอสื่อต่างๆ เช่น iPhone, เดสก์ท็อป, แท็บเล็ต เป็นต้น โดยอัตโนมัติ

หน้า HTML พื้นฐาน

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

DOM PARSER ของเบราว์เซอร์มีลักษณะอย่างไร

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

คุณจะเข้าถึงองค์ประกอบร่างกายได้อย่างไร?

<script>
    var body = window.document.body;
</script>

คุณจะพูดว่า "สวัสดีชาวโลก" ได้อย่างไร?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

ในที่สุดไฟล์ HTML ทั้งหมดจะมีลักษณะเช่นนี้

จุดเปิด Windows Notepad และวางเนื้อหาต่อไปนี้ลงไป จากนั้นบันทึกไฟล์เป็น “MyFileNewFile.html” (ตรวจสอบให้แน่ใจว่าชื่อไฟล์ของคุณลงท้ายด้วย .html)

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

สุดท้าย เพียงแค่เปิดไฟล์โดยใช้เบราว์เซอร์ที่คุณต้องการ แล้วคุณจะเห็นข้อความ “Hello World!”

ส่วนประกอบของ DOM ใน Selenium

ด้านล่างนี้เป็นส่วนประกอบหลักของ DOM คือ Selenium เว็บไดร์เวอร์:

  • หน้าต่าง
  • เอกสาร
  • ธาตุ

หน้าต่าง

หน้าต่างเป็นวัตถุที่มีวัตถุเอกสารใน DOM มันอยู่เหนือทุกสิ่ง

เพื่อเข้าถึงวัตถุหน้าต่างจากเอกสารที่กำหนด

<script>
      var window = document.defaultView;
</script>

ในสภาพแวดล้อมแบบแท็บ แต่ละแท็บจะมีวัตถุหน้าต่างของตัวเอง อย่างไรก็ตาม หากต้องการจับและใช้งานเหตุการณ์ เช่น window.resizeTo และ window.resizeBy เหตุการณ์เหล่านี้จะมีผลกับทั้งหน้าต่าง ไม่ใช่กับแท็บเพียงอย่างเดียว

คุณสมบัติของวัตถุหน้าต่างใน DOM

window.localStorage – ให้การเข้าถึงที่เก็บข้อมูลในตัวเครื่องของเบราว์เซอร์ ที่เก็บข้อมูลในตัวเครื่องสามารถใช้เพื่อจัดเก็บและดึงข้อมูลจากเซสชันได้

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

หน้าต่าง.ที่เปิด - รับการอ้างอิงถึงวัตถุหน้าต่างที่เปิดหน้าต่างนี้ (ไม่ว่าจะโดยการคลิกที่ลิงค์หรือใช้วิธี window.open)

วิธีการที่เป็นประโยชน์ของ Window Object

หน้าต่าง.การแจ้งเตือน() – แสดงข้อความแจ้งเตือนพร้อมข้อความ

<script>
		window.alert('say hello');
</script>

มีเหตุการณ์ที่เป็นประโยชน์มากมายที่วัตถุหน้าต่างเปิดเผย เราจะพูดคุยกันในส่วน "กิจกรรม" ใต้หัวข้อขั้นสูง

เอกสาร

เอกสารเป็นจุดเริ่มต้นของแผนผัง DOM เอกสารเป็นโหนดแรกใน DOM มีวิธีการและคุณสมบัติหลายวิธี ซึ่งมีขอบเขตใช้กับเอกสารทั้งหมด เช่น URL, getElementById, querySelector เป็นต้น

คุณสมบัติของวัตถุเอกสารใน DOM

เอกสาร.documentURI และ เอกสาร.URL – ทั้งคู่ส่งคืนตำแหน่งปัจจุบันของเอกสาร อย่างไรก็ตาม หากเอกสารไม่ใช่ประเภท HTML Document.URL จะไม่ทำงาน

เอกสาร.activeElement – วิธีการนี้ส่งคืนองค์ประกอบใน DOM ที่อยู่ในโฟกัส ซึ่งหมายความว่าหากผู้ใช้กำลังพิมพ์ในกล่องข้อความ Document.activeElement จะส่งคืนการอ้างอิงไปยังกล่องข้อความนั้น

เอกสาร.หัวเรื่อง – ใช้เพื่ออ่านหรือตั้งชื่อเรื่องของเอกสารที่กำหนด

วิธีการที่เป็นประโยชน์ของวัตถุเอกสาร

Document.getElementById(รหัสสตริง) – นี่คือวิธีที่เกี่ยวข้องและมีประโยชน์มากที่สุดในการจัดการ DOM ใช้เพื่อค้นหาองค์ประกอบใน DOM tree โดยใช้ตัวระบุเฉพาะ การค้นหาจะคำนึงถึงตัวพิมพ์เล็ก/ใหญ่ เช่น ในตัวอย่างต่อไปนี้ “ ” ไม่สามารถค้นหาองค์ประกอบได้โดยใช้คำเช่น IntroDiv, introdiv หรือ iNtrodiv เป็นต้น

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll (ตัวเลือกสตริง) – นี่เป็นอีกวิธีที่ใช้กันอย่างแพร่หลายในการเลือกองค์ประกอบเพิ่มเติมตามกฎของตัวเลือก CSS (หากคุณคุ้นเคยกับสัญลักษณ์ $ ของ jQuery นั่นก็ใช้วิธีนี้) เราจะไม่เจาะลึกตัวเลือก CSS มากนัก ตัวเลือก CSS คือชุดของกฎที่คุณอาจได้รับรายการองค์ประกอบที่คล้ายกัน (ตามกฎของตัวเลือก) เราเคยใช้วิธีนี้มาก่อนในส่วน “Hello World”

ธาตุ

วัตถุองค์ประกอบใน DOM

วัตถุองค์ประกอบใน DOM

องค์ประกอบคือวัตถุใด ๆ ที่แสดงโดยโหนดในแผนผัง DOM ของเอกสาร เช่นเคย ออบเจ็กต์ Element นั้นเป็นเพียงสัญญาคุณสมบัติ วิธีการ และเหตุการณ์ระหว่างเบราว์เซอร์และเอกสาร HTML มีองค์ประกอบประเภทพิเศษ เช่น HTMLElement, SVGElement, XULElement เป็นต้น เราจะเน้นเฉพาะ HTMLElement ในบทช่วยสอนนี้

คุณสมบัติของวัตถุองค์ประกอบใน DOM

องค์ประกอบ.id – คุณสมบัตินี้สามารถใช้เพื่อตั้งค่าหรืออ่าน “ID” (ตัวระบุที่ไม่ซ้ำกัน) สำหรับองค์ประกอบ HTML รหัสจะต้องไม่ซ้ำกันในองค์ประกอบต่างๆ ในแผนผัง DOM ตามที่กล่าวไว้ก่อนหน้านี้ ID ยังถูกใช้โดยเมธอด Document.getElementById เพื่อเลือกออบเจ็กต์องค์ประกอบเฉพาะภายในแผนผัง DOM

HTMLElement.contentแก้ไขได้ คุณสมบัติ contentEditable ขององค์ประกอบจะกำหนดว่าเนื้อหาขององค์ประกอบนั้นสามารถแก้ไขหรือปรับเปลี่ยนได้หรือไม่ คุณสมบัตินี้สามารถตั้งค่าได้ตามที่แสดงในสคริปต์ด้านล่าง คุณสมบัตินี้ยังใช้เพื่อกำหนดว่าองค์ประกอบที่กำหนดนั้นสามารถแก้ไขได้หรือไม่ ลองใช้สคริปต์ต่อไปนี้ภายในเนื้อหา HTML ใดๆ แล้วคุณจะสังเกตเห็นว่าคุณสามารถแก้ไขเนื้อหาใดๆ ของเนื้อหาได้

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML เป็นคุณสมบัติสำคัญอีกประการหนึ่งที่เราใช้ในการเข้าถึงเนื้อหา HTML ภายในองค์ประกอบ นอกจากนี้ยังใช้ในการตั้งค่าเนื้อหา HTML ใหม่ขององค์ประกอบอีกด้วย มักใช้ในการตั้งค่า/เปลี่ยนแปลงเนื้อหาของฟิลด์ข้อมูล ตัวอย่างเช่น หากคุณต้องการให้เว็บเพจของคุณอัปเดตอุณหภูมิของเมืองมุมไบทุกชั่วโมง คุณสามารถเรียกใช้สคริปต์ในตัวอย่างต่อไปนี้ทุกชั่วโมง

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

วิธีการที่เป็นประโยชน์ของวัตถุองค์ประกอบ

HTMLElement.เบลอ() & HTMLElement.โฟกัส() วิธีการเบลอและโฟกัสใช้เพื่อลบโฟกัสออกจากหรือให้โฟกัสไปที่องค์ประกอบ HTML ตามลำดับ วิธีการเหล่านี้ใช้กันอย่างแพร่หลายเพื่อย้ายโฟกัสของเคอร์เซอร์ระหว่างกล่องข้อความในหน้าเว็บป้อนข้อมูล

Element.querySelectorAll – วิธีการนี้คล้ายกับวิธี querySelector ที่กล่าวถึงแล้วสำหรับวัตถุเอกสาร อย่างไรก็ตาม วิธีนี้จะจำกัดการค้นหาภายในองค์ประกอบสืบทอดขององค์ประกอบนั้นเอง

การดีบักใน DOM

เครื่องมือสำหรับนักพัฒนาของ Google Chrome, มอซิลล่า Firefox, Internet Explorer (10 หรือสูงกว่า) หรือ Safari ช่วยให้แก้ไขจุดบกพร่องได้ง่ายภายในเบราว์เซอร์ บางครั้งเบราว์เซอร์ที่ต่างกันจะตีความมาร์กอัป HTML เดียวกันแตกต่างกัน และนั่นคือเมื่อการดีบักช่วยให้คุณตรวจสอบ DOM ตามที่ได้รับการตีความโดยกลไก DOM ของเบราว์เซอร์นั้น ๆ

ตอนนี้ สมมติว่าคุณต้องการเปลี่ยนค่าอุณหภูมิจาก 26oC ถึง 32oC ในตัวอย่างสุดท้ายของคุณ เราจะดำเนินการตามขั้นตอนง่ายๆ ไม่กี่ขั้นตอนในการทำเช่นนั้น ภาพหน้าจอที่แสดงที่นี่มาจาก Mozilla's Firefox– อย่างไรก็ตาม ขั้นตอนจะเหมือนกันในเบราว์เซอร์อื่นๆ ทั้งหมด

  1. เปิด MyFileNewFile.html (หรือชื่อใดก็ตามที่คุณตั้งให้กับไฟล์ HTML ในบทช่วยสอนด้านบน) โดยใช้เบราว์เซอร์
  2. ใช้เมาส์และคลิกขวาที่ค่าอุณหภูมิ 26oC และคลิกที่ “ตรวจสอบองค์ประกอบ”

    การดีบักใน DOM

  3. โปรดสังเกตว่าองค์ประกอบที่คุณเลือก "ตรวจสอบองค์ประกอบ" จะถูกเน้นในเบราว์เซอร์ของคุณ (หน้าต่างดีบักเกอร์มักจะปรากฏที่ด้านล่างของหน้าจอ)

    การดีบักใน DOM Engine

  4. เปิด องค์ประกอบโดยคลิกสามเหลี่ยมเอียงด้านข้าง

    กระบวนการแก้ไขข้อบกพร่องใน DOM

  5. เลือกสิ่งที่คุณต้องการแก้ไขแล้วดับเบิลคลิก คุณจะได้รับตัวเลือกในการเปลี่ยนแปลงข้อความ ทำตามขั้นตอนในภาพเคลื่อนไหวด้านล่าง

    การดีบักใน DOM

  6. สังเกตเห็นการเปลี่ยนแปลงในเนื้อหาของหน้า HTML ของคุณ คุณสามารถปิดหน้าต่างการแก้ไขข้อบกพร่องได้ทันที

    โปรดทราบว่าการเปลี่ยนแปลงของคุณจะยังคงอยู่สำหรับเซสชันนี้เท่านั้น ทันทีที่คุณโหลดซ้ำหรือรีเฟรช (กด F5) หน้าเว็บ การเปลี่ยนแปลงจะถูกเปลี่ยนกลับ สิ่งนี้บ่งชี้ว่าคุณไม่ได้เปลี่ยนซอร์ส HTML จริง แต่เป็นเพียงการตีความท้องถิ่นของเบราว์เซอร์ของคุณ

    ลองทำสิ่งต่อไปนี้เพื่อความสนุกสนาน www.facebook.com ในเบราว์เซอร์ของคุณและใช้เครื่องมือดีบักเกอร์เพื่อติดตามผลลัพธ์ – สังเกตว่ามีข้อความว่า “ฉันแฮ็ก Facebook”

กระบวนการแก้ไขข้อบกพร่องใน DOM

กิจกรรม DOM

กิจกรรมใน DOM คืออะไร

เหตุการณ์คือรูปแบบการเขียนโปรแกรมที่เหตุการณ์ที่ผู้ใช้ทริกเกอร์ (หรือวงจรชีวิตของหน้าเบราว์เซอร์ที่ทริกเกอร์) จะถูกถ่ายทอดเป็นข้อความ ตัวอย่างเช่น เมื่อเพจโหลดเสร็จแล้ว จะทำให้เกิดเหตุการณ์ window.load และในทำนองเดียวกันเมื่อผู้ใช้คลิกปุ่มนั้น เหตุการณ์การคลิกขององค์ประกอบถูกทริกเกอร์

ข้อความเหล่านี้สามารถดักจับได้ Javaต้นฉบับ รหัสแล้วจึงดำเนินการตามที่ผู้พัฒนากำหนดได้ ตัวอย่างเช่น คุณต้องการให้ตัวเลขบนเว็บเพจของคุณอัปเดตเฉพาะเมื่อผู้ใช้คลิกปุ่มเท่านั้น คุณสามารถทำได้โดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

  1. กำหนดการดำเนินการให้กับเหตุการณ์ onclick ขององค์ประกอบ HTML
  2. กำหนดการดำเนินการให้กับเหตุการณ์การคลิกโดยใช้วิธี addEventListener

1 วิธี

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

2 วิธี

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

การแก้ไขปัญหาใน DOM

ถาม ฉันจะรู้ได้อย่างไรว่ามีองค์ประกอบอยู่หรือไม่

A. ลองค้นหาองค์ประกอบโดยใช้ตัวเลือกใดๆ และตรวจสอบว่าองค์ประกอบที่ส่งคืนเป็นค่าว่างหรือไม่ ดูตัวอย่างด้านล่าง –

บทความที่เกี่ยวข้อง

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

ถาม ฉันได้รับ TypeError: document.getElementByID ไม่ใช่ฟังก์ชัน...

A. ตรวจสอบให้แน่ใจว่าชื่อวิธีการตรงกับวิธีการ API ทุกประการ เช่นเดียวกับในคำถามข้างต้น - มันคือ getElementById และไม่ใช่ getElementByID

ถาม Children และ ChildNodes แตกต่างกันอย่างไร

A. วิธี children ช่วยให้เรารวบรวมองค์ประกอบทั้งหมดภายในองค์ประกอบที่เรียก คอลเลกชันที่ส่งคืนเป็นประเภท HTMLCollection อย่างไรก็ตาม วิธี childNodes ช่วยให้เรารวบรวมโหนดทั้งหมดภายในองค์ประกอบที่เรียก เพิ่มสคริปต์ต่อไปนี้ลงในตัวอย่างของเราและดูความแตกต่าง –

วิธีการ childNodes ส่งคืน 14 รายการ

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

ในขณะที่วิธีลูกส่งคืนเพียง 7 รายการ

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

ถาม ฉันได้รับ Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'innerHTML' ของ undefinition...

A. ตรวจสอบให้แน่ใจว่าอินสแตนซ์ของ HTMLElement ที่คุณเรียกใช้คุณสมบัติ innerHTML นั้นถูกตั้งค่าหลังจากการประกาศครั้งแรก ข้อผิดพลาดนี้มักเกิดขึ้นในสถานการณ์ต่อไปนี้ ดูวิธีหลีกเลี่ยงข้อผิดพลาดในบล็อกโค้ดถัดไป...

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

สรุป

  • ในบทช่วยสอนนี้ เราได้เรียนรู้ว่า DOM คืออะไร และแนวคิดสำคัญในการทำความเข้าใจเพื่อสร้างหน้าเว็บแบบไดนามิกเป็นอย่างไร
  • นอกจากนี้เรายังได้กล่าวถึงประเภทขององค์ประกอบ DOM เช่น หน้าต่าง เอกสาร และองค์ประกอบ
  • เราได้เรียนรู้วิธีการและคุณสมบัติ DOM ที่เป็นประโยชน์ซึ่งมีอยู่ในแต่ละประเภท
  • เราได้เห็นวิธีที่เบราว์เซอร์ส่วนใหญ่นำเสนอเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อเล่นกับหน้าเว็บใดๆ ก็ตามที่มีอยู่บนอินเทอร์เน็ต ดังนั้นการเรียนรู้ที่จะแก้ไขจุดบกพร่องและแก้ไขปัญหาเกี่ยวกับเว็บไซต์ของเราเอง
  • นอกจากนี้เรายังกล่าวถึงกลไกเหตุการณ์ DOM สั้นๆ ด้วย
  • สุดท้ายนี้ เราได้กล่าวถึงรายการแก้ไขปัญหาบางประการใน DOM
  • อินเทอร์เน็ตเต็มไปด้วยทรัพยากรบน DOM หนึ่งในเอกสารอ้างอิงที่ดีที่สุดและทันสมัยมีอยู่ที่เครือข่ายนักพัฒนาของ Mozilla ดู - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

จดหมายข่าว Guru99 รายวัน

เริ่มต้นวันใหม่ของคุณด้วยข่าวสาร AI ล่าสุดและสำคัญที่สุดที่ส่งมอบทันที