DOM คืออะไร Selenium WebDriver? โครงสร้างและชื่อเต็ม

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

⚡ สรุปอย่างชาญฉลาด

Document Object Model (DMO) เปิดเผยหน้า HTML ให้กับผู้ใช้ Javaสคริปต์เป็นโครงสร้างแบบต้นไม้ของอ็อบเจ็กต์ ทำให้สคริปต์และ Selenium WebDriver สามารถอ่าน ค้นหา และเปลี่ยนแปลงองค์ประกอบใดๆ บนหน้าเว็บขณะที่เบราว์เซอร์กำลังทำงานอยู่

  • 🔘 ชื่อเต็ม: DOM ย่อมาจาก Document Object Model ซึ่งเป็นอินเทอร์เฟซมาตรฐานของ W3C สำหรับเอกสาร HTML และ XML
  • ☑️ โครงสร้างต้นไม้: แท็กทุกแท็กจะกลายเป็นโหนด ดังนั้น html, head, body, article และ p จึงก่อให้เกิดลำดับชั้นแบบพ่อ-ลูก
  • ✅ วัตถุสามชิ้น: Window ใช้สำหรับครอบแท็บ, Document ใช้สำหรับระบุรากของโครงสร้าง และ Element ใช้สำหรับแทนแท็กแต่ละแท็ก
  • 🧪 วิธีการหลัก: เมธอด getElementById, querySelector และ querySelectorAll ใช้สำหรับดึงข้อมูลโหนด ส่วนเมธอด innerHTML จะอ่านและเขียนเนื้อหาใหม่ของโหนดเหล่านั้น
  • 🛠️ การแก้จุดบกพร่อง: เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์จะแสดงโครงสร้างต้นไม้ที่ถูกวิเคราะห์แล้ว และการแก้ไขที่ทำในนั้นจะมีผลเฉพาะจนกว่าจะโหลดหน้าเว็บใหม่เท่านั้น
  • 📊 กิจกรรม: การกระทำต่างๆ เช่น การคลิกและการโหลด จะส่งข้อความกระจายไปยังระบบ ซึ่งแอตทริบิวต์ onclick หรือ addEventListener สามารถดักจับได้
อ่านเพิ่มเติม

DOM คืออะไร Selenium โครงสร้างและชื่อเต็มของ WebDriver

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

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

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

หัวข้อด้านล่างนี้จะกล่าวถึงโครงสร้างเอกสาร วัตถุที่ DOM เปิดเผย และวิธีการตรวจสอบวัตถุเหล่านั้น Mozilla จะเก็บรักษาเอกสารอ้างอิง API ฉบับปัจจุบันไว้ที่นี่ หน้าโมเดลวัตถุเอกสาร MDN.

ทุกๆ Selenium ตัวระบุตำแหน่งจะอ้างอิงกับต้นไม้เดียวกันนี้ ดังนั้นโครงสร้างด้านล่างจึงเป็นสิ่งต่อไปนี้ ค้นหาองค์ประกอบ() การค้นหา

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

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

  1. เดเวโลping เนื้อหาที่อัปเดตตัวเองอย่างต่อเนื่องโดยไม่ต้องรีเฟรชหน้าเว็บทั้งหมด – เช่น ราคาปัจจุบันของหุ้นทั้งหมดในพอร์ตการลงทุนของผู้ใช้
  2. เดเวโลping การโต้ตอบกับผู้ใช้ขั้นสูง เช่น การเพิ่มหรือแก้ไขเนื้อหาแบบไดนามิก – เช่น ความสามารถในการเพิ่มหุ้นเพิ่มเติมลงในพอร์ตโฟลิโอของคุณ
  3. เดเวโลping เนื้อหาที่ผู้ใช้สามารถปรับแต่งได้ เช่น ความสามารถในการเปลี่ยนรูปแบบการแสดงผลเพื่อให้พอร์ตการลงทุนในกองทุนรวมปรากฏก่อนพอร์ตการลงทุนในหุ้น
  4. เดเวโลping เพิ่มเนื้อหาแบบ Responsive ให้กับเว็บไซต์ของคุณ ทำให้เว็บไซต์ของคุณปรับให้เข้ากับหน้าจออุปกรณ์ต่างๆ ได้โดยอัตโนมัติ เช่น 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>

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

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

