Trong bài này chúng ta sẽ tìm hiểu thuộc tính innerHTML trong Javascript, đây là một thuộc tính có sẵn trong các node object. Show  Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Công dụng của innerHTML là giúp ta lấy nội
dung hoặc thiết lập nội dung cho một node html nào đó. Nếu bạn sử dụng jQuery thì có phương thức 1. Cú pháp innerHTML trong javascriptCú pháp của innerHTML như sau: // lấy nội dung let content = node.innerHTML; // Gán nội dung node.innerHTML = newContent; Trong đó: Bài viết này được đăng tại [free tuts .net]
2. Cách dùng innerHTML trong javascriptVí dụ innerHTML javascript: Giả sử ta có đoạn code HTML như sau. <div id="node">
Học JS tại freetuts.net
</div>Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML. let node = document.getElementById('node');
// lấy nội dung
let content = node.innerHTML;
// Gán nội dung
node.innerHTML = "Học JS Node tại freetuts.net";Trên là những thông tin bạn cần biết về thuộc tính innerHTML trong javascript. Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html. Nó được sử dụng chủ yếu trong các trang web để tạo ra html động như form đăng ký, form nhận xét, liên kết, v.v. Ví dụ tạo biểu mẫu html khi người dùng nhấp vào button. Trong ví dụ này, chúng ta tự động viết biểu mẫu html bên trong thẻ div có id="mylocation". Chúng ta xác định vị trí này bằng cách gọi phương
thức document.getElementById(). <script type="text/javascript">
function showcommentform() {
var data = "Name:<input type='text' name='name'>"
+ "<br>Comment:<br><textarea rows='5' cols='80'></textarea>"
+ "<br><input type='submit' value='Post Comment'>";
document.getElementById('mylocation').innerHTML = data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML<html>
<head>
<title>First JS</title>
<script>
var flag = true;
function commentform() {
var cform = "<form action='Comment'>"
+ "Enter Name: <br><input type='text' name='name'/><br>"
+ "Enter Email: <br><input type='email' name='email'/><br>"
+ "Enter Comment: <br><textarea rows='5' cols='70'></textarea><br>"
+ "<input type='submit' value='Post Comment'/>"
+ "</form>";
if (flag) {
document.getElementById("mylocation").innerHTML = cform;
flag = false;
} else {
document.getElementById("mylocation").innerHTML = "";
flag = true;
}
}
</script>
</head>
<body>
<button onclick="commentform()">Comment</button>
<div id="mylocation"></div>
</body>
</html>
Bài viết hôm nay sẽ giới thiệu đôi nét về phương thức getElementById trong JavaScript. Phương thức này rất phổ biến trong DOM HTML, và khi không sử dụng jQuery. Vậy, getElementById là gì? Nói đơn giản, getElementById() sẽ trả về phần tử có thuộc tính id được chỉ định. Nếu có nhiều phần tử sử dụng cùng một id thì nó sẽ trả về phần tử đầu tiên. Còn nếu không có phần tử nào có id chỉ định thì sẽ trả về null. Cách dễ làm quen nhất chính là xem ví dụ. Nhờ phương thức getElement mà ta có thể lấy được dữ liệu mình mong muốn trong thẻ, đồng thời trên ví dụ mình cũng đề cập đến cách sử dụng css khác, mới đầu mình cũng không quen nhưng bây giờ cảm thấy rất thuận tiện vì có những trường hợp phải sang styles.css tìm id để thay đổi – tìm nơi để sửa là một cực hình, mà hiện tại chỉ cần .style.thuộctính là xong. Ngoài phương thức getElementById() còn có các phương thức khác như:
document.getElementsByTagName(tag)Thay vì trả về phần tử id chỉ định, thì ở đây nó sẽ trả về các thẻ được chỉ định. Bạn lưu ý sẽ thấy getElements có s, nghĩa nó có thể lấy nhiều thẻ cùng lúc, chứ nếu phải lấy từng cái id chắc phải lấy đến mùa quýt năm sau luôn. Phương thức này cũng rất tiện, chỉ cần một dòng một lúc đã lấy được nhiều thẻ mình cần. Còn trường hợp có thẻ bạn muốn tìm và lấy, nhưng trùng với các thẻ khác thì sao? Hãy nghĩ ngay đến cách lấy classname, lấy tên class là biện pháp tối ưu đỡ đau đầu cho bạn. document.getElementsByClassName(classname)Phương thức getElementsByClassName() sẽ trả về các tên class đã chỉ định, dù các thẻ khác nhau đi chăng nữa nhưng chỉ cần có tên class giống nhau thì phương thức này sẽ lấy tất tần tật những thẻ chứa tên class đó. Các bạn thấy đó, kể cả không chung id, không cùng một thẻ nhưng vẫn lấy được tên class mình mong muốn. document.getElementsByName(name)Phương thức sẽ trả về name đã được chỉ định, thường rất hiếm sử dụng nên mình cũng chỉ nhắc sơ qua thôi. Khi bạn lấy được thuộc tính mình muốn rồi, nhưng lại muốn thay đổi giá trị trong đó thì hãy đến ngay với innerHTML! .innerHTML: thay đổi giá trị thẻ đã chỉ địnhThông qua phương thức innerHTML, ta đã ghi đè lên id chỉ định và gán giá trị thay đổi dữ liệu của thẻ. InnerHTML vừa chèn, vừa lấy dữ liệu trên đoạn code HTML mình muốn, nhưng nó cũng tràn đầy nguy cơ bảo mật, nên hạn chế sử dụng hoặc dùng textContent thay thế (chỉ đơn giản là chèn text). Mở rộng thêm một xíu, khi bạn muốn trả về phần tử đầu tiên trong tất cả kết quả tìm thấy ở CSS selector đã cho, thì phương thức querySelector() là sự lựa chọn dành cho bạn. querySelector()Trả về phần tử đầu sau tất cả cuộc tìm kiếm của CSS selector, ví dụ minh họa dưới đây sẽ giúp bạn hiểu đôi chút về phương thức này. Ôi mà sử dụng querySelector() bạn phải tuân thủ điều này, class => (‘.tên class’), còn id => (‘#tên id’). Hoặc nếu bạn muốn trả về tất cả phần tử trong kết quả đã tìm ở CSS selector thì bạn có thể dùng querySelectorAll()[0]. Cho đến nay thì querySelectorAll() vẫn là phương thức linh hoạt nhất mà mọi người hay dùng. Nếu bạn hứng thú thì hãy tìm hiểu thêm về nó. Hi vọng các ví dụ đơn giản của mình sẽ giúp mọi người hiểu đôi nét về các phương thức này. Cảm ơn mọi người đã đọc đến đây. Huyền Nguyễn PLT SOLUTIONS. |
