Giải Bài Tập - Xử lý các phần tử HTML trong Javascript bằng DOM

xuất bản

Thông báo:

Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!

Đề bài:

Cho một đoạn mã HTML như dưới đây:

<table border="1" cellspacing="0" cellpadding="5">
    <tr>
        <td>Nhập tiêu đề</td>
        <td>
            <input type="text" id="title" value="" /> <br />
            <a href="#" id="show-search-advance">Tìm kiếm nâng cao</a>
        </td>
    </tr>
    <tr id="search-advance">
        <td>Chọn chuyên mục</td>
        <td>
            <select id="category">
                <option value="1">PHP</option>
                <option value="2">Javascript</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" id="btn-search" value="Tìm kiếm" />
        </td>
    </tr>
</table>

Dùng DOM để truy vấn đến thẻ HTML chứa nội dung ‘Chọn chuyên mục’ bằng tất cả các cách có thể.
Sau khi tìm được thì lấy nội dung trong thẻ và hiển thị ra
Thay đổi nội dung của thẻ vừa tìm
Tìm thẻ input có id="btn-search"
Thay đổi thuộc tính type từ button sang text
Lấy ra giá trị của thuộc tính value

Cách giải:

Demo code & Hướng dẫn:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="5">
        <tr>
            <td>Nhập tiêu đề</td>
            <td>
                <input type="text" id="title" value="" /> <br />
                <a href="#" id="show-search-advance">Tìm kiếm nâng cao</a>
            </td>
        </tr>
        <tr id="search-advance">
            <td>Chọn chuyên mục</td>
            <td>
                <select id="category">
                    <option value="1">PHP</option>
                    <option value="2">Javascript</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" id="btn-search" value="Tìm kiếm" />
            </td>
        </tr>
    </table>
    <script>
        var chonchuyenmuc = document.querySelector('#search-advance td');
        // tìm phần tử HTML thông qua cú pháp selector của css 
        //     (ở đây là lấy thẻ có class là #search-advance td) và gán giá trị cho chonchuyenmuc
        console.log(chonchuyenmuc); //log ra giá trị của #search-advance td (dùng querrySelector sẽ chỉ trả ra thẻ h1 đầu tiên tìm thấy)
        console.log(chonchuyenmuc.innerHTML = "Anh Yêu Em"); //log ra giá trị của #search-advance td và gán giá trị mới cho nó bằng innerHTML
        var chonchuyenmuc = document.querySelectorAll('#search-advance td');
        // tìm phần tử HTML thông qua cú pháp selector của css 
        //     (ở đây lấy ra toàn bộ thẻ #search-advance td) và gán giá trị 
        //     cho chonchuyenmuc
        //     querrySelectorAll sẽ trả ra 1 mảng các phần tử #search-advance td
        console.log(chonchuyenmuc[0]); //log ra giá trị có index = 0 của mảng chonchuyenmuc
        console.log(chonchuyenmuc[0].innerHTML = "I Love You");//log ra giá trị có index = 0 của mảng chonchuyenmuc và gán giá trị cho index[0] =  "I Love You" 
       
       var input = document.querySelector('#btn-search');
        input.type = "text"; // thay đổi giá trị của thuộc tính type từ button thành text
        console.log(input.value); // lấy ra giá trị của thuộc tính value
    </script>
</body>
</html>

Chúc các bạn học tập và làm việc hiệu quả.

có thắc mắc gì comment phía dưới mình sẽ giải đáp nhé!