Lập trình WordPress Hosting Thủ thuật Tin học Môn học
PHẦN CƠ BẢN
Javascript là gì? Khai báo biến trong Javascript Alert - confirm và prompt trong JS Các toán tử trong Javascript Lệnh if else trong javascript Lệnh switch case trong Javascript Function trong Javascript Biến toàn cục và cục bộ trong JS Cách dùng Inspect Element Hàm console.log trong Javascript setTimeout và setInterval trong JS
VÒNG LẶP
Vòng lặp for trong Javascript Vòng lặp while/do while trong JS Break/Continue trong Javascript
DATA TYPES
String trong Javascript Hàm xử lý chuỗi trong Javascript Mảng trong javascript Các hàm xử lý mảng trong JS Mảng hai chiều trong Javascript Number trong Javascript Date trong Javascript Xử lý ngày tháng trong Javascript Typeof trong Javascript
EVENTS
Sự kiện trong Javascript Return true/false trong Javascript Sự kiện onload trong Javascript addEventListener trong Javascript RemoveEventListener Javascript Sự kiện click trong Javascript Sự kiện hover trong Javascript Sự kiện onmouseout trong js Sự kiện ondbclick trong Javascript Sự kiện mousemove Javascript Sự kiện Submit trong Javascript
DOM
DOM là gì? DOM Element trong javascript DOM HTML trong Javascript DOM CSS trong Javascript DOM Nodes trong Javascript Sử dụng thuộc tính html trong js
BOM
BOM Javascript là gì? Window trong Javascript Location trong Javascript History trong Javascript Cookie trong Javascript Navigator trong Javascript Screen trong Javascript
OBJECT
Object trong Javascript Thao tác với Object Javascript Object trototype trong Javascript
BỔ SUNG
Hoisting trong Javascript Use strict trong javascript RegEx trong Javascript localStorage và sessionStorage
THỰC HÀNH
Góp ý kiến
JAVASCRIPT CĂN BẢN
Hàm String isspace() trong Python
CÁC CHỦ ĐỀ
Javascript căn bản
Bài tập Javascript
Javascript nâng cao
Google Maps
Các hàm Javascript
BÀI MỚI NHẤT
cac ham xu ly chuoi trong javascript gif Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) bai tap javascript jpg Chia lấy phần dư / chia lấy phần nguyên trong javascript bien va khai bao bien trong javascript gif Các cách khai báo biến trong Javascript su kien event trong javascript gif Các sự kiện (Event) trong Javascript huong tao thanh search bar bang css png Hướng tạo thanh search bar bằng CSS js function jpg Hàm array.slice() trong Javascript bai tap javascript jpg Cách kiểm tra số nguyên dương trong javascript javascript can ban gif Tính tổng hai số bằng Javascript (cộng hai số)
MỚI CẬP NHẬT
codeigniter gif Cách khai báo biến trong PHP, các loại biến thường gặp cai dat vertrigo server gif Download và cài đặt Vertrigo Server hoc html gif Thẻ li trong HTML hoc html gif Thẻ nav trong HTML5 tim hieu doi tuong article trong html5 gif Thẻ article trong HTML5 tao template html5 dau tien gif Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên dung the img trong html de tao hinh anh gif Cách dùng thẻ img trong HTML và các thuộc tính của img dung the a trong html de tao links gif Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng
Home > Javascript > Javascript căn bản > DOM HTML trong Javascript, lấy nội dung trong thẻ html

DOM HTML trong Javascript, lấy nội dung trong thẻ html

Trong bài này chúng ta sẽ tìm hiểu về DOM HTML trong Javascript, đây là nhóm DOM dùng để thay đổi nội dung thẻ HTML, cũng như thay đổi các thuộc tính của thẻ HTML.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Khi làm việc với Javascript thì việc lấy nội dung bên trong của một thẻ HTML là rất thường xuyên, và đôi khi bạn cũng cần gán nội dung vào các thẻ HTML để tạo các thông báo đến người dùng.

Ví dụ, bạn xây dựng chức năng validate dữ liệu của form đăng ký thành viên. Bạn có thể sử dụng hàm alert để thông báo những vi phạm của người dùng. Nhưng chuyên nghiệp hơn thì bạn sẽ tạo ra những thông báo trực tiếp trên trang html, bằng cách sử dụng javascript để bổ sung nội dung lỗi vào các vị trí đã xác định từ trước.

