Cách dùng parentElement trong Javascript

Trong bài này chúng ta sẽ tìm hiểu thuộc tính parentElement trong javascript, qua đó sẽ giúp bạn lấy được thẻ html parent của thẻ html hiện tại.

test php

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

Thuộc tính parentElement sẽ trả về thẻ HTML đang chứa thẻ hiện tại, hoặc trả về null nếu không có thẻ nào chứa thẻ hiện tại. Đây là một selector khá hay và được sử dụng rất nhiều.

var x = document.getElementById("myLI").parentElement;

Nếu trong jQuery thì ta viết như sau:

$('selector').parent();

Nhưng chúng ta đang học javascript nên tạm thời không nhắc đến jQuery nhé.

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

1. Cú pháp parentElement trong javascript

Đây là một thuộc tính chỉ đọc, tức là nó chỉ trả về một DOM object chứ không thể thiết lập DOM object. Cú pháp như sau:

parentElement = node.parentElement

Trong đó node là một DOM object, thường thì ta sử dụng các hàm dưới đây để truy vấn:

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

Ví dụ: Thay đổi css color cho thẻ div có id là #content.

let node = document.getElementById('content');
if (node.parentElement) {
    node.parentElement.style.color = "red";
}

2. Cách dùng parentElement trong javascript

Thuộc tính parentElement trả về phần tử cha của phần tử được chỉ định. Trong JS có một thuộc tính tương tự nữa, đó là parentNode.

Sự khác nhau giữa parentElement và parentNode, là parentElement trả về null nếu nút cha không phải là nút phần tử.

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

document.documentElement.parentNode; // Returns Document node
document.documentElement.parentElement; // Returns null (<html> không có parent node)

Trên là kiến thức cơ bản về thuộc tính parentElement trong js.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách dùng parentElement trong Javascript

1. Cú pháp parentElement trong javascript

2. Cách dùng parentElement trong javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng parentElement trong Javascript

1. Cú pháp parentElement trong javascript

2. Cách dùng parentElement trong javascript

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript