Skip to content
Advertisements

DOM parentNode()

Why parentNode?

The HTML DOM parentNode() method returns a parent node of the specified node as the Node object. This property is read-only.

Syntax:

node.parentNode

DOM parentNode VS parentElement :

parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages.

In most cases, it is the same as parentNode. The only difference comes when a node’s parentNode is not an element. If so, parentElement is null.

As an example:

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

parentNode Example

Example 1

parentNode example
 <body>

    <p>
        The parentElement method in the pElementFunction()
        function will work when the button is pressed. As a
        result, the color and size of the div boxes will change.
    </p>

    
    <div class="box">
        <button onclick="pElementFunction()" class="but">CLICK</button>
    </div>


    <script>

        function pElementFunction() {
            let box = document.querySelector(".but").parentNode;
            box.style.background = "orange";
            box.style.width = "250px";
            box.style.height = "250px";
        }

    </script>

</body>

Exampe 2

parentNode example
<body>

    <p>
        The parentElement method in the pElementFunction()
        function will work when the button is pressed. As a
        result, the color and size of the div boxes will change.
    </p>

    
    <div class="box">
        <button onclick="pElementFunction()" class="but">CLICK</button>
    </div>

    <p id="result"></p>

    <script>

        function pElementFunction() {
            let box = document.querySelector(".but").parentNode;
            document.getElementById("result").innerHTML = box.nodeName;
        }

    </script>

</body>

Example 3

parentNode example
<p>
    The parentElement method in the pElementFunction()
    function will work when the button is pressed. As a
    result, the color and size of the div boxes will change.
</p>


<div class="box">
    <button onclick="pElementFunction()" class="but">CLICK</button>
</div>


<script>

    function pElementFunction() {
        let box = document.querySelector(".but").parentNode;
        box.style.transform = "translate(-300px,-300px)"
    }

</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: