Skip to main content

การเข้าถึงและการ update HTML DOM

การอ่านและการเขียน Content html จาก javascript​

จาก 2 หัวข้อที่ผ่านไปตอนนี้เราจะสามารถ access html ทั้งการ access โดยตรงและการดักจับจาก event ออกมาได้

โจทย์ต่อไป เราจะพาทำทั้ง 2 เคสคือ การอ่าน และการเขียน Content โดยจะขอเล่นผ่าน 3 ตัวคือ textContent, innerText, innerHTML

การอ่าน Content จาก html element​

  1. textContent ทำการดึงข้อความทั้งหมดของ element นั้นออกมา

ตัวอย่าง ทำการดึงข้อความของหัวข้อออกมาผ่าน id หลังจากที่กดปุ่ม button ตกลง ไปแล้ว

<h1 id="header">Header</h1>
<button id="click" onclick="clickButton()">ปุ่มส่ง</button>

<script>
function clickButton () {
    let header = document.getElementById('header')
    // แสดง "Header" ออกมา
    console.log('header textcontent', header.textContent)
}
</script>
  1. innerText ทำการดึงข้อความ "ที่มองเห็นเท่านั้น" ทั้งหมดของ element นั้นออกมา (ไม่นับพวก display: none ด้วย)

ตัวอย่าง ทำการดึงข้อความของหัวข้อออกมาผ่าน id หลังจากที่กดปุ่ม button ตกลง ไปแล้ว โดยที่ด้านในมี display: none ที่ซ่อนการมองเห็นไว้

<h1 id="header">Head<span style="display:none;">er</span></h1>
<button id="click" onclick="clickButton()">ปุ่มส่ง</button>

<script>
function clickButton () {
    let header = document.getElementById('header')
    // แสดง "Head" ออกมา
    console.log('header textcontent', header.innerText)
}
</script>
  1. innerHTML ทำการดึง html ที่อยู่ภายใต้ element ตัวนั้นทั้งหมดออกมา

ตัวอย่าง ทำการดึง html ข้างในของหัวข้อออกมาผ่าน id หลังจากที่กดปุ่ม button ตกลงไป

<h1 id="header">Head<span style="display:none;">er</span></h1>
<button id="click" onclick="clickButton()">ปุ่มส่ง</button>

<script>
function clickButton () {
    let header = document.getElementById('header')
    // แสดง "Head<span style="display:none;">er</span>" ออกมา
    console.log('header textcontent', header.innerHTML)
}
</script>

การอ่านค่าและ access ถึงตัวเองผ่านตัวแปร event ใน parameter​

ใน javascript จะมีตัวแปรพิเศษชื่อ event ที่ทำให้สามารถ access ถึงตัว element ที่กำลังทำ Event

ตัวอย่าง access ถึงชื่อปุ่มของตัวเอง

<button onclick="clickButton(event)">ชื่อปุ่มนี้</button>
<script>
function clickButton(event) {
    let thisButton = event.target
    console.log('button name', thisButton.innerText)
}
</script>

การเขียน Content ลง html element​

  1. textContent, innerText ทำการแทนข้อความใน element html เข้าไปทั้งหมด

ตัวอย่าง เราจะดึงของใน input form ออกมา โดยเอาแทนเข้าไปใน

แสดงผลออกมา หลังจากกดปุ่มแล้ว

<div id="content">Show name here !!</div>
ชื่อจริง <input type="text" name="firstname">
<button id="click" onclick="clickButton()">ปุ่มส่ง</button>

...
<script>
function clickButton () {
    // ดึง value จากข้อมูลใน input firstname ออกมา
    let firstname = document.querySelector('input[name=firstname]').value
    // เลือกไปยัง div id=content
    let contentDiv = document.getElementById('content')
    // นำ value จาก firstname ใส่เข้าไปใน div id=content
    contentDiv.innerText = firstname
}
</script>
  1. innerHTML ทำการแทน html ใส่ลงไปใน element html เข้าไปทั้งหมด

ตัวอย่างที่ 1 นำข้อความในปุ่มไปแสดงใน html แล้วเพิ่มตัวหนา

