JavaScript Console Dir() and DirXML() Methods

JavaScript Console Dir() and DirXML Methods

In this article, I am going to discuss JavaScript Console Dir() and DirXML Methods with Examples. Please read our previous article where we discussed JavaScript Console Debug() Method with Examples.

JavaScript console.dir() Method

The console.dir() method is used to display a list of the properties of the specified JavaScript object. This method recognizes the object as an object and prints its properties. This method displays the list of properties in the form of object representation or JSON representation from where we can check the element properties.

Syntax: console.dir(object)

Parameters:
  1. object – This parameter is a JavaScript object whose properties need to be displayed.

What we discussed above is given in the below example.

Example to Understand JavaScript Console Dir() Method
<html>
<head>
    <title>JavaScript console dir() method example</title>
</head>
<body>
    <script>
        //sample code1
        var student = {
            course: "JavaScript",
            price: "5000"
        };
        console.dir(student)

        //sample code2
        console.dir(Object, 'console.dir- sample code 2')
    </script>
</body>
</html>

Output: Press F12 and go to the Console section

JavaScript Console Dir() and DirXML Methods with Examples

JavaScript console.dirxml() Method

The console.dirxml() method is used to display a tree of the descendant elements of the specified XML/HTML element or object. This method displays the tree in the form of XML representation as a hierarchical form of expandable nodes that allow us to see the contents of child nodes.

Syntax: console.dirxml(object);

Parameters:
  1. object – This parameter is a JavaScript object or an element whose properties need to be displayed.

What we discussed above is given in the below example.

Example to Understand JavaScript Console DirXML() Method
<html>
<head>
    <title>JavaScript console dirxml() method example</title>
</head>
<body>
    <div class="h">
        <h1>JavaScript Tutorials</h1>
        <p>dirxml method demo</p>
    </div>

    <script>
        //sample code1
        console.dirxml(document.querySelector(".h"));

        //sample code2
        var student = {
            course: "JavaScript",
            price: "5000"
        };
        console.dirxml(student, 'console.dirxml- sample code 2')

        //sample code2
        console.dirxml(document.body, "console.dirxml- sample code 3");
    </script>
</body>
</html>

Output: Press F12 and go to the Console section

JavaScript Console Dir() and DirXML Methods with Examples

In the next article, I am going to discuss JavaScript Console Error() Method with Examples. Here, in this article, I try to explain JavaScript Console Dir() and DirXML Methods with Examples. I hope this JavaScript Console Dir() and DirXML Methods with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this JavaScript Console Dir() and DirXML Methods article.

Leave a Reply

Your email address will not be published. Required fields are marked *