How to do console.log() of an HTML element to know properties and events
This tutorial guides you on how to do console.log() of an HTML element to see which properties and events it offers.
In case of Angular projects when you work on property and event bindings you may wanted to know which Properties or Events of HTML elements you may bind. Let’s see how to use chrome developer tools to do this.
Console.log() HTML element
Let’s say you have a button called “Add” in the Angular page (HTML template).
<p>Add Demo </p> <button id="add" class="btn btn-primary">Add</button>
To know or list properties or events of this HTML element (add button), first you need to get element using getElementById().
> var addButton = document.getElementById('add');
<. undefined
console.log(element) will log HTML section like below
> console.log(addButton) <button _ngcontent-qvo-c12 id="add" class="btn btn-primary">Add</button> <.undefined
console.dir(element) will log HTML element’s properties and values
> console.dir(addButton)
- button#add.btn.btn-primary
accessKey: ""
ariaAtomic: null
-------
-------
disabled: false //Properties
draggable: false
elementTiming: ""
-------
-------
onchange: (...) //Events
onclick: (...)
onclose: (...)
--------
--------
--------
<. undefined
If you are inside console already, you can leave ‘console.’ and simply type log instead of console.log
log(addButton)
Similarly, you can simply type dir instead of console.dir
dir(addButton)
Also See:
- TypeScript Vs ES6 Vs ES5
- npm ERR! enoent – This is related to npm not being able to find a file
- Angular Application Flow and Bootstrapping