dom 相关问题

通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

我正在尝试执行将第一个文本框的值复制到第二个文本框的简单任务这是我的html 我正在尝试执行将第一个文本框的值复制到第二个文本框的简单任务这是我的html <html> <head> <link rel="stylesheet" href="Style.css"> <script src="1.js"></script> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> </body> </html> 这是我的js文件： const text1 = document.getElementById("textbox1"); const text2 = document.getElementById("textbox2"); function TextCopy() { text2.value = text1.value; } 我得到的错误是： 1.js:6 未捕获的类型错误：无法读取 null 的属性（读取“值”）在文本复制 (1.js:6:25) 在 HTMLInputElement.onkeyup (1.html:7:73) 如果我在函数内声明text1和text2，我不会收到错误并且它可以正常工作，那么为什么当我将它们声明为全局变量时它不起作用？谢谢。您的元素在脚本运行时不存在。这就是为什么人们将脚本文件放在正文的末尾，而不是放在头部。您还可以使用 defer 属性。 <script src="script.js" defer></script> 获取元素的速度比 HTML 渲染元素的速度快，这就是 JS 无法在 DOM 中找到它们的原因。将脚本移至 body 的末尾或将其包装在 DOM Ready 事件中： <html> <head> <link rel="stylesheet" href="Style.css"> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> <script src="1.js"></script> </body> </html> window.addEventListener("DOMContentLoaded", (event) => { const text1 = document.getElementById("textbox1"); const text2 = document.getElementById("textbox2"); function TextCopy() { text2.value = text1.value; } }); 您的脚本在页面完全加载之前执行，为了强制 javascript 等待 DOM 完全加载，您必须在脚本标签中使用 defer 关键字 <html> <head> <link rel="stylesheet" href="Style.css"> <script src="1.js" defer></script> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> </body>

javascript html dom

回答 3 投票 0

如何将这个数组数据打印到dom元素中