1. Lấy nội dung trong thẻ HTML bằng Javascript

Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:

Bài viết này được đăng tại [free tuts .net]

document.getElementById("content").innerHTML

Trong đó innerHTML chính là thuộc tính của đối tượng html, công dụng của nó là dùng để lấy hoặc gán giá trị cho một thẻ html.

Để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:

document.getElementById("content").innerHTML = "<h1>Nội dung</h1>";

Ví dụ: Trong ví dụ này ta sẽ viết chương trình thay đổi nội dung bên trong của một thẻ div, và lấy nội dung bên trong của thẻ div đó.

Demo RUN 
<html>
  <body>
    <script language="javascript">
      // Hàm thiết lập nội dung cho thẻ div#content
	  function set_content()
      {
      	document.getElementById("content").innerHTML = "<h1>Nội dung đã được thay đổi</h1>";  
      }
      
      // Hàm lấy nội dung cho thẻ div#content
      function get_content()
      {
      	var html = document.getElementById("content").innerHTML;
        alert("Nội dung cần lấy là: " + html);        
      }
      
    </script>
    <div id="content">Nội dung của thẻ DIV</div>
    <input type="button" value="Lấy nội dung" id="get_content" onclick="get_content()" />
    <input type="button" value="Thay đổi nội dung" id="set_content" onclick="set_content()" />
  </body>
</html>

2. Thay đổi thuộc tính thẻ html bằng Javascript

Để thay đổi giá trị của thuộc tính HTML thì ta sử dụng cú pháp như sau:

document.getElementById("element").attributeName = "new value";

Để lấy giá trị của thuộc tính HTML ta sử dụng cú pháp sau:

document.getElementById("element").attributeName;

Trong đó attributeName là tên của thuộc tính mà bạn cần xử lý. Tùy vào mỗi thẻ html mà có các thuộc tính khác nhau. Dưới đây là danh sách các thuộc tính thường dùng nhất.

Quá đơn giản phải không nào, rất giống với cách thay đổi và lấy nội dung bên trong thẻ HTML. Từ đây có thể suy ra rằng trong Javascript để thiết lập (set) và lấy (get) thì sử dụng chung một cú pháp, chỉ khác nhau ở chỗ gán bằng và không có gán bằng.

Ví dụ: Xây dựng chương trình khi click vào một button thì chuyển nó thành textbox, và tiếp tục click vào textbox thì sẽ đổi thành button

Demo RUN 
<html>
    <body>
        <script language="javascript">
          function change()
          {
             // Lấy đối tượng
             var object = document.getElementById("object");
         
             // lấy thuộc tính type
             var type = object.type;
		
             // kiểm tra thuộc tính type và thay đổi
            if (type == "button"){
          
               object.type = 'text';
            }
            else{
                object.type = "button";
            }
        
          }
        </script>
        <input type="button" value="CLick me" onclick="change()" id="object" />
    </body>
</html>

3. Lời kết

Như vậy là bạn đã biết hai cách xử lý thuộc tính và nội dung của thẻ HTML bằng javascript rất thông dụng rồi đấy, thực tế bạn có thể sử dụng những mánh khóe để xử lý bài toán một cách tốt hơn. Ví dụ bạn cần bổ sung một đoạn text vào trong một thẻ HTML thì sẽ không có hàm nào bổ trợ, tuy nhiên bạn có thể sử dụng một mẹo nhỏ thế này:

var content_append = 'nội dung cần thêm vào';

// Lấy đối tượng
var object = document.getElementById("object");

// Lấy nội dung hiện tại
var content_current = object.innerHTML;

// Bổ sung nội dung vào đối tượng
object.innerHTML = content_current + content_current;

Đấy, cho nên việc lập trình là vô vàn hướng giải và việc lựa chọn một hướng đi đúng mới là vấn đề. Và qua bài này bạn thấy sức mạnh của DOM rồi phải không nào cheeky

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Giới thiệu Liên hệ Chính sách Điều khoản

Thủ thuật

Máy tính Game Điện thoại Ứng dụng

Link hay

Học PHP Học Javascript Học Python Học Java

Liên kết

Tiếng Anh Văn học Toán
Copyright © 2021. Phát triển bởi Freetuts Team.
Top