Ví dụ về XPath Axe Methods: ancestor và ancestor-or-self

ancestor

Chọn tất cả tổ tiên (cha mẹ, ông bà, ...) của nút hiện tại:

Ví dụ 1

XPath: //div[@id='child1']/ancestor::div

HTML:

<div id="grandparent1">
    <div id="parent1">
        <div id="child1">Nội dung 1</div>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="grandparent1" và id="parent1".

Ví dụ 2

XPath: //span[@id='child2']/ancestor::div

HTML:

<div id="great-grandparent2">
    <div id="grandparent2">
        <div id="parent2">
            <span id="child2">Nội dung 2</span>
        </div>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="great-grandparent2", id="grandparent2", và id="parent2".

Ví dụ 3

XPath: //p[@id='child3']/ancestor::div

HTML:

<div id="grandparent3">
    <div id="parent3">
        <p id="child3">Nội dung 3</p>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="grandparent3" và id="parent3".

ancestor-or-self

Chọn tất cả tổ tiên và chính nút hiện tại:

Ví dụ 1

XPath: //div[@id='child1']/ancestor-or-self::div

HTML:

<div id="grandparent1">
    <div id="parent1">
        <div id="child1">Nội dung 1</div>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="grandparent1", id="parent1", và id="child1".

Ví dụ 2

XPath: //span[@id='child2']/ancestor-or-self::div

HTML:

<div id="great-grandparent2">
    <div id="grandparent2">
        <div id="parent2">
            <span id="child2">Nội dung 2</span>
        </div>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="great-grandparent2", id="grandparent2", id="parent2", và id="child2".

Ví dụ 3

XPath: //p[@id='child3']/ancestor-or-self::div

HTML:

<div id="grandparent3">
    <div id="parent3">
        <p id="child3">Nội dung 3</p>
    </div>
</div>

Đáp án: Chọn các phần tử div có id="grandparent3", id="parent3", và id="child3".