Hướng dẫn dùng dom element trong PHP
Trong bài này chúng ta sẽ tìm hiểu đến DOM Element Javascript, ta sẽ học cách truy xuất đến một thẻ HTML bất kì thông qua các thuộc tính như 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. DOM element trong Javascript là tổng hợp những hàm như getElementById, getElementsByTagName, getElementsByClass và querySelectorAll. Nhưng hàm này có công dụng là truy xuất đến các thẻ trong tài liệu html. Cụ thể như sau. 1. Sử dụng getElementById để tìm theo IDĐể truy xuất tới một thẻ HTML theo ID ta sử dụng cú pháp sau: var element = document.getElementById('idname'); // Lấy thẻ input var element = document.getElementById('website'); // Lấy giá trị của thẻ input document.write(element.value); 2. Sử dụng getElementsByTagName để tìm theo tên thẻ htmlTên thẻ HTML chính là tên các thẻ như Bài viết này được đăng tại [free tuts .net] var element = document.getElementsByTagName('tagname'); // Lấy thẻ input var element = document.getElementsByTagName('input'); // Lấy giá trị của thẻ input document.write(element[0].value); Bạn có hiểu ý nghĩa của đoạn code 3. Sử dụng getElementsByClassName để tìm theo tên classĐể tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau: var element = document.getElementsByClassName('input'); Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy. // Lấy thẻ input var element = document.getElementsByClassName('website'); // Lấy giá trị của thẻ input document.write(element[0].value); 4. Sử dụng querySelectorAll để tìm theo CSS selectorKhi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy javascript DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll. Và đây là cú pháp sử dụng: var element = document.querySelectorAll("selector css"); Ví dụ: Mình có một đoạn mã HTML như sau: Câu hỏi đặt ra là làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có Trước tiên ta quay
lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy. var element = document.querySelectorAll("div input.website"); Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects. Lời kết: Trên là 4 cách thông thường chúng ta hay sử dụng trong javascript để truy xuất tới một thẻ HTML bất kì. Nếu sau này làm việc với jQuery thì bạn không cần phải nhọc nhằn như thế nữa mà nó có những phương thức ngắn gọn hơn rất nhiều. Phương thức 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 Một Cú phápCú pháp: Bài viết này được đăng tại [free tuts .net]
Cách sử dụngĐịnh dạng màu chữ cho phần tử có
Tham khảo: w3schools.com Phương thức 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ề 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ápvar element = document.getElementById(elementID) Tham số:
Giá trị trả lại: Một đối tượng Ví dụLấy phần tử có var x = document.getElementById("demo"); // Get the element with id="demo" x.style.color = "red"; // Change the color of the element HTML
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 webTrình duyệt trên máy tính
Trình duyệt trên thiết bị di động
Tham khảo:
Phương thức 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 Một Cú phápCú pháp: Bài viết này được đăng tại [free tuts .net]
Cách sử dụngĐịnh dạng màu chữ cho phần tử có
Tham khảo: w3schools.com |