เอกสาร

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

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

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

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

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

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

Document.getElementById(รหัสสตริง) – นี่เป็นวิธีการที่เกี่ยวข้องและมีประโยชน์มากที่สุดในการจัดการ DOM โดยใช้ในการค้นหาองค์ประกอบในโครงสร้าง DOM โดยใช้ตัวระบุเฉพาะของมันการค้นหาจะคำนึงถึงตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก กล่าวคือ ในตัวอย่างต่อไปนี้ “ ไม่สามารถค้นหาองค์ประกอบ "โดยใช้คำเช่น 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"

ธาตุ

แผนภาพด้านล่างแสดงให้เห็นว่าอ็อบเจ็กต์ Element อยู่ในตำแหน่งใดภายในโครงสร้าง DOM โดยอยู่ใต้โหนดเอกสาร

วัตถุ Element แสดงเป็นโหนดภายในลำดับชั้นของโครงสร้าง DOM

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

Element คือวัตถุใดๆ ที่แสดงด้วยโหนดในโครงสร้าง DOM ของเอกสาร เช่นเดียวกับที่ผ่านมา วัตถุ Element เองก็เป็นเพียงส่วนประกอบหนึ่งของโครงสร้างเท่านั้นtracเป็นการสื่อสารระหว่างเบราว์เซอร์และเอกสาร 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 ที่กล่าวถึงแล้วสำหรับวัตถุเอกสาร อย่างไรก็ตาม วิธีนี้จะจำกัดการค้นหาภายในองค์ประกอบสืบทอดขององค์ประกอบนั้นเอง

หมายเหตุความถูกต้อง: บล็อกด้านบนคัดลอกมาตามที่เผยแพร่ โค้ดที่ใช้งานได้ใช้ เอกสาร โดยใช้ตัวอักษร d ตัวเล็กและ ภายในHTML คุณสมบัติ ไม่ใช่ setInnerHTML()

การดีบักใน DOM

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

หมายเหตุสำหรับเบราว์เซอร์: Internet Explorer ยุติการให้บริการในปี 2022 ดังนั้น DevTools ของมันจึงอยู่ในที่อื่นแล้ว Microsoft Edgeขั้นตอนด้านล่างยังคงเหมือนเดิม และสามารถเปิด DevTools ได้โดยกด F12

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

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

    คลิกขวาที่ค่าอุณหภูมิแล้วเลือก "ตรวจสอบองค์ประกอบ" ในเบราว์เซอร์

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

    เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์จะเน้นองค์ประกอบ span ที่ถูกตรวจสอบในโครงสร้าง DOM

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

    การขยายองค์ประกอบ span ในตัวตรวจสอบ DOM โดยใช้ปุ่มสลับรูปสามเหลี่ยม

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

    วิดีโอสาธิตการแก้ไขค่าข้อความ DOM จาก 26 เป็น 32 ในเครื่องมือตรวจสอบ (Inspector)

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

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

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

ผลลัพธ์ของการทดลองนั้นมีลักษณะดังภาพหน้าจอข้างล่างนี้

หน้า Facebook ถูกแก้ไขแบบเรียลไทม์ในเครื่องมือตรวจสอบของเบราว์เซอร์ โดยแสดงข้อความว่า "ฉันแฮ็ก Facebook แล้ว"

การอ่านและแก้ไขข้อมูลครอบคลุมทั้งหน้าเว็บแบบคงที่และแบบโต้ตอบ หน้าเว็บแบบโต้ตอบยังตอบสนองต่อการกระทำของผู้ใช้ด้วย