<div id="content">แสดงชื่อปุ่มตรงนี้ !!</div>
<button onclick="submitButton(event)">ปุ่มนี้</button>

<script>
function submitButton (event) {
    let buttonName = event.target.textContent
    let contentDiv = document.getElementById('content')
    contentDiv.innerHTML = `<b>${buttonName}</b>`
}
</script>

ตัวอย่างที่ 2 นำข้อมูล input จาก checkbox เพื่อไปแสดงเป็น list ใน html ออกมา ผ่าน ul

<div id="content"></div>

<input type="checkbox" name="interests" value="หนังสือ"> หนังสือ <br>
<input type="checkbox" name="interests" value="กีฬา"> กีฬา <br>
<input type="checkbox" name="interests" value="เกมส์"> เกมส์ <br>

<button onclick="submitInterest()">ยืนยันความสนใจ</button>
...

<script>
function submitInterest () {
    let interestInputs = document.querySelectorAll('input[name=interests]:checked')
    let contentDiv = document.getElementById('content')
    let htmlData = '<ul>'
        for (let i = 0; i < interestInputs.length; i++) {
        if (interestInputs[i].value) {
           htmlData += `<li>${interestInputs[i].value}</li>`
        }
    }
    htmlData += '</ul>'
    contentDiv.innerHTML = htmlData
}
</script>

การอ่านและอัพเดท Attribute ลง html element​

นอกจากการ access ตัว content ของ html แล้ว ใน javascript เองก็สามารถ access Attribute ได้เหมือนกัน ซึ่งจะมีทั้งหมด 2 คำสั่งหลักๆคือ

  1. getAttribute สำหรับการดึงค่า Attribute ที่ระบุเอาไว้ ตัวอย่าง ดึง link ของ tag a ผ่าน getAttribute
<a id='testlink' href='https://google.com'>Link</a>
<script>
let aElement = document.getElementById('testlink')
console.log('this link', aElement.getAttribute('href'))
</script>
  1. setAttribute สำหรับการ set ค่า Attribute ที่ระบุเอาไว้

ตัวอย่าง disable ปุ่ม ด้วย setAttribute หลังจากที่กดปุ่มไปแล้ว

<button id="test" onclick="submitData(event)">ส่งข้อมูล</button>
<script>
function submitData(event) {
    let thisButton = event.target
    thisButton.setAttribute('disabled', 'true')
}
</script>

การอ่านและอัพเดท CSS Attribute ลง html element​

จะมีความคล้ายกับการ update ผ่าน Attribute ซึ่งใน javascript จะมี key ชื่อ .style สำหรับการ update ได้

ตัวอย่างที่ 1 เปลี่ยนสีปุ่มเป็นสีแดง เมื่อกดปุ่ม

<button onclick="changeColor(event)">ปุ่มนี้</button>
<script>
function changeColor(event) {
    let thisButton = event.target
    console.log('current background color', event.target.style.backgroundColor)
    event.target.style.backgroundColor = 'red'
}
</script>

ตัวอย่างที่ 2 เปลี่ยนสีน้ำเงินบนข้อความเมื่อ radio นั้นถูกเลือก และเป็นสีดำ เมื่อ radio นั้นไม่ถูกเลือก

<input type="radio" name="gender" value="male" onchange="changeGender(event)"> 
<span id="male" class="gender">ชาย</span>

<input type="radio" name="gender" value="female" onchange="changeGender(event)">
<span id="female" class="gender">หญิง</span>

<input type="radio" name="gender" value="none" onchange="changeGender(event)"> 
<span id="none" class="gender">ไม่ระบุ</span>

<script>
function changeGender(event) {
    let thisRadio = event.target
    let selectedDom = document.getElementById(thisRadio.value)
    let allGendersRadio = document.getElementsByClassName('gender')

    for (let i = 0; i < allGendersRadio.length; i++) {
        allGendersRadio[i].style.color = 'black'
    }
    if (thisRadio.checked) {
        selectedDom.style.color = 'blue'
    }
}
</script>

และนี่ก็คือพื้นฐานโดยประมาณของการ Access DOM ทั้งหมด ซึ่งเอาจริงๆ ด้วยความรู้เพียงเท่านี้ เพียงพอสำหรับการทำเว็บไซต์