0

Sample html, nothing special. But what's going on here?

    <script>
      console.log(myDrawing);
    </script>

Above code seems to be running fine! How is that even possible that element with id is exposed to global scope with variable named by id? I don't understand what's going on here...

I have tested this in chrome, edge and safari - all seems to work the same.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <svg
      id="myDrawing"
      class="animated v1"
      width="200"
      height="200"
      viewBox="0 0 200 200"
      style="border: 1px solid #000"
    >
      <circle
        class="eye"
        cx="50"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
      <circle
        class="eye"
        cx="150"
        cy="50"
        r="40"
        stroke="green"
        stroke-width="4"
        fill="yellow"
      />
      <rect
        class="mouth"
        x="50"
        y="150"
        width="100"
        height="20"
        fill="red"
      />
      <rect
        class="mouth smile"
        x="30"
        y="130"
        width="20"
        height="20"
        fill="red"
      />
      <rect
        class="mouth smile"
        x="150"
        y="130"
        width="20"
        height="20"
        fill="red"
      />
    </svg>
    <script>
      console.log(myDrawing);
    </script>
  </body>
</html>
IT Man
  • 933
  • 3
  • 12
  • 33
  • You can use other elements by id as well. This is a standard in HTML5 specs: named objects. But it is not properly documented and the HTML5 spec itself advises against it. And the named objects accessible through this method may change in future and also browser support can change any time. Don't use it, not recommended. – Aniket Pandey Jun 18 '23 at 20:39
  • Check this thread: (https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties) – Aniket Pandey Jun 18 '23 at 20:40
  • What? How could anyone could accept such a dumb idea? Wow I have never thought that such stupid thing could be possible. – IT Man Jun 18 '23 at 20:52
  • Ever used window object directly? Or document.body? Or document object? It's the same as using I'd(s) directly. Only difference is that window, document or body are all global objects and using them directly never causes any issues whatsoever hence they are accepted as a normal practice. But Id(s) can cause issues. – Aniket Pandey Jun 18 '23 at 20:56
  • @AniketPandey the main difference between putting window or document into global vs named elements it that named elements are created by page developers and other global variables like window are controlled by a standard like W3C specs. So when working with any page you cannot be sure what you will get. This is error prone solution! I cannot understand how any software engineer could accept such risky and ambiguous solution. – IT Man Jun 19 '23 at 05:53
  • What are you talking about? I just gave him an explanation of why this works. I explicitly told in the first comment not to use it as it cause issues. – Aniket Pandey Jun 19 '23 at 06:07
  • @AniketPandey I didn't mean to attack you :) was just complaining about how bad design choice it was. – IT Man Jun 19 '23 at 06:47

0 Answers0