Skip to main content

Select DOM

Idea การ select dom​

การสื่อสารประเภทแรกคือ การสื่อสารจาก javascript เลือกไปยัง html โดย เราจะต้องเลือกเป้าหมาย 2 อย่างก่อนคือ

  1. เลือกใคร (html element ตัวไหน)
  2. ทำอะไร (เช่น ดึงค่าออกมา, แทนค่า)

วิธี Select DOM แต่ละประเภท​

การ Select ไปยัง DOM html ทำได้ผ่านตัวแปร document ซึ่งเป็นตัวแปรที่ใช้สื่อสารระหว่าง javascript และ content ใน page (ซึ่งในที่นี้คือ HTML)

  1. getElementById ใส่ id กำกับใน html เพื่อทำการดึงค่าออกมา

ตัวอย่าง ใส่ id ใน input text firstname เพื่อทำการใช้ระบุสำหรับดึง value

<input id="firstname" type="text" name="firstname" value="ทดสอบ">

... 
<script>
let firstname = document.getElementById('firstname')

// สำหรับแสดง DOM html ออกมา
console.log('firstname DOM', firstname)

// สำหรับการดึงค่า value ออกมา
console.log('firstname DOM', firstname.value)
</script>
  1. getElementByClassname ใส่ class กำกับใน html เพื่อทำการดึงค่าออกมา

ตัวอย่าง ใส่ class กำกับไว้กับ input type checkbox 2 ตัวชื่อ "interest" แล้วดึงค่า value จาก checkbox ออกมา

<input class="interest" type="checkbox" name="interest" value="หนังสือ"> หนังสือ
<input class="interest" type="checkbox" name="interest" value="กีฬา"> กีฬา

<script>
let interests = document.getElementByClassname('interests')

// สำหรับแสดง DOM html ออกมา (เป็น Array เนื่องจากมีหลายอัน)
console.log('interests', interests)

// สำหรับดึงค่า value ใน checkbox ออกมาทั้งหมด
for (let i = 0; i < interests.length; i++) {
    console.log(interests[i].value)
}

</script>
  1. querySelector สำหรับ select ตาม CSS Selector แบบเดียวกับ CSS แต่เลือกเป็นตัวเดียว(อ่านเพิ่มเติม CSS Selector)

ตัวอย่าง ตามด้านล่าง ต้องการเลือกไปยัง element input ที่มี Attribute type=text ตัว firstname

<!-- การใส่ value ใน input text = การใส่ค่า default ของกล่องนั้นเข้าไป -->
ชื่อจริง <input type="text" name="firstname" value="ชื่อ"> <br>
...
<script>
let inputText = document.querySelector('input[type=text]')

// ดึงค่า value จาก inputText
console.log('input value', inputText.value)
</script>
  1. querySelectorAll สำหรับ select ตาม CSS Selector แบบเดียวกับ CSS แต่เลือกเป็นหลายตัวได้ (อ่านเพิ่มเติม CSS Selector)

ตัวอย่าง ตามด้านล่าง ต้องการเลือกไปยัง element input type=radio ทั้ง 3 ตัว โดยที่ดึง value ออกมาแสดง

<input type="radio" name="gender" value="ชาย"> ชาย
<input type="radio" name="gender" value="หญิง"> หญิง
<input type="radio" name="gender" value="ไม่ระบุ"> ไม่ระบุ

...

<script>
let inputsRadio = document.querySelectorAll('input[type=radio]')

// inputsRadio ได้ออกมาเป็น Array ต้อง loop แสดงค่า value
for (let i = 0; i < inputsRadio.length; i++) {
    console.log('input value', inputsRadio[i].value)
}
</script>