Phương pháp nào được sử dụng để truy cập các phần tử HTML?

Là một lập trình viên, cho dù bạn đang làm việc trên một dự án hay xây dựng một tập lệnh từ đầu, có một số phương thức DOM mà mọi lập trình viên nên biết. Tuy nhiên, các công cụ như MooTools hoặc jQuery có thể thực hiện các phương pháp này mà không có bất kỳ sự can thiệp nào của người dùng (ở hậu trường).  

Trong thế giới thực, cho dù bạn làm việc trong ngành CNTT hay làm việc tự do, bạn có thể phải làm việc trên các tập lệnh hiện có hơn là các dự án mới. Vì vậy, bạn có thể không được phép sử dụng thư viện hoặc công cụ.  

Dù lý do là gì, các phương thức DOM này là cơ bản và cần thiết. Bạn có thể phải sử dụng những phương pháp này trong suốt sự nghiệp của họ. Chủ yếu chỉ có mười điều quan trọng như sau

1) getElementbyId

getElementbyId là một phương thức để truy cập hầu như bất kỳ phần tử nào. Nó truy cập phần tử đầu tiên với ID được chỉ định

cú pháp

var myVariable = document.getElementById(“my_squad”);

Nó cũng có thể được sử dụng linh hoạt như sau

var myVariable = document.getElementById(mySquad);

Phương thức này đặt đối tượng cần truy cập vào một biến gọi là “myVariable”. myVariable cho phép chương trình của bạn truy cập trực tiếp vào đối tượng

Giả sử bạn cần tìm id “SY”, bạn chỉ cần sử dụng cú pháp trên & thay thế “my_element” bằng “SY”. Thứ hai, bạn cũng có thể áp dụng một số mã bổ sung trên getElementById như sau

var myVariable = document.getElementById(“SY”);
myVariable.style.display = “block”;
myVariable.style.backgroundColor = “#f00”;
myVariable.style.border = “solid 1 px #00f”;

Ở đây, đoạn mã trên sẽ hiển thị ở phông chữ khối với nền màu đỏ Hex & viền màu xanh lam. Vì vậy, sử dụng mã myVariable, bạn có thể thêm phông chữ và màu sắc. Rất nhiều người gặp rắc rối khi sử dụng getElementbyId thường là do những lỗi ngớ ngẩn

Xem xét ví dụ sau

myVariable = document.getElementByID(“my_squad”);

Ở đây nó có vẻ đúng, nhưng hãy nhớ rằng, “JavaScript là ngôn ngữ phân biệt chữ hoa chữ thường. ” Vì vậy, “ID” sẽ không hoạt động thay cho “Id. ”

Thông thường, những người mới bắt đầu mắc lỗi này và thấy các phương pháp trở nên phức tạp. Trong khi đó, mã có thể trông hơi lộn xộn vì bạn cần áp dụng id trong HTML của mình. Vì vậy, phương pháp này mạnh mẽ nhưng có thể trông lộn xộn vì nó khuyến khích bạn làm hỏng phần đánh dấu của mình

2) getElementsByTagName

Trong phương pháp trước, chúng tôi có thể có một số lỗi. Nhưng phương pháp này có thể loại bỏ những vấn đề đó. getElementsByTagName cho phép bạn tìm kiếm tất cả các phần tử có tên thẻ được chỉ định trên trang của bạn.  

var myLinkcollection = document.getElementsByTagName(“abc”);

Ở đây myVariable được thay thế bằng “myLinkCollection”. myLinkCollection chứa tất cả các phần tử trên trang. Về mặt hình ảnh, nó giống như một mảng chứa các phần tử. Ở đây bạn cũng có thể thêm một số tính năng bổ sung. Sau đây là một ví dụ

var myLinkCollection = document.getElementsByTagName(“abc”);
for (i = 0; i < myLinkCollection.length; i++) {
    if (myLinkCollection[i].className == “std_class”) {
        myLinkCollection[i].onclick = function() {
            this.style.backgroundColor = “#f00”;
        }
    }
}