กิจกรรม DOM

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

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

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

  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

หมายเหตุเกี่ยวกับ API รุ่นเก่า: สองคำตอบด้านล่างใช้ document.write() ซึ่งยังคงทำงานได้ แต่การเรียกใช้หลังจากโหลดหน้าเว็บเสร็จแล้วจะลบเอกสารทั้งหมด ควรใช้ console.log() หรือ innerHTML แทน

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

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';
}

คำถามที่พบบ่อย

Shadow DOM เป็นฟีเจอร์ของเบราว์เซอร์ที่ให้คอมโพเนนต์มีโครงสร้างย่อยที่แยกต่างหาก ทำให้สไตล์และสคริปต์ไม่รั่วไหล Virtual DOM เป็นเทคนิคจากไลบรารีที่ใช้โดย React และ Vue ซึ่งเปรียบเทียบความแตกต่างของสำเนาในหน่วยความจำเพื่อลดการอัปเดตจริงให้น้อยที่สุด

WebDriver จะส่งตัวระบุตำแหน่งไปยังเบราว์เซอร์ ซึ่งจะตรวจสอบโครงสร้างต้นไม้ที่แยกวิเคราะห์แล้วจนกว่าจะพบการจับคู่ จากนั้นจะส่งคืนค่าแฮนเดิลของ WebElement ตัวระบุตำแหน่ง ตัวอย่างเช่น id, name, CSS selector และ XPath เป็นเพียงการอธิบายกฎการค้นหาที่แตกต่างกันบนโหนดเดียวกัน

ใช้ getElementById เมื่อเป้าหมายมี ID ที่ไม่ซ้ำกัน เนื่องจากเป็นการค้นหาที่เร็วที่สุดและส่งคืนโหนดเดียว ใช้ querySelector หรือ querySelectorAll เมื่อการจับคู่ขึ้นอยู่กับคลาส คุณลักษณะ หรือเส้นทางระหว่างโหนดแม่และโหนดลูก

ถึงแม้จะยังทำงานได้ แต่เบราว์เซอร์ไม่แนะนำให้ใช้ การเรียก document.write() หลังจากที่หน้าเว็บโหลดเสร็จแล้วจะแทนที่เอกสารทั้งหมด และจะขัดขวางการวิเคราะห์ข้อมูลระหว่างการโหลด ควรใช้ console.log() แทน tracing หรือ innerHTML เพื่อแทรกเนื้อหา

โมเดล DOM ครอบคลุมเนื้อหาของหน้าเว็บ ได้แก่ ส่วนหัว ส่วนเนื้อหา และแท็กทุกแท็ก ส่วนโมเดล Browser Object Model ครอบคลุมเบราว์เซอร์โดยรอบ รวมถึงตัวนำทาง หน้าจอ ตำแหน่ง และประวัติการเข้าชม อ็อบเจ็กต์ window คือจุดที่ทั้งสองโมเดลมาบรรจบกัน

Internet Explorer ยุติการให้บริการในปี 2022 ดังนั้นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จึงถูกจัดเก็บไว้ภายในระบบอื่นแล้ว Microsoft Edgeขั้นตอนการทำงานยังคงเหมือนเดิม: กด F12 หรือคลิกขวาที่องค์ประกอบ เลือก Inspect แล้วแก้ไขโหนดในแผงที่เปิดขึ้นมา

เครื่องมือแมชชีนเลิร์นนิงจะประเมินคุณลักษณะของโหนดหลายอย่างพร้อมกัน ดังนั้นเมื่อคลาสหรือรหัสเปลี่ยนไป ระบบจะจับคู่กับองค์ประกอบเดิมอีกครั้งแทนที่จะเกิดข้อผิดพลาด แพลตฟอร์มทดสอบที่แก้ไขตัวเองได้จะสร้างสิ่งนี้บนพื้นฐานของการสืบค้น DOM ทั่วไป

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

สรุปโพสต์นี้ด้วย: