@todojs/

02.dom

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document.querySelector() and shadowRoot</title>
</head>
<body>
<button id="find">document.querySelectorAll('#myid')</button>
<p id="myid">global context (&lt;p id="myid"&gt;)</p>
<div id="test"></div>
<pre id="result"></pre>
<script>
  const div = document.querySelector ('#test');
  div.attachShadow ({mode : 'open'});
  div.shadowRoot.innerHTML = '<p id="myid">shadow context (&lt;p id="myid"&gt;)</p>';

  const find   = document.querySelector ('#find');
  const result = document.querySelector ('#result');
  find.addEventListener ('click', function () {
    const elements   = document.querySelectorAll ('#myid');
    result.innerHTML = 'found ' + elements.length + ' elements';
  });
</script>
</body>
</html>
result
console