currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý | Laptrinhcanban.com

currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý

Hướng dẫn cách sử dụng thuộc tính currentScript trong JavaScrip. Bạn sẽ học được cách sử dụng currentScript để lấy Element chứa mã script đang được xử lý trong chương trình sau bài học này.

currentScript trong JavaScript

currentScript trong JavaScript là một thuộc tính của Document Object, có tác dụng lấy Element chứa đoạn mã script hiện đang được xử lý trong chương trình.

Cú pháp sử dụng currentScript trong JavaScript như sau:

document.currentScript

Thuộc tính currentScript sẽ trả về Element chứa mã script hiện đang được thực thi, hoặc là một giá trị null.

Lưu ý là thuộc tính này không tham chiếu tới các Element nếu mã script viết trong nó được chạy dưới dạng callback hay event handler. Thuộc tính chỉ tham chiếu nếu mã lệnh được gọi trực tiếp mà thôi.

Ví dụ cụ thể, chúng ta có mã HTML như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụル</title>
</head>
<body>

<p>Hello</p>

<script>
let element = document.currentScript;
console.log(element);
</script>

</body>
</html>

Khi chạy trang HTML này, nội dung Element chứa mã lệnh script đang thực thi sẽ được xuất ra màn hình console như sau:

currentScript trong JavaScript

Sau khi lấy element này, chúng ta có thể dùng các phương thức và thuộc tính trong Element Object để xử lý nó. Ví dụ, chúng ta có thể thêm một element được mô tả bởi một đoạn mã HTML vào đằng sau nó bằng cách dùng phương thức insertAdjacentHTML như sau:

<script>
let element = document.currentScript;
element.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
</script>

Mã mẫu

Sau đây hãy cùng xem cách dùng currentScript để lấy Element chứa đoạn mã script đang được thực thi, và xử lý element này như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ</title>
</head>
<body>

<p>Danh sách tên shop</p>

<script>
let element = document.currentScript;
let html =
'<ul id="shopinfo">'+
' <li id="item1">Shop bà Tám</li>' +
' <li id="item2">Shop mẹ và bé</li>' +
'</ul>'

document.currentScript.insertAdjacentHTML('beforebegin', html);
console.log(document.currentScript);
</script>

</body>
</html>

Trong mã HTML trên, chúng ta đã thêm Node mới có id="shopinfo" vào đằng trước element script chứa mã script đang được chạy, và in các mã script này ra màn hình console.

Và kết quả:

currentScript trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách dùng currentScript trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.