Đoạn mã trên không phức tạp nếu bạn biết cơ bản và sử dụng các phương thức. Ở đây, khi bạn gom link vào một mảng i. e. , myLinkCollection, chúng tôi sử dụng vòng lặp for để điều hướng

Tiếp theo, nếu vòng lặp đặt điều kiện nếu class_Name bằng “std_class”, thì sẽ có một trình kích hoạt được gắn vào nó bằng cách sử dụng “onclick. ” Trình kích hoạt là “Màu nền. ”

Nếu chúng ta có thể sử dụng liên kết trong getElementById thì tại sao chúng ta nên sử dụng getElementByTagName? . Bởi vì nó có thể có “id” nhưng không có “ids. ” Vì vậy, với mỗi phần tử, bạn cần sử dụng nhiều phần tử getId. Trong khi đó, ByTagName cho phép bạn có nhiều liên kết có cùng tên lớp. Chúng tôi có thể đặt trình kích hoạt onclick một cách chính xác

3) Nút

Bất kỳ phần tử nào trên trang bao gồm văn bản & khoảng trắng của cấu trúc DOM được gọi là “NODE. ” Các nút có thể nằm giữa các thẻ XHTML

Các nút có sẵn trong DOM

• nút. nút con
• nút. đứa trẻ đầu tiên
• nút. con cuối cùng
• nút. cha mẹNode
• nút. tiếp theoAnh chị em
• nút. trướcAnh chị em

Giả sử chúng ta có XHTML sau

    
 Product Number One
    
 Product Number Two
 
    
 Product Number Three
    
 Product Number Four

Bây giờ nếu chúng tôi muốn truy cập “Prod1”, chúng tôi có thể thực hiện bằng 2 cách

Sử dụng ChildNodes

var myLinkList = document.getElementsById(“list”)
var myFirstProduct = myLinklist.childNodes[0].childNodes[0];
alert(myFirstLink.className);

Sử dụng FirstChild

Cả hai mã sẽ hiển thị cùng một kết quả vì cùng một phần tử được truy cập. Các trình duyệt khác nhau có thể cho kết quả đầu ra khác nhau

Ví dụ: đầu ra của Firefox sẽ khác với Chrome vì nó xem các khoảng trắng dưới dạng các nút. Các nút có thể được giải thích khác nhau. Vì vậy, hãy chọn lọc & cẩn thận trong khi sử dụng & kiểm tra các nút

4) tạo phần tử

Đúng như tên gọi, nó được sử dụng để tạo một phần tử và đặt nó ở bất kỳ đâu trong cấu trúc DOM. Hãy thêm một phần tử vào ví dụ trước

var myNewListItem = document.createElement(“li”)
var myNewProd = document.createElement(“prod5”);

Tại đây một phần tử mới sẽ được tạo và thêm vào cấu trúc DOM

5) appendChild

Trước đây chúng tôi đã tạo phần tử, bây giờ chúng tôi sẽ thêm hai phần tử vào danh sách liên kết của mình bằng cách sử dụng appendChild

var myVariable = document.getElementById(mySquad);

Phía trên mã thêm thẻ neo bên trong
phần tử tại điểm cuối. Nếu chúng ta có thể tạo hoặc nối thêm, thì chúng ta cũng có thể xóa nó

6) loại bỏTrẻ em

để loại bỏ tác dụng của appendChild, chúng ta có thể sử dụng removeChild. Ở đây, chúng ta cần xóa mục danh sách vì nó bao gồm cả “list item & anchor mới được tạo. ” Và, nếu chúng tôi không tạo một phần tử mới, nó có thể xóa mục danh sách cuối cùng

Không quan trọng nó được tạo gần đây hay nó đã tồn tại. Sau đây là mã để loại bỏ phương thức Con