如何用 dom 元素打印这个嵌套数组让概率= [{ 10：62， 25：40， 50：8， 100：5， 200：2， 300：1， 500：1 },{ ...

javascript arrays dom nested

回答 1 投票 0

是否可以用 HTML 中的另一个事件替换一个事件[已关闭]

有没有办法用一根手指触摸代替两根手指触摸事件？我正在尝试用单击按钮时的 1 根手指触摸来代替鼠标右键单击 [在移动浏览器上是 2 根手指触摸]...

javascript html dom

回答 1 投票 0

如何访问 HTML 中的拖放元素？

当拖动的元素进入放置元素时，会触发 'dragenter' 事件。该事件附加到 drop 元素，因此我可以访问它。被拖动的元素在哪里？ https://developer.mozilla...

html dom drag drop

回答 1 投票 0

如何判断HTML输入文本太长而无法完全显示？

如何检测用户提供的文本是否比HTML长能够完整显示？

javascript html css dom input

回答 3 投票 0

尝试使用javascript来操作DOM css

我尝试使用 JavaScript 操作 DOM，我尝试使用 JavaScript 更改 css 颜色和背景颜色 const 容器=文档.body container.append(`您附加应用程序...

javascript html css dom

回答 0 投票 0

如何在路径中不以index.html开头的情况下使导航工作？

我有一个 apache2 Web 服务器，位于 /var/www/html。端点是 xyz.com，由大学附属并管理。我的根目录应该是 xyz.com/name，它由主目录代理

html apache web dom server

回答 0 投票 0

如果触发 Chrome 开发者工具调试器，为什么模糊事件永远不会触发？

考虑这个输入 - 我们在按 Enter 键时变得模糊。它通常有效。但是，如果您打开 Devtools，那么调试器行可以工作，那么 !!blur 永远不会触发 - 即使元素失去焦点！为什么，什么是...

javascript dom dom-events

回答 0 投票 0

页脚在页面滚动弹跳时不会拉伸

在我的 React vite 项目中，当页面滚动到末尾并发生弹跳效果时，我的页脚不会拉伸，这让我很挣扎。这种弹跳效果会导致页脚失去对下部

css reactjs dom vite

回答 0 投票 0

如何从没有 Access-Control-Allow-Origin header (JS) 的网站页面解析数据？

我想使用获取请求来解析市场页面。更准确地说：我有一个产品名称列表（未在下面的代码摘录中显示，但它存在于其他地方），并且对于每个产品名称...

javascript dom cors fetch

回答 0 投票 0

通过正则表达式和 classList 检查元素是否包含类

我有一个简单的元素列表，如下所示：我有一个简单的元素列表，如下所示： <ul class="items-list"> <li class="item item-1"></li> <li class="item item-2"></li> <li class="item item-3"></li> <li class="item item-4"></li> </ul> 我选择列表 items = document.getElementsByClassName('items-list')[0] 最后在 for..in 循环中，我想提取类名 'item-*'。因为我想在没有 jQuery 或其他库的情况下实现它，我想知道如何以最优雅的方式做到这一点，比如 if (item.classList.contains('item-.*')) do_something() 您可以检查 some (ES5) 类是否与您的正则表达式匹配： if(item.className.split(' ').some(function(c){ return /item-.*/.test(c); })) do_something() /* or */ if([].some.call(item.classList, function(c){ return /item-.*/.test(c); })) do_something() 或者，在 ES6 中，使用箭头函数，您可以将其简化为 if(item.className.split(' ').some(c => /item-.*/.test(c))) do_something() /* or */ if([].some.call(item.classList, c => /item-.*/.test(c))) do_something() 但是当然，如果您想要最大性能，请使用循环： for (var i=0, l=item.classList.length; i<l; ++i) { if(/item-.*/.test(item.classList[i])) { do_something(); break; } } 您可以使用正则表达式来测试className是否包含item- if (/item-/.test(item.className)) { // ... } var items = document.getElementsByClassName('items-list')[0]; for (var i = 0, len = items.children.length; i < len; i++) { if (/item-/.test(items.children[i].className)) { console.log(items.children[i].className); // or doSomething(); } } http://jsfiddle.net/tcs6b/也许？由于没有提到答案Array.from()，我将使用我自己的版本： // now you have a real array, so you can call any Array method const classNames = Array.from(item.classList); // now you can perform your checks on the array const classNameHasGivenPattern = classNames.some(className => /item-/.test(className)); if (classNameHasGivenPattern) { // ... }

javascript html dom

回答 4 投票 0

如何删除从函数内创建的 HTML 类？

我正在 Odin 项目的 Etch A Sketch 项目上工作。我通过操作 DOM 创建了一个网格。我想通过删除创建的旧网格并通过

javascript html css dom

回答 1 投票 0

如何从api获取信息并将其显示在DOM上？

我正在尝试让 API 中的内容显示在 DOM 中。我不断收到未定义的信息，但我知道它就在那里。它显示在我的控制台中。我只是不知道我还需要做哪些额外的事情......

javascript dom fetch-api

回答 1 投票 0

页面之间保留的元素

我编写了一个在 YouTube 内运行的内容脚本：让id = ''; 而（真）{ 让 newId = 等待 getVideoId(true); if (newId && newId !== id) { console.log('新id', newId); ...

javascript dom google-chrome-extension

回答 0 投票 0

JavaScript - 让 Div 看起来像是带有框阴影的 3D 按钮

这是我的 HTML 代码：这是我的 HTML 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic and Draggable Divs</title> <link rel="stylesheet" href="dynamicDivs.css"> </head> <body> <div id="touch-buttons-grid"> <div class="touch-button" draggable="true">Block 1</div> <div class="touch-button" draggable="true">Block 2</div> <div class="touch-button" draggable="true">Block 3</div> <div class="touch-button-spots"></div> <div class="touch-button-spots"></div> <div class="touch-button-spots"></div> </div> <script src="dynamicDivs.js"></script> </body> </html> 当我制作这个项目时，我想对标记为 Block1、Block 2 和 Block 3 的块做一些事情：根据“点击”事件更改颜色。在“mousedown”事件中，我希望框看起来像被按下，而不具有“阴影”效果。在“mouseup”事件中，我希望框具有基于“click”事件中样式更改的 box-shadow 属性。我的 JavaScript 代码适用于目标#1。对于目标 #2 和目标 #3，它仅在方块为蓝色而不是红色时才有效。在下面的代码中，我期望我的 box-shadow 属性能够与位置属性“top”和“left”一起正确操作。这是我的 JavaScript 代码（它是 Vanilla JavaScript！）。这就是问题发生的地方： const touchButtons = document.querySelectorAll(".touch-button"); let draggedElement = null; function toggleTouchButtonColor(event) { if (event.target.classList.contains("touch-button")) { event.target.classList.add("touch-button-click"); event.target.classList.remove("touch-button"); } else if (event.target.classList.contains("touch-button-click")) { event.target.classList.add("touch-button"); event.target.classList.remove("touch-button-click"); } } function mouseDownTouchButton(event) { event.target.style.top = "5px"; event.target.style.left = "5px"; } function mouseUpTouchButton(event) { event.target.style.top = "0px"; event.target.style.left = "0px"; } touchButtons.forEach(function (touchButton) { touchButton.addEventListener("mousedown", mouseDownTouchButton); touchButton.addEventListener("mouseup", mouseUpTouchButton); touchButton.addEventListener("click", toggleTouchButtonColor); }); 这是我的 CSS 样式表供您参考： #touch-buttons-grid { width: 90%; height: 200px; margin: 10px auto; margin-top: 20px; background-color: rgba(220, 200, 10, 0.5); border-radius: 10px; display: grid; grid-template-columns: repeat(3, 30%); align-items: center; justify-content: center; z-index: 1; } .touch-button, .touch-button-spots { width: 40%; height: 50px; margin: 5px auto; padding: 5px; border-radius: 10px; font-size: 20px; text-align: center; z-index: 5; position: relative; } .touch-button { background-color: rgba(60, 95, 240, 0.5); box-shadow: 5px 5px rgba(60, 95, 240, 0.25); } .touch-button-click { width: 40%; height: 50px; margin: 5px auto; padding: 5px; border-radius: 10px; background-color: rgba(220, 41, 10, 1); box-shadow: 5px 5px rgba(220, 41, 10, 0.5); font-size: 20px; text-align: center; z-index: 5; } .touch-button-spots { width: 50%; height: 60px; background-color: rgba(61, 54, 54, 0.75); box-shadow: 5px 5px rgba(61, 54, 54, 0.5); } 这似乎解决了它： 1) 修改 javascript 以将函数也应用于 .touch-button-click 类 2) 使用 CSS 伪类 :hover 和 :active 为 HTML 按钮单击设置动画 3) 您在 CSS 中缺少 position: relative .touch-button-click 例如： const touchButtons = document.querySelectorAll(".touch-button"); const touchButtonsClick = document.querySelectorAll(".touch-button-click"); let draggedElement = null; function toggleTouchButtonColor(event) { if (event.target.classList.contains("touch-button")) { event.target.classList.add("touch-button-click"); event.target.classList.remove("touch-button"); } else if (event.target.classList.contains("touch-button-click")) { event.target.classList.add("touch-button"); event.target.classList.remove("touch-button-click"); } } function mouseDownTouchButton(event) { event.target.style.top = "5px"; event.target.style.left = "5px"; } function mouseUpTouchButton(event) { event.target.style.top = "0px"; event.target.style.left = "0px"; } touchButtons.forEach(function(touchButton) { touchButton.addEventListener("mousedown", mouseDownTouchButton); touchButton.addEventListener("mouseup", mouseUpTouchButton); touchButton.addEventListener("click", toggleTouchButtonColor); }); touchButtonsClick.forEach(function(touchButtonClick) { touchButtonClick.addEventListener("mousedown", mouseDownTouchButton); touchButtonClick.addEventListener("mouseup", mouseUpTouchButton); touchButtonClick.addEventListener("click", toggleTouchButtonColor); }); #touch-buttons-grid { width: 90%; height: 200px; margin: 10px auto; margin-top: 20px; background-color: rgba(220, 200, 10, 0.5); border-radius: 10px; display: grid; grid-template-columns: repeat(3, 30%); align-items: center; justify-content: center; z-index: 1; } .touch-button, .touch-button-spots { width: 40%; height: 50px; margin: 5px auto; padding: 5px; border-radius: 10px; font-size: 20px; text-align: center; z-index: 5; position: relative; } .touch-button { background-color: rgba(60, 95, 240, 0.5); box-shadow: 5px 5px rgba(60, 95, 240, 0.25); } .touch-button-click { width: 40%; height: 50px; margin: 5px auto; padding: 5px; border-radius: 10px; background-color: rgba(220, 41, 10, 1); box-shadow: 5px 5px rgba(220, 41, 10, 0.5); font-size: 20px; text-align: center; z-index: 5; position: relative; } .touch-button-spots { width: 50%; height: 60px; background-color: rgba(61, 54, 54, 0.75); box-shadow: 5px 5px rgba(61, 54, 54, 0.5); } .touch-button:hover { background-color: #0a5699; filter: brightness(0.85); } .touch-button-click:hover { background-color: #9b1d07; filter: brightness(0.85); } .touch-button:active, .touch-button-click:active { filter: brightness(0.65); box-shadow: unset; transform: translateY(1px); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic and Draggable Divs</title> <link rel="stylesheet" href="dynamicDivs.css"> </head> <body> <div id="touch-buttons-grid"> <div class="touch-button" draggable="true">Block 1</div> <div class="touch-button" draggable="true">Block 2</div> <div class="touch-button" draggable="true">Block 3</div> </div> <script src="dynamicDivs.js"></script> </body> </html>

javascript css dom

回答 1 投票 0

D365 CRM 如何使用queryselectorall()访问子网格单元DOM

我的客户需要这个功能，我对 CRM 定制非常陌生，我主要做后端，所以插件自定义操作和自定义 api。下面的所有 3 个代码始终返回 null。多么...

javascript dom frontend dynamics-crm queryselector

回答 0 投票 0

Chrome 扩展程序临时禁用事件侦听器

我有一个 chrome 扩展，它可以在 keydown 事件上打开一个对话框。如何在对话框打开时禁用所有其他 keydown 事件，并在再次关闭后启用它们（我的 keydown 事件侦听器是

javascript html dom

回答 0 投票 0

无法通过点击获取元素数据

大家，我一直在做一件事。我在 JavaScript、JQuery 中有这样的代码。而那些带有点击的下部，我只是无法从点击的元素中获取 data-num 属性。我已经尝试了100次