Forum Programmation.web Accéder à un nœud du DOM en utilisant son id comme variable

Posté par  (site web personnel) . Licence CC By‑SA.
Étiquettes :
5
2
nov.
2023

Désolé, j'ai pas réussi à faire une meilleure formulation du truc pour le titre.

Dans le tutoriel de D3, y'a ce bout de code :

<!DOCTYPE html>
<div id="container"></div>
<script type="module">

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;

// Declare the x (horizontal position) scale.
const x = d3.scaleUtc()
    .domain([new Date("2023-01-01"), new Date("2024-01-01")])
    .range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
    .domain([0, 100])
    .range([height - marginBottom, marginTop]);

// Create the SVG container.
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

// Add the x-axis.
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

// Add the y-axis.
svg.append("g")
    .attr("transform", `translate(${marginLeft},0)`)
    .call(d3.axisLeft(y));

// Append the SVG element.
container.append(svg.node());

</script>

Je me suis senti très confus parce que la variable container utilisé à la fin n'est jamais déclaré et pourtant elle tourne le code marche.

Après divers tests je me suis rendu compte la variable container contenait une référence vers le nœud d'id container, comme si un let container = document.getElementById("container") était fait automagiquement.

Et ça marche pour tous les id.

<!DOCTYPE html>
<div id="bli"></div>
<div id="bla"></div>
<div id="blo"></div>
<script type="module">
console.log(bli, bla, blo) // <div id="bli"> <div id="bla"> <div id="blo">
</script>

Est-ce que quelqu'un aurait un lien vers MDN qui décrit cette fonctionnalité ? Je n'arrive pas à trouver les bons mots clefs à donner à manger à mon moteur de recherche préféré.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.