Thay đổi thuộc tính phần tử trong DOM

Khi bạn đã lựa chọn được phần tử trong DOM (chọn phần tử trong DOM), bạn có thể thay đổi thuộc tính liên quan đến phần tử, ví dụ thay đổi nội dung bằng thuộc tính innerHTML (phần tử HTML có những thuộc tính gì)

Ví dụ: phần tử HTML <img> như đã biết có thuộc tính src để chỉ ra URL hình ảnh mà thẻ đó hiện thị, đã biết nó có thuộc tính với tên là src thì sau khi có phần từ này từ DOM, bạn có thể đọc, gán thuộc tính và nó sẽ cập nhật lại trang HTML nếu gán

<img id="myimg" src="orange.png" alt="" />

<script>
    var el = document.getElementById("myimg");
    el.src = "apple.png";
</script>

Tương tự, thay đổi thuộc tính href trong phần tử liên kết <a>

<a href="http://www.example.com">Some link</a>

<script>
    var el = document.getElementsByTagName("a");
    el[0].href = "https://xuanthulab.net";
</script>

Như vậy bạn thấy thông qua JavaScript bạn có thể thay đổi mọi thuộc tính của phần tử HTML

Đổi style phần tử (CSS)

style của các phần tử HTML có thể được thay đổi thông qua JavaScript, để thay đổi truy cập vào thuộc tính style và thay đổi các thông số yêu cầu:

<div id="demo" style="width:200px">Nội dung Ví dụ</div>

<script>
  var x = document.getElementById("demo");
  x.style.color = "6600FF";
  x.style.width = "100px";
</script>

Ví dụ trên đã thay đổi color và width của phần tử thẻ div

Tất cả các thuộc tính CSS đều có thể cập nhật bằng JavaScript. Điều bạn cần nhớ là không được sử dụng ký hiệu - trong tên thuộc tính, mà bạn cần chuyển tên dạng CSS thành dạng tên camelCase ví dụ: trong CSS thuộc tính background-color thì trong JavaScript thuộc tính này là backgroundColor

Ví dụ sau tìm tất cả phần tử <p> sau đó đổi màu sang màu đỏ, thay cỡ chữ là 30px.

<button onclick="changePcolor()">Thay đổi thẻ P</button>
<script>
    function changePcolor() {
        var plements = document.getElementsByTagName('p');
        for (var i = 0; i <= plements.length - 1; i++)  {
            var element = plements[i];
            console.log(element);
            element.style.color = "red";
            element.style.fontSize = "30px";
        }
    }
</script>