Hướng dẫn javascript get parent of this - javascript lấy cha của cái này

Để có được nút cha của phần tử HTML, bạn có thể sử dụng thuộc tính parentNode. Thuộc tính này trả về nút cha của phần tử được chỉ định dưới dạng đối tượng Node.

Hãy để chúng tôi nói rằng bạn có mã HTML sau:

<div class="wrapper">
    <button id="btn">Click Mebutton>
div>

Ví dụ sau đây cho thấy cách bạn có thể lấy nút cha của button:

const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper

Thuộc tính parentNode chỉ đọc, có nghĩa là bạn không thể sửa đổi nó.

Trong HTML, document tự nó là nút cha của phần tử html. Cả hai phần tử

const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper
0 và
const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper
1 đều là các nút con của yếu tố html.

Thích bài viết này? Theo dõi tôi trên Twitter và LinkedIn. Bạn cũng có thể đăng ký nguồn cấp dữ liệu RSS. Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

Thuộc tính ParentNode được sử dụng để trả về nút mẹ của nút được chỉ định làm đối tượng nút. Nó là một tài sản chỉ đọc. Cú pháp: Node.ParentNode. Giá trị trả về: Thuộc tính này trả về phần tử cha của nút được chỉ định hoặc null nếu nút hiện tại không có phần tử cha.

Ví dụ

Nhận tên nút của phần tử cha của phần tử:

var x = document.getEuityById ("MYLI"). ParentEuity.Nodename;

Hãy tự mình thử »

Nhấp vào một phần tử () để ẩn phần tử cha của nó ():
  x

var x = document.getEuityById ("MYLI"). ParentEuity.Nodename;


Hãy tự mình thử »

Nhấp vào một phần tử () để ẩn phần tử cha của nó ():

& nbsp; x

Định nghĩa và cách sử dụng
document.body.parentElement; // Returns the element

Thuộc tính ParentEuity trả về phần tử cha của phần tử được chỉ định.
document.documentElement.parentElement; // Returns null ( does not have a parent ELEMENT node)

Sự khác biệt giữa ParentEuity và ParentNode, là ParentEuity trả về NULL nếu nút cha mẹ không phải là nút phần tử:

Tài sản này chỉ đọc.

Các nút HTML so với các phần tử

Trong HTML DOM (mô hình đối tượng tài liệu), tài liệu HTML là một tập hợp các nút có nút con (hoặc không có).HTML DOM (Document Object Model), an HTML document is a collection of nodes with (or without) child nodes.

Các nút là nút phần tử, nút văn bản và các nút bình luận. are element nodes, text nodes, and comment nodes.

Khoảng trắng giữa các phần tử cũng là các nút văn bản.

Các phần tử chỉ là các nút phần tử. are only element nodes.


Trẻ em so với trẻ em

Trẻ con trả về các nút con (nút phần tử, nút văn bản và các nút nhận xét). returns child nodes (element nodes, text nodes, and comment nodes).

Trẻ em trả lại các yếu tố trẻ em (không phải là nút và các nút bình luận). returns child elements (not text and comment nodes).


Anh chị em vs phần tử anh chị em

Anh chị em là "anh em" và "chị em". are "brothers" and "sisters".

Anh chị em là các nút có cùng cha mẹ (trong cùng một danh sách trẻ con). are nodes with the same parent (in the same childNodes list).

Anh chị em phần tử là các yếu tố có cùng cha mẹ (trong cùng một danh sách con). are elements with the same parent (in the same children list).



Cú pháp

Chi tiết kỹ thuật

Giá trị trở lại:Một đối tượng phần tử, biểu thị nút phần tử cha của một nút hoặc null nếu nút không có cha mẹ

Hỗ trợ trình duyệt

const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper
3 là tính năng DOM Cấp 3 (2004).

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:

Trình duyệt ChromeI EBờ rìaFirefoxCuộc đi sănOpera
Đúng9-11ĐúngĐúngĐúngĐúng


Về cuộc gọi:

Bạn có thể giải quyết vấn đề này bằng cách sử dụng

const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper
4 trong đó:

  • phải được gọi trên một hàm
    const button = document.querySelector('#btn');
    
    const div = button.parentNode;
    
    console.log(div.classList[0]); // wrapper
    
    5
  • bạn vượt qua nó một đối tượng của những gì bạn muốn trở thành "
    const button = document.querySelector('#btn');
    
    const div = button.parentNode;
    
    console.log(div.classList[0]); // wrapper
    
    6" này
  • Bạn có thể vượt qua các đối số bổ sung có thể được sử dụng trong hàm, nó được gọi vào
    const button = document.querySelector('#btn');
    
    const div = button.parentNode;
    
    console.log(div.classList[0]); // wrapper
    
    7 trong đó có lẽ
    const button = document.querySelector('#btn');
    
    const div = button.parentNode;
    
    console.log(div.classList[0]); // wrapper
    
    8 chấp nhận một đối số của Boolean
    const button = document.querySelector('#btn');
    
    const div = button.parentNode;
    
    console.log(div.classList[0]); // wrapper
    
    9.

