Hướng dẫn dùng getid trong PHP

Hướng dẫn dùng getid trong PHP

Nội dung chính

  • Tính tương thích của trình duyệt web
  • Trình duyệt trên máy tính
  • Trình duyệt trên thiết bị di động
  • Tham khảo:
  • Cách sử dụng
  • getElementById là gì
  • Tổng kết

Phương thức getElementById trả về phần tử có thuộc tính ID là giá trị được chỉ định.

Phương thức này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng gần như mọi lúc bạn muốn thao tác (hoặc lấy thông tin từ) một phần tử trên tài liệu của bạn.

Trả về null nếu không có phần tử nào có ID được chỉ định tồn tại.

ID phải là duy nhất trong một trang. Tuy nhiên, nếu có nhiều hơn một phần tử với ID được chỉ định tồn tại (trùng ID), phương thức getElementById() trả về phần tử đầu tiên trong mã nguồn.

Cú pháp

var element = document.getElementById(elementID)

Tham số:

elementID là dạng chuỗi, giá trị của thuộc tính ID của phần tử bạn muốn nhận về

Giá trị trả lại:

Một đối tượng Element được mô tả trong đối tượng DOM khớp với elementID, hoặc null nếu không tìm thấy phần tử nào phù hợp.

Ví dụ

Lấy phần tử có id=“demo” và thay đổi màu của nó:

var x = document.getElementById("demo"); // Get the element with id="demo"
x.style.color = "red"; // Change the color of the element

HTML



    
    getElementById example - daipho.com


    

Some text here

     

JavaScript

function changeColor(newColor) {
    var elem = document.getElementById('para');
    elem.style.color = newColor;
}

Kết quả

Tính tương thích của trình duyệt web

Trình duyệt trên máy tính

Trình duyệt Phiên bản tương thích
Chrome 1
Edge
FireFox 1
Internet Eplorer 5.5
Opera 7
Safari 1

Trình duyệt trên thiết bị di động

Trình duyệt Phiên bản tương thích
Android Webview 1
Chrome for Android 1
Edge Mobile
FireFox for Android
Opera 6
iOS Safari 1
Samsung Internet ?

Tham khảo:

  • Web APIs: Đối tượng Document
  • Web APIs: Đối tượng Node

Phương thức getElementById() sẽ trả về phần tử có thuộc tính ID được cung cấp. Phương thức này là một trong số những phương thức phổ biến nhất của HTML DOM, nó được sử dụng rất thường xuyên để thao tác hoặc lấy thông tin của form hoặc một phần tử bất kỳ.

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

Phương thức sẽ trả về Null nếu không có phần tử nào có thuộc tính ID được cung cấp.

Một ID chỉ nên được sử dụng cho một phần tử, tuy nhiên nếu có nhiều phần tử cùng sử dụng một ID, Phương thức sẽ trả về phần tử đầu tiên xuất hiện trên trang.

Cú pháp

Cú pháp: document.getElementById(elementID)

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

  • elementID là ID của phần tử sẽ được tìm kiếm.

Cách sử dụng

Định dạng màu chữ cho phần tử có id="result":



    
        
    
        

Học lập trình miễn phí tại freetuts.net

Đây là thẻ có id="result"

Tham khảo: w3schools.com

Hướng dẫn cách sử dụng getElementById trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getElementById để lấy một element trong DOM thông qua thuộc tính id của element đó sau bài học này.

getElementById là gì

getElementById hay còn gọi là document.getelementbyid trong JavaScript là một phương thức của đối tượng DOM, có tác dụng lấy một element từ trong DOM thông qua giá trị thuộc tính id của element đó.

Cú pháp sử dụng phương thức getElementById trong JavaScript như sau:

document.getElementById(id)

Trong đó đối số id của phương thức là giá trị thuộc tính id của element cần lấy (ví dụ: ‘example’ ). Phương thức getElementById sẽ trả về Element Object nếu tìm thấy element có id chỉ định, và sẽ trả về null nếu không tìm thấy element phù hợp.

Element Object là kiểu đối tượng dùng để thao tác với element trong JavaScript. Trong Element Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý element, ví dụ như thuộc tính textContent để lấy giá trị của element chẳng hạn.

Ví dụ cụ thể, để lấy element có giá trị thuộc tính id là example, chúng ta sẽ viết như sau:

let element = document.getElementById('example');
console.log(element.textContent);

Lưu ý, do trong một trang HTML thì mỗi giá trị id là duy nhất, chúng ta không thể đặt trùng tên id cho nhiều element được, nên khi dùng phương thức getElementById để lấy element thì kết quả trả về thông thường sẽ chỉ là một element duy nhất (nếu tìm thấy) mà thôi.

Trong trường hợp cùng một giá trị id lại được đặt trùng tên cho nhiều element, thì element đầu tiên được tìm thấy sẽ được trả về.

Mã mẫu

Sau đây hãy cùng tìm hiểu cách lấy một element từ trong DOM thông qua id của element đó bằng phương thức getElementById trong JavaScript.

html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng getElementByIdtitle>
head>
<body>

<p>Kế hoạch mua sắmp>

<p id="place">Ninh Bìnhp>
<p id="shopname">Shop mẹ và bép>

<button onClick="getElement();">Click và lấy element từ Idbutton>

<script>
function getElement(){
let element = document.getElementById('place');
console.log('Địa chỉ: ' + element.textContent);

element = document.getElementById('shopname');
console.log('Tên shop: ' + element.textContent);
}
script>
body>
html>

Trong mã HTML ở trên, chúng ta sẽ lấy 2 element có id là id="place"id="shopname" thông qua phương thức document.getElementById.

Sau khi lấy được element rồi, thông qua thuộc tính textContent chúng ta sẽ xuất ra màn hình nội dung textContent của các element đó.

Và kết quả:

Giống như ở trên, sau khi đã lấy được phần tử thông qua chỉ định id của nó bằng getElementById, chúng ta có thể sử dụng các thuộc tính hoặc phương thức khác của Element Object để xử lý phần tử được tìm thấy.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng getElementById 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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

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
Hướng dẫn dùng getid trong PHP

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.