change getElementById to querySelector

Author: greggman

webgl/frustum-diagram.html

@@ -104,7 +104,7 @@
 function main() {
   // Get A WebGL context
   /** @type {HTMLCanvasElement} */
-  var canvas = document.getElementById("canvas");
+  var canvas = document.querySelector("#canvas");
   var gl = canvas.getContext("webgl");
   if (!gl) {
     return;

webgl/lessons/fr/webgl-fundamentals.md

@@ -18,7 +18,7 @@ Dans l'espace de projection, les coordonnées vont toujours de -1 à +1 quelle q
 Voici un simple exemple pour illustrer un code WebGL dans sa forme la plus simple.
 
     // Création du contexte WebGL
-    var canvas = document.getElementById("canvas");
+    var canvas = document.querySelector("#canvas");
     var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
 
     // Création d'un programme

webgl/lessons/ja/webgl-fundamentals.md

@@ -131,7 +131,7 @@ WebGLでは、色は０〜１で指定する。
 
 それをJavaScriptで調べられる
 
-    var canvas = document.getElementById("c");
+    var canvas = document.querySelector("#c");
 
 それで`WebGLRenderingContext`を作成出来る
 
@@ -198,8 +198,8 @@ GLSLのstringをする方法はいくつかある。文字列の連結とか、A
 
 出来たら、その関数でシェーダー２つを作成出来る
 
-    var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
-    var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+    var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+    var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
 
     var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
     var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

webgl/lessons/ja/webgl-resizing-the-canvas.md

@@ -20,7 +20,7 @@ canvasの「**描画バッファーのサイズ**」を設定する方法は２
 
 JavaScript側は、
 
-    var canvas = document.getElementById("c");
+    var canvas = document.querySelector("#c");
     canvas.width = 400;
     canvas.height = 300;
 

webgl/lessons/ko/webgl-fundamentals.md

@@ -129,7 +129,7 @@ WebGL에서 색상은 0에서 1까지 사용합니다.
 
 그러면 JavaScript에서 찾을 수 있습니다.
 
-     var canvas = document.getElementById("c");
+     var canvas = document.querySelector("#c");
 
 이제 WebGLRenderingContext을 만들 수 있습니다.
 
@@ -192,8 +192,8 @@ JavaScript에서 문자열을 만드는 방법으로 GLSL 문자열을 만들 
 
 이제 우리는 두 Shader를 만드는 함수를 호출할 수 있습니다.
 
-    var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
-    var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+    var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+    var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
 
     var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
     var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

webgl/lessons/ko/webgl-resizing-the-canvas.md

@@ -22,7 +22,7 @@ CSS는 canvas가 표시되는 크기를 결정합니다.
 
 JavaScript
 
-    var canvas = document.getElementById("c");
+    var canvas = document.querySelector("#c");
     canvas.width = 400;
     canvas.height = 300;
 

webgl/lessons/pl/webgl-2d-vs-3d-library.md

@@ -37,7 +37,7 @@ Poniżej jest kod realizujący opisane zadanie z użyciem three.js.
 
 <pre class="prettyprint showlinemods">
   // Skonfiguruj WebGL.
-  var c = document.getElementById("c");
+  var c = document.querySelector("#c");
   renderer = new THREE.WebGLRenderer();
   renderer.setSize(c.clientWidth, c.clientHeight);
   c.appendChild(renderer.domElement);

webgl/lessons/pl/webgl-fundamentals.md

@@ -19,7 +19,7 @@ Współrzędne przestrzeni obcinania zawsze przebiegają przedział od -1 do 1 b
 jest Twoje płótno. Poniżej jest prosty przykład pokazujący WebGL w jego najprostszej formie.
 
     // Pobierz kontekst WebGL
-    var canvas = document.getElementById("canvas");
+    var canvas = document.querySelector("#canvas");
     var gl = canvas.getContext("experimental-webgl");
 
     // skonfiguruj program GLSL

webgl/lessons/pt-br/webgl-text-canvas2d.md

@@ -30,7 +30,7 @@ Em seguida, configure o CSS para que a tela e o HTML se sobrepnham
 Agora procure a tela de texto no tempo de inicialização e crie um contexto 2D para isso.
 
     // look up the text canvas.
-    var textCanvas = document.getElementById("text");
+    var textCanvas = document.querySelector("#text");
 
     // make a 2D context for it
     var ctx = textCanvas.getContext("2d");

webgl/lessons/resources/2d-scene-graph-diagram.js

@@ -21,7 +21,7 @@ const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
 let colors;
 
 function renderSceneGraph(root) {
-  const canvas = document.getElementById("c");
+  const canvas = document.querySelector("#c");
   const ctx = wrapCanvasRenderingContext2D(canvas.getContext("2d"));
   var g_update = true;
 

webgl/lessons/resources/3d-in-canvas.html

@@ -52,7 +52,7 @@ <h1 class="description">3D in canvas</h1>
     3, 7,
   ];
 
-  var canvas = document.getElementById("c");
+  var canvas = document.querySelector("#c");
   var ctx = canvas.getContext("2d");
   var then = 0;
 

webgl/lessons/resources/3d-in-webgl.html

@@ -66,7 +66,7 @@ <h1 class="description">3D in WebGL</h1>
     3, 7,
   ];
 
-  var canvas = document.getElementById("c");
+  var canvas = document.querySelector("#c");
   var gl = canvas.getContext("webgl");
   if (!gl) {
     return;

webgl/lessons/resources/camera-move-camera.html

@@ -37,7 +37,7 @@ <h1 class="description">Moving the Camera</h1>
 "use strict";
 
 function main() {
-  var movieElem = document.getElementById('movie');
+  var movieElem = document.querySelector('#movie');
   var areaWidth = movieElem.clientWidth;
   var areaHeight = movieElem.clientHeight;
 

webgl/lessons/resources/cross-product-diagram.html

@@ -494,7 +494,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/cube-normals.html

@@ -371,7 +371,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/directional-lighting.html

@@ -62,7 +62,7 @@
   const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
   darkMatcher.addEventListener('change', render);
 
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var direction = 0;
 
   function radToDeg(rad) {

webgl/lessons/resources/dot-product.html

@@ -739,7 +739,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/environment-mapping.html

@@ -40,7 +40,7 @@
     dot: opt.dot || "dot(eyeToSurfaceDir,surfaceNormal)",
     surfaceNormal: opt.surfaceNormal || "surface normal",
   };
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var direction = 0;
   var surfaceWidth = 200;
 

webgl/lessons/resources/fragment-shader-anim.html

@@ -56,7 +56,7 @@
 
 
 function main() {
-  var canvas = document.getElementById("canvas");
+  var canvas = document.querySelector("#canvas");
   var ctx = get2DContext(canvas);
   ctx.lineWidth = 1;
   var pixelSize = 6;

webgl/lessons/resources/matrix-space-change.html

@@ -31,7 +31,7 @@
 
 function main() {
   const opt = getQueryParams();
-  const ctx = document.getElementById("canvas").getContext("2d");
+  const ctx = document.querySelector("#canvas").getContext("2d");
 
   const fpoints = [
     // left column

webgl/lessons/resources/moon-orbit.html

@@ -83,9 +83,9 @@
     ],
   };
 
-  const canvas = document.getElementById('c');
+  const canvas = document.querySelector('#c');
   const ctx = wrapCanvasRenderingContext2D(canvas.getContext('2d'));
-  const orbitCtx = document.getElementById('orbit').getContext('2d');
+  const orbitCtx = document.querySelector('#orbit').getContext('2d');
   let colors;
 
   const spread = 16;

webgl/lessons/resources/normals-scaled.html

@@ -464,7 +464,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/normals.html

@@ -347,7 +347,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/point-lighting.html

@@ -48,7 +48,7 @@
     dot: opt.dot || "dot(surfaceToLight,surfaceNormal)",
     surfaceNormal: opt.surfaceNormal || "surface normal",
   };
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var direction = 0;
 
   function radToDeg(rad) {

webgl/lessons/resources/power-graph.html

@@ -43,7 +43,7 @@
 "use strict";
 
 function main() {
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var power = 1;
 
   webglLessonsUI.setupSlider("#power", {value: power, step: 0.01, precision: 2, slide: updatePower, min: 0, max: 10 });

webgl/lessons/resources/specular-lighting.html

@@ -52,7 +52,7 @@
     surface2Light: opt.surface2Light || "surface2light",
     halfVector: opt.halfVector || "halfVector",
   };
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var surfaceAngle = 0;
 
   function radToDeg(rad) {

webgl/lessons/resources/spot-lighting.html

@@ -50,7 +50,7 @@
     dot: opt.dot || "dot(surfaceToLight,surfaceNormal)",
     surfaceNormal: opt.surfaceNormal || "surface normal",
   };
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var rotation = 0;
   var direction = degToRad(20);
   var limit = degToRad(20);

webgl/lessons/resources/spot-sphere.html

@@ -838,7 +838,7 @@
 
 var app;
 function main() {
-  canvas = document.getElementById("canvas");
+  canvas = document.querySelector("#canvas");
 
   var gl = twgl.getWebGLContext(canvas, {alpha: true, preMultipliedAlpha: false});
   if (!gl) {

webgl/lessons/resources/surface-reflection.html

@@ -47,7 +47,7 @@
   const lang = {
     reflection: opt.reflection || "reflection",
   };
-  var ctx = document.getElementById("canvas").getContext("2d");
+  var ctx = document.querySelector("#canvas").getContext("2d");
   var surfaceAngle = 0;
 
   function radToDeg(rad) {

webgl/lessons/resources/webgl-preservedrawingbuffer-true.html

@@ -114,7 +114,7 @@
     3, 7,
   ];
 
-  var canvas = document.getElementById("c");
+  var canvas = document.querySelector("#c");
   var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});
   var clock = 0;
 

webgl/lessons/ru/webgl-2d-vs-3d-library.md

@@ -37,7 +37,7 @@ TOC: WebGL - 2D и 3D библиотеки
 
 <pre class="prettyprint showlinemods">
   // настраиваем WebGL
-  var c = document.getElementById("c");
+  var c = document.querySelector("#c");
   renderer = new THREE.WebGLRenderer();
   renderer.setSize(c.clientWidth, c.clientHeight);
   c.appendChild(renderer.domElement);

webgl/lessons/ru/webgl-fundamentals.md

@@ -133,7 +133,7 @@ WebGL затем может растеризовать различные при
 
 Далее получаем ссылку на него из JavaScript
 
-     var canvas = document.getElementById("c");
+     var canvas = document.querySelector("#c");
 
 Теперь мы можем получить объект WebGLRenderingContext - контекст отрисовки WebGL
 
@@ -198,8 +198,8 @@ WebGL затем может растеризовать различные при
 
 Теперь создадим 2 шейдера с помощью этой функции
 
-    var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
-    var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+    var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+    var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
 
     var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
     var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

webgl/lessons/ru/webgl-resizing-the-canvas.md

@@ -19,7 +19,7 @@ TOC: Изменение размера Canvas в WebGL
 
 JavaScript
 
-    var canvas = document.getElementById("c");
+    var canvas = document.querySelector("#c");
     canvas.width = 400;
     canvas.height = 300;
 

webgl/lessons/ru/webgl-text-canvas2d.md

@@ -36,7 +36,7 @@ TOC: WebGL текст - Canvas 2D
 При инициализации получим ссылку на canvas с текстом и создадим контекст 2D.
 
     // получаем ссылку на canvas с текстом
-    var textCanvas = document.getElementById("text");
+    var textCanvas = document.querySelector("#text");
 
     // создаём контекст 2D
     var ctx = textCanvas.getContext("2d");

webgl/lessons/ru/webgl-text-html.md

@@ -44,8 +44,8 @@ CSS, чтобы текст расположился сверху.
 чтобы в дальнейшем мы могли их менять.
 
     // получаем ссылки на элементы DOM
-    var timeElement = document.getElementById("time");
-    var angleElement = document.getElementById("angle");
+    var timeElement = document.querySelector("#time");
+    var angleElement = document.querySelector("#angle");
 
     // создаём текстовые узлы, чтобы сэкономить немного браузерного времени
     var timeNode = document.createTextNode("");
@@ -151,7 +151,7 @@ WebGL работает в браузере. Не забывайте исполь
 Нам осталось получить ссылку на divcontainer, создать div и добавить его.
 
     // получаем ссылку на divcontainer
-    var divContainerElement = document.getElementById("divcontainer");
+    var divContainerElement = document.querySelector("#divcontainer");
 
     // создаём div
     var div = document.createElement("div");

webgl/lessons/webgl-2d-vs-3d-library.md

@@ -37,7 +37,7 @@ Here's the code in three.js to display this
 
 <pre class="prettyprint showlinemods">
   // Setup WebGL.
-  var c = document.getElementById("c");
+  var c = document.querySelector("#c");
   renderer = new THREE.WebGLRenderer();
   renderer.setSize(c.clientWidth, c.clientHeight);
   c.appendChild(renderer.domElement);

webgl/lessons/webgl-fundamentals.md

@@ -139,7 +139,7 @@ First we need an HTML canvas element
 
 Then in JavaScript we can look that up
 
-     var canvas = document.getElementById("c");
+     var canvas = document.querySelector("#c");
 
 Now we can create a WebGLRenderingContext
 
@@ -204,8 +204,8 @@ what is happening.
 
 We can now call that function to create the 2 shaders
 
-    var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
-    var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
+    var vertexShaderSource = document.querySelector("#2d-vertex-shader").text;
+    var fragmentShaderSource = document.querySelector("#2d-fragment-shader").text;
 
     var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
     var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

webgl/lessons/webgl-instanced-drawing.md

@@ -188,7 +188,7 @@ optional feature of WebGL. It's called
 [`ANGLE_instanced_arrays`](https://developer.mozilla.org/en-US/docs/Web/API/ANGLE_instanced_arrays).
 
 ```js
-const canvas = document.getElementById('canvas');
+const canvas = document.querySelector('#canvas');
 const gl = canvas.getContext('webgl');
 if (!gl) {
   return;