Sử dụng cuộc gọi:

Đối với vấn đề cụ thể này, chúng ta có thể truyền đối tượng "cha mẹ" thông qua

var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
0 để ghi đè lên
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
1 thường có trong đối tượng con.

Nhìn vào vấn đề của chúng tôi trước tiên

var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};

Bây giờ, đây là một giải pháp sử dụng cuộc gọi

Và jsfiddle để xem nó hoạt động.

var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            // SOLUTION: use call to pass _this as the 'this' used by thingy
            alert(_this.options.thingy.call(_this));
        });

        $('#another').click(function(){
            // SOLUTION 2: Use call to pass parent all the way through
            alert(_this.options.getAnother.call(_this)); 
        });
    },
    options: {
      thingy: function() {
        // SOLUTION in action, the this is the app object, not options.
        return this.getThingy(); 
      },
      getAnother: function() {
        // SOLUTION 2 in action, we can still access the options 
        // AND pass through the app object to the thingy method.
        return 'another ' + this.options.thingy.call(this); 
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};

Tóm lại là

Bạn có thể sử dụng

const button = document.querySelector('#btn');

const div = button.parentNode;

console.log(div.classList[0]); // wrapper
4 Bất cứ khi nào bạn sử dụng phương thức trên thuộc tính của đối tượng chính của mình:
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
3 phải luôn được gọi bằng
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
4 -
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
5 - theo cách đó bạn có thể đảm bảo rằng bạn sẽ luôn có quyền truy cập vào mọi phần của đối tượng. Nó có thể cung cấp cho bạn quyền truy cập vào các phương thức của một tài sản khác như
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
6.

Một ý tưởng tốt là trong

var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
7, lưu trữ
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
1 trong một biến
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
9 vì vậy rõ ràng những gì
var app = {
    init: function() {
        var _this = this; // so we can access the app object in other functions

        $('#thingy').click(function(){
            alert(_this.options.thingy());
        });

        $('#another').click(function(){
            alert(_this.options.getAnother());
        });
    },
    options: {
      thingy: function() {
      // PROBLEM: the this here refers to options
        return this.getThingy();
      },
      getAnother: function() {
        // PROBLEM 2: we want the this here to refer to options,
        // but thingy will need the parent object
        return 'another ' + this.thingy();
      },
    },
    getThingy: function() {
        return 'thingy';
    }
};
1 phản ánh.

ParentNode trong JavaScript là gì?

Thuộc tính ParentNode chỉ đọc của giao diện nút trả về cha mẹ của nút được chỉ định trong cây Dom. Các nút tài liệu và tài liệuFragment không bao giờ có thể có cha mẹ, vì vậy ParentNode sẽ luôn trả về null. Nó cũng trả về NULL nếu nút vừa được tạo và chưa được gắn vào cây.. Document and DocumentFragment nodes can never have a parent, so parentNode will always return null . It also returns null if the node has just been created and is not yet attached to the tree.

Là đối tượng cha mẹ trong JavaScript?

Giới thiệu về cha mẹ JavaScript. HTML bao gồm DOM trong đó tất cả các yếu tố được xác định là đối tượng. Các yếu tố này tạo thành thứ bậc như cha mẹ sang con. Bất kỳ yếu tố nào có phần tử con trong đó có thể được coi là một yếu tố cha mẹ.Any element with the child element under it can be treated as a parent element.

Phần tử cha là gì?

Cha mẹ là một phần tử trực tiếp ở trên và được kết nối với một phần tử trong cây tài liệu.an element that is directly above and connected to an element in the document tree.

Nút cha trong HTML là gì?

Thuộc tính ParentNode được sử dụng để trả về nút mẹ của nút được chỉ định làm đối tượng nút.Nó là một tài sản chỉ đọc.Cú pháp: Node.ParentNode.Giá trị trả về: Thuộc tính này trả về phần tử cha của nút được chỉ định hoặc null nếu nút hiện tại không có phần tử cha.used to return the parent node of the specified node as Node object. It is a read-only property. Syntax: node.parentNode. Return value: This property returns a parent element of the specified node or null if the current node has no parent element.