JavaScript - DOM HTML và CSS Lấy và thay đổi nội dung bên trong phần tử HTML và thay đổi thuộc tính của phần tử HTML

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!

Xin chào các bạn hôm nay mình sẽ tiếp tục 1 bài viết về DOM trong JavaScript và trong bài này mình sẽ chú trọng đến

DOM HTML:

            Lấy và thay đổi nội dung bên trong phần tử HTML
            Lất và thay đổi thuộc tính của phần tử HTML

bắt đầu luôn cho nóng nhé mình sẽ chú thích theo từng dòng trong đoạn code phía dưới để các bạn dễ hiểu:

<!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>
    <h2>QuangNinhBay.Com Niềm vui là chia sẻ</h2>
    <input type="text" id="inpText">
    <!-- 
        DOM HTML: 
            Lấy và thay đổi nội dung bên trong phần tử HTML
            Lất và thay đổi thuộc tính của phần tử HTML
     -->
    <script>
        var h2 = document.querySelector('h2');  // tìm phần tử theo cú pháp selector (trả về thẻ h2) và gán giá trị trả về cho biến h2
        console.log(h2.innerHTML);  //log ra nội dung bên trong phần tử h2
        /*
            h2.innerHTML : lấy ra nội dung bên trong phần tử h2
        */

        h2.innerHTML = "Trần Tiến";   // thay đổi nội dung bên trong phần tử h2
        console.log(h2.innerHTML);  // log ra nội dung mới thay đổi của h2

        var inpText = document.querySelector('#inpText');   //tìm thẻ có id inpText và gán cho biến inpText
        console.log(inpText.type);
        /*
            log ra giá trị của thuộc tính bên trong phần tử vừa tìm được
            inpText.type : lấy ra giá trị của thuộc tính type
        */
        inpText.type = "submit";    // thay đổi giá trị của thuộc tính type từ text thành submit
        console.log(inpText.type);
        inpText.id = "linhtinh";    //thay đổi giá trị của thuộc tính id

        inpText.style.width = "200px";  //thay đổi giá trị thuộc tính css width 
        inpText.style.height = "200px";//thay đổi giá trị thuộc tính css height
        inpText.style.backgroundColor = "red";
        /*
            thay đổi giá trị thuộc tính background color
            Lưu ý: với những thuộc tính dài từ 2 chữ trở lên sẽ bỏ dấu gạch giữa và viết hoa chữ cái đầu tiên ngay sau dấu gạch giữa
                VD: background-color -> backgroundColor
                    border-radius -> borderRadius
        */
    </script>
</body>

</html>

Cảm ơn các bạn đã ghé thăm blog!