Javascript

DOM in JS #3: Traversing elements

DOM in JS 3 Traversing elements

1. Mở bài

Như ở hai phần trước mình đã giới thiệu với các bạn cơ bản về DOM cũng như là cách query trực tiếp Element mà bạn muốn. Thì trong phần này mình sẽ giới thiệu đến các bạn cách query element thông qua một Element khác đã biết, qua quan hệ cha con, anh em (hay các bạn cũng có thể hiểu là kiểu gia đình ý – nói vậy cho dễ nhớ thôi ^^).

Đó chính là các thuộc tính parentNode, parentElement, nextSibling, nextElementSibling, previousSibling, previousElementSibling, firstChild, firstElementChild, lastChild, lastElementChild, childNodes, children. Nhưng mình sẽ chia là 3 phần chính là Parent, Sibling và Children thôi nhé (Vậy đi cho dễ hiểu – đúng kiểu gia đình luôn).

2. Chi tiết

Get the Parent Element:

ParentNode là một thuộc tính dùng để get ra node cha của một Node, trong trường hợp node cha tồn tại thì ta sẽ nhận được node cha đó, còn trong trường hợp node cha không tồn tại thì sẽ return null. Dưới đây là syntax bạn có thể tham khảo.

let parent = node.parentNode;

Ở đây, chúng ta sẽ có hai thuộc tính ParentNode và ParentElement, các bạn cũng có thể dùng nó same same nhau. Nhưng nó có chút khác biệt, parentNode có phần nào đó bao quát hơn parentElement vì các bạn có thể xem lại bài đầu Element chỉ là một type của Node thôi và vì vậy phổ biến hơn người ta vẫn dùng parentNode. Hãy mở trình duyệt F12 và kiểm tra ngay nhé.

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

document.documentElement.parentNode.nodeType // 9
document.documentElement.parentElement.nodeType // Cannot read property 'nodeType' of null

Siblings:

Ở đây, bạn có thể hiểu các Element cùng cấp với nhau (Cùng là con của một Element) thì đều có quan hệ anh em với nhau. Tùy thuộc vào vị trí thằng nào đứng trước thằng nào, mà sẽ chia ra làm vị trí của nó và chia ra làm thằng nào là con đầu tiên, thằng nào là con cuối cùng. DOM cho chúng ta hai thuộc tính để lấy Element kiểu này đó là nextElementSiblingpreviousElementSibling. Bạn đọc tên chắc cũng hiểu được phần nào rồi, hãy cùng tham khảo syntax của nó nhé.

let prevSibling = currentNode.previousElementSibling;
let nextSibling = currentNode.nextElementSibling;

Với cả hay trường hợp nếu query ra được Element thì nó sẽ return ra Element đó, nếu không thấy nó sẽ return null. Riêng đối với previousElementSibling nếu nó là First Element (First children) rồi thì sẽ query ra là null (Tất nhiên nó là thằng đầu rồi thì làm sao mà có còn thằng nào trước nó được nữa). Tương tự với thuộc tính nextElementSibling nếu currentNode là Last Element (last children) rồi thì không thể còn thằng nào sau nó nữa lên sẽ cho kết quả là null.

Bên trên là Node type là Element, nhưng bạn có có thể dùng với thuộc tính bao quát hơn rất nhiều, đó chính là nextSiblingpreviousSibling, để từ đó thao tác với những loại type khác.

let prevSibling = currentNode.previousSibling;
let nextSibling = currentNode.nextSibling;

Child Elements:

Các thuộc tính này dùng để query đến element con, nghĩa là ngay sau một thằng Element nào đó. (Con trực tiếp). Hãy cùng xem syntax để hiểu phần nào đó.

let firstChild = parentElement.firstChild;
let firstElementChild = parentElement.firstElementChild;
let lastChild = parentElement.lastChild;
let lastChild = parentElement.lastElementChild;
let children = parentElement.childNodes; // [NodeList]
let children = parentElement.children; // [HTMLCollection]

Cũng như các phần ở trên thì đây là các thuộc tính return ra các node hoặc element, tuy nhiên có 2 phương thức cuối mình có comment rồi đó nó sẽ return ra các kiểu khác hơn một chút.

Còn các tính chất khác tương tự nhé, như tên các thuộc tính đã mô tả rất rõ rồi đó ^^. firstChild sẽ cho kết quả là node đầu tiên, firstElementChild sẽ cho ta element đầu tiên, trong trường hợp không có giá trị trả về thì sẽ nhận được null (Tương tự với lastChild và lastElementChild nhé). Đối với trường hợp con của parent chỉ có 1 phần tử thì chúng ta sẽ nhận được phần tử đó khi sử dụng 1 trong hai thuộc tính firstChild hoặc lastChild nhé. Riêng đối với childNodes hoặc chidren thì nếu không có phần tử nào, chúng ta sẽ nhận được một array rỗng.

3. Kết luận

Thường khi đi làm chắc bạn sẽ ít gặp những trường hợp cần dùng đến những thuộc tính này của DOM. Tuy nhiên, đây đều là những phần rất cơ bản để bạn hiểu hơn về JS, cũng như là biết ơn Framework hay thư viện đã cho bạn những gì nhé. Hiểu cơ bản mới có cái móng chắc được và từ đó có thể xây nhà cao và vững.

Mong là những phần mình vừa trình bày ở trên giúp được bạn điều gì đó ^^ để tự tin hơn, thấy JS thú vị hơn và đi phỏng vấn Offer được lương cao hơn.

Cuối cùng thì See you soonnnnn!

4. Tham khảo

# JavaScript Get the Parent Element parentNode
# HTML DOM parentNode Property
# HTML DOM parentElement Property
# Difference between DOM parentNode and parentElement

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments