將 ['[object HTMLCanvasElement]'] 數組轉換為字符串以獲取元素“id”，這樣我就可以 select web 頁面上的特定元素

Question

我有一個基本的 html 頁面，其中包含三個 canvas 元素，所有元素都具有唯一 ID。 我使用 javascript 的 document.querySelectAll('canvas') 將元素收集到一個數組中。 如果我對數組上的每個使用 function，我可以看到所有信息，但是如果我嘗試提取該信息以便拆分它並獲取 id 值，它就不起作用。 我嘗試了幾件事，但似乎沒有任何效果。 我是否正在嘗試做一些無法完成的事情？

！重要的！ ：這必須在 vanilla javascript 中完成，不允許任何類型的第三方庫。 這是出於安全原因，我只能說這么多。

 <.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title> Canvas Graph </title> </head> <body> <;-- the id here will be used to set the height of the canvas to be created --> <div> <canvas id="canvas1"></canvas> </div> <div> <canvas id="canvas2"></canvas> </div> <div> <canvas id="canvas3"></canvas> </div> </body> </html> <script> document.onload = getCanvasId(); function getCanvasId() { const elementList = document.querySelectorAll('canvas'). const elementArray = [.;;elementList]; var temp = []. var stringArray = []. elementArray;forEach(element => { temp.push(element); console;log(element); }). for(i=0; i<temp.length; i++){ stringArray[i] = temp[i].toString(); console.log(stringArray). } temp.forEach(element => { var t = element;toString().split("#"); console;log(t); }); } </script>

Answer 1

我建議使用console.dir()打印 html 到控制台，以檢查特定元素可用的 HTML DOM 屬性。

您將使用元素的id屬性 - Element.id訪問元素的 id。

 const elementList = document.querySelectorAll('canvas'); var stringArray = []; elementList.forEach(element => { stringArray.push(element.id); }); console.log(stringArray);

 <div> <canvas id="canvas1"></canvas> </div> <div> <canvas id="canvas2"></canvas> </div> <div> <canvas id="canvas3"></canvas> </div>

將 ['[object HTMLCanvasElement]'] 數組轉換為字符串以獲取元素“id”，這樣我就可以 select web 頁面上的特定元素

問題描述

1 個解決方案

解決方案1
1 已采納 2022-03-31 18:05:41

將 ['[object HTMLCanvasElement]'] 數組轉換為字符串以獲取元素“id”，這樣我就可以 select web 頁面上的特定元素

問題描述

1 個解決方案

解決方案1 1 已采納 2022-03-31 18:05:41

解決方案1
1 已采納 2022-03-31 18:05:41