Dùng Javascript thao tác với HTML

-Thay đổi nội dung HTML

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

-Thay đổi thuộc tính css của HTML

 <p>change bk color of html-body</p>

<button onclick="document.body.style.backgroundColor='red'">change bk-color</button>

--------------------------------------------
<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button> 

-Ẩn/ Hiện thành phần elements (p, h1,...) của html

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button> 
 -------------------------------------
<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button> 

-Gọi hàm javascript

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
</script>

<p>When you click "Try it", a function will be called.</p>
<p>The function will display a message.</p>
<p id="demo"></p>

<button onclick="myFunction()">Try it</button>

-Hàm có tham số truyền vào:

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<p id="demo"></p>

<script>
function myFunction(name,job) {
  document.getElementById("demo").innerHTML = "Welcome " + name + ", the " + job + ".";
}
</script>


-Tạo object trong javascript

<p id="demo"></p>

<script>

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script> 

//ta có thể truy xuất thuộc tính của đối tượng bằng lệnh:
person["firstName"] + " " + person["lastName"];

--Truy xuất thuộc tính hàm như 1 method(phương thức)

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>

-Gọi  hàm hiển thị thời gian có sẵn

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p> 

- Sự kiện onclick kết hợp với this

<button onclick="this.innerHTML=Date()">The time is?</button>