jQuery and the <dialog> element

Question

I'm trying to use the new HTML element. Here's some testing code:

<dialog id="addSystemDialog">
    <p>This is a dialog</p>
    <button id='close'>Close dialog</button>
</dialog>
<button id='show'>Show add dialog</button>

And in js:

var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};

If I change the first js line to

var dialog = $('dialog');

it no longer works. Why?

Answer 1

document.querySelector returns the first match.

jQuery returns an array of all matches.

If you use $('dialog')[0], you should get the same result.