var myVariable = document.getElementById(mySquad);

7) nhận thuộc tính

Với phương thức getAttribute, bạn có thể truy cập giá trị của bất kỳ thuộc tính nào của phần tử trên trang. Giả sử có một id với thuộc tính abc có giá trị “Tốt nhất. ”

Bây giờ, nếu chúng ta muốn lấy thuộc tính đó, chúng ta sẽ sử dụng getAttribute.  

Sau đây là một ví dụ

var myVariable = document.getElementById(mySquad);

Bây giờ getAttribute sẽ lấy giá trị từ “abc,” i. e. , "Tốt. ” Phương pháp này được sử dụng để nhắm mục tiêu các liên kết với các thuộc tính và giá trị cụ thể.  

8) setAttribute

Một phương pháp hữu ích để thay thế các giá trị trong thuộc tính. Gán một giá trị mới cho một thuộc tính hiện có được thực hiện bằng cách sử dụng setAttribute. Giả sử chúng ta có thuộc tính “abc” chứa giá trị “Tốt nhất. ”

Bây giờ chúng tôi muốn thay đổi giá trị thành “Awesome. ” Sau đây là một mã phù hợp

var myVariable = document.getElementById(mySquad);

Tại đây, giá trị bên trong thuộc tính abc đã được thay thế. Phương pháp này không thể thay đổi thuộc tính;

9) tài liệu. các hình thức

Phương thức này được sử dụng để truy cập các bộ sưu tập “biểu mẫu” của cấu trúc DOM. Thông thường, mọi trang web đều sử dụng một “tài liệu. biểu mẫu” cú pháp. Chúng tôi có thể đã sử dụng getElementById hoặc TagName, nhưng để truy cập biểu mẫu, phương pháp này là tốt nhất

Thí dụ

var myVariable = document.getElementById(mySquad);

Cùng tìm hiểu trạng thái “Checked”

var myVariable = document.getElementById(mySquad);

Ở đây, kết quả sẽ là “True. ” Nhưng nếu kiểm tra tương tự được thực hiện trên tùy chọn 2 hoặc 3, chúng tôi sẽ nhận được “Sai. ”

10) bên trongHTML

Phương thức cuối cùng & cuối cùng là InternalHTML, một phương thức thú vị. Nó được hỗ trợ trên hầu hết mọi trình duyệt hoặc nền tảng. Tuy nhiên, đó là một yếu tố không chuẩn.  

Thông thường, nó được sử dụng để truy cập và ghi nội dung bên trong các phần tử XHTML. Sau đây là một mã để làm cho bạn hiểu rõ hơn

var myVariable = document.getElementById(mySquad);

Bây giờ, phần tử trên trang có tên id là “abc” sẽ có nội dung sau giữa các thẻ i. e. , “Đây là các phương thức DOM thiết yếu trong JavaScript. ” Sử dụng InternalHTML, chúng ta có thể đọc hoặc nối văn bản trực tiếp mà không có văn bản lộn xộn.  

Phần kết luận

Đây là Top 10 phương thức JS DOM thiết yếu mà một lập trình viên nên biết. Tôi đã cố gắng trình bày tối đa chúng bằng các ví dụ và giải thích đơn giản. Và, các ví dụ khá đơn giản và dễ hiểu

Cho dù bạn là người mới bắt đầu hay lập trình viên trung cấp, những phương pháp này đều mạnh mẽ và hữu ích. Mặc dù có những thư viện & nền tảng thực hiện những công việc cần thiết ở hậu trường, nhưng bạn vẫn nên biết những phương pháp này.  

4 phương pháp tìm phần tử HTML là gì?

Làm cách nào để truy cập các phần tử HTML bằng JavaScript?

Làm cách nào để truy cập các phần tử HTML trong nút JS?

Chúng ta có thể sử dụng phương thức Java nào để tìm nạp giá trị từ phần tử HTML?