dom 相关问题

HTML DOM：无法以编程方式编辑元素值

我正在尝试自动化某些网站上的一些任务，包括Google Finance。但是，当我尝试编辑 Google 财经搜索输入中的输入值时，它根本不起作用。有没有人可以...

DOM 元素更新非常慢

我正在编写这个初学者石头剪刀布游戏。添加了事件监听器。不知怎的，它的工作方式非常奇怪。 当我点击武器时，每次点击之间有大约 2 秒或更长时间的延迟 - 它起作用了......

MUI 仅处理 onBlur 和 onKeyPress 之一

我目前正在处理一个 TypeScript 和 Material-UI 项目。我的目标是管理 TextField 组件的 onBlur 事件和 onEnter 按键事件。 场景如下：我已经集成了

org.w3c.dom.DOMException：NAMESPACE_ERR：从 Java8 迁移到 Java17

我们有两个有一定用途的应用程序 一个应用程序是基于 Eclipse GUI 的桌面 UI 应用程序 - 使用 Java8 和 Eclipse Ganymede 最近从...迁移的第二个应用程序

Hostinger Website Builder，嵌入的Javascript无法访问文档正文

我有一个 Hostinger 网站构建器创建的网站，我正在尝试通过 Javascript 使用其数据属性进行访问，将标题添加到锚标记。我检查了有问题的网页...

onClick事件。更换React组件后detail未重置

onClick event.detail 包含点击次数：双击有 event.detail = 2。 当点击的React组件被替换时，event.detail不会重置。我怀疑这是因为 R...

Vue Js 组件语法

我在 Vue JS 中创建了一个名为“Component”的组件。我了解到我们在父组件模板中使用组件，如下所示。 我是标题<... 我在 Vue JS 中创建了一个名为“Component”的组件。我了解到我们在父组件模板中使用组件，如下所示。 <template> <p>I am a heading </p> <Component/> </template> 但是如果我像 HTML DOM 元素语法一样使用组件语法并在其中嵌入更多 HTML 标记，那么它实际上意味着什么？我是 Vue JS 新手，对此一无所知。 <template> <Component> <div> Hello I am a div </div> </Component> </template> 正如您提到的，有两种使用自定义组件的方法。 如果我们不传递任何子元素，我们通常使用 self-closing tag 组件 如果您需要将子组件传递给组件，则必须使用第二种方法。组件内的子组件称为 slot 您可以在this文章中阅读有关插槽（又名子组件）的更多信息 Component标签内的HTML标记将转到组件中定义的插槽。 所以，如果 Component 定义如下 <template> <h1>This is content of component</h1> <slot></slot> </template> 并在父组件中使用如下 <template> <Component> <div> Hello I am a div </div> </Component> </template> 然后下面的内容将会被实际渲染 <h1>This is content of component</h1> <div> Hello I am a div </div> 您可以通过两种方式在父组件中渲染该组件： 1) <template> <div> <p>we are in parent component</p> <CustomComponent /> </div> </template> 或 2) <template> <div> <p>we are in parent component</p> <CustomComponent></CustomComponent> </div> </template> 现在，如果您需要将自定义内容放入子组件中，可以使用 vue.js“slot” 来实现。 这就是它的工作原理： // Child component: which is a button that we want to put a custom icon inside it // componentName: CustomBtn <template> <button class="flex gap-x-2 items-center"> <span>Click here</span> <slot /> </button> </template> 现在在父组件内部： <template> <CustomBtn> <!-- everything inside here, will be passed to the Slot --> <i class="fa fa-pencil"></i> </CustomBtn> </template> Vue Js 会将其编译为： <button class="flex gap-x-2 items-center"> <span>Click here</span> <i class="fa fa-pencil"></i> </button>

正确包含CSS

我有一个 Django 模板（主页），其中包含另一个模板（导航栏）。 我的主页有一个 CSS 文件，导航栏也有一个。 我的问题是：如何正确包含...

当现代浏览器可以有效处理 DOM 更改时，为什么 React 使用虚拟 DOM 的概念？

在传统浏览器中，开发人员通常必须直接操作整个文档对象模型（DOM），在发生更改时触发整个结构的重新渲染或修改。哈...

视频播放选项

我是javascript的初学者，我设法合并了控制视频播放的两个函数，但是，它们彼此有点干扰。 该功能应该提供自定义暂停和播放...

e.matches()方法是否遍历DOM？

e.matches()方法是否必须遍历DOM来评估选择器？ 我问是因为以下情况： if ( e.matches('.class_1, .class_1 *') { /* 做一点事。 */ } else if ( e.mat...

输入触发按键事件两次

这个问题之前已经被问过/回答过（大部分），但是我尝试了三件事来阻止事件冒泡，但没有任何效果： 返回假； e.stopPropagation(); e.preventDefault(); (

如何创建一个逐个删除元素的函数？

我正在用JavaScript创建一个渐变编辑器，我已经创建了添加颜色的功能，但是我无法创建删除颜色的功能，想法是当访问者右键单击

为什么 select 标签不能与 datalist 标签一起使用？

在 HTML5 中，引入了 标签（Spec），与 元素一起使用。它包含一组 元素，就像 标签一样。 然而，使用... 在 HTML5 中，引入了 标签 (Spec)，与 <input> 元素一起使用。它包含一组 <option> 元素，就像 <select> 标签一样。 但是，使用 <input> 标签允许用户输入自己的文本，其中下拉选项有点像次要功能。而 <select> 标签则强制用户选择已定义的选项之一。 所以我想：为什么不创建一个 <select> 元素，并给它一个数据列表，而不是单独定义每个 <option> 。我有一个项目，在同一页面上有多个 select 元素，它们共享相同的选项集，所以我认为这将是一个很好的优化。然而，这不起作用。可以尝试这里。 现在这不是一个关于如何去做这件事的问题，因为我认为很明显，目前这是不可能的。我也找不到任何提供类似功能的库。我只是好奇为什么这是不可能的。这只是一个疏忽，以后可能会纠正吗？这个想法是否存在我没有想到的重大问题？ 这不可能，也不可能。 list 上的属性 <inputs> 不是 <select> 的有效属性。 在此选择规格 在 HTML5 (https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element) 中，SELECT 元素允许 零 内部元素（OPTION、OPTGROUP 或 HR）它的内容模型。它的属性是全局属性（id、style、...）和可选的输入特定属性（名称、表单、必需、大小、多个、禁用和自动完成）。所请求的是一种通过引用将列表指定为属性的方法。如果不可能作为 SELECT 的附加属性，则可以通过插入单个 OPTGROUP 元素作为 SELECT 的内容来实现。 OPTGROUP的内容模型也允许空内容，其输入特定的属性是label（必需）和disabled（可选）。使用全局属性（如 itemid、itemref、itemscope、itemprop...）可以实现此类扩展

dom-to-image 在尝试从静止视频捕获缩略图时会生成错误的图像

我第一次使用dom-to-image。 我想从使用 HTML5 视频标签显示的静止视频中捕获缩略图。 我正在使用密切基于所提供的示例的代码......

为什么 javascript 控制台说“htmlmenubutton”未定义，但我很确定它是[关闭]

我正在为学校制作一个项目，当我测试它时，我正在为其制作一个下拉菜单，JavaScript控制台显示：“htmlmenubutton”的定义与cssmenubutton不同&

当我使用Javascript单击删除按钮时，如何从DOM中删除TODO项目列表？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TODO app</title> </head> <script> function deleteDone(id) { console.log("Deleted todo ID:", id); // Delete the right todo from the list // You will need to give each todo an id, and that should be enough to remove it } function deleteTodo(id) { fetch("http://localhost:3000/todos/" + id, { method: "DELETE", headers: { "Content-Type": "application/json" } }).then(deleteDone) } function getTodoscallBack(data){ console.log(data); var parentElement = document.getElementById("mainArea"); // parentElement.innerHTML = JSON.stringify(data); for(var i=0;i<data.length;++i){ var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML= data[i].title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML= data[i].description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML="Delete"; grandChildren3.setAttribute("onclick","deleteTodo("+data[i].id+")"); childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } } function callbackFn2(res){ res.json().then(getTodoscallBack); } function getData(){ fetch("http://localhost:3000/todos",{ method:"GET", }).then(callbackFn2); } getData(); function parsedResponse(data){ console.log(data); var parentElement = document.getElementById("mainArea"); var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML= data.title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML= data.description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML="Delete"; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } function callback(res){ res.json().then(parsedResponse); } function onPress(){ var title = document.getElementById("title").value; var description = document.getElementById("description").value; console.log(title,"\n",description); fetch("http://localhost:3000/todos",{ method:"POST", body: JSON.stringify({ title: title, description:description }), headers: { "Content-Type": "application/json" } }).then(callback); } </script> <body> Todo title <input type="text" id="title"></input> <br><br> Todo description <input type="text" id="description"></input> <br><br> <button onclick="onPress()">send todo</button> <div id="mainArea"> </div> </body> </html> 在 TODO 项目的删除功能中，我想删除具有给定 id 的特定待办事项，但我在选择父级（即 div 标签）时遇到困难，其中我存储了标题描述和删除按钮，我通过使用 javascript 发送请求来添加该按钮。问题如何使用removeChild()删除具有id的特定删除按钮的div标签？如何做到这一点？ 我复制了与您完全相同的代码，并传递了一个伪造的数组来建模待办事项，就像您已经做的那样 const todos = [{ id: 1, title: 'title#1', description: 'description#1' }, { id: 2, title: 'title#2', description: 'description#2' }]; 为了与您的策略保持一致，在创建待办事项的逻辑中，我添加了使用相应的待办事项 id 设置每个删除按钮的 data-id 属性的功能，然后在 deleteDone 函数中我获取了单击的删除使用属性选择器按钮，然后删除使用 div 检索到的整个 closest 容器。 const todos = [{ id: 1, title: 'title#1', description: 'description#1' }, { id: 2, title: 'title#2', description: 'description#2' }]; getTodoscallBack(todos); function deleteDone(id) { console.log("Deleted todo ID:", id); //retrieves the delete button holding the data-id attribute passed const delButton = document.querySelector(`[data-id="${id}"`); //retrieves the element containing that button const todoContainer = delButton.closest('div'); //removes the whole div containing the todo todoContainer.remove(); } function deleteTodo(id) { /* fetch("http://localhost:3000/todos/" + id, { method: "DELETE", headers: { "Content-Type": "application/json" } }).then(deleteDone) */ deleteDone(id); } function getTodoscallBack(data) { console.log(data); var parentElement = document.getElementById("mainArea"); // parentElement.innerHTML = JSON.stringify(data); for (var i = 0; i < data.length; ++i) { var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML = data[i].title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML = data[i].description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML = "Delete"; grandChildren3.setAttribute("onclick", "deleteTodo(" + data[i].id + ")"); //HERE I set the data-id attribute value as data[i].id grandChildren2.dataset.id = data[i].id; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } } function callbackFn2(res) { res.json().then(getTodoscallBack); } function getData() { fetch("http://localhost:3000/todos", { method: "GET", }).then(callbackFn2); } getData(); function parsedResponse(data) { console.log(data); var parentElement = document.getElementById("mainArea"); var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML = data.title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML = data.description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML = "Delete"; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } function callback(res) { res.json().then(parsedResponse); } function onPress() { var title = document.getElementById("title").value; var description = document.getElementById("description").value; console.log(title, "\n", description); fetch("http://localhost:3000/todos", { method: "POST", body: JSON.stringify({ title: title, description: description }), headers: { "Content-Type": "application/json" } }).then(callback); } <body> Todo title <input type="text" id="title"> <br><br> Todo description <input type="text" id="description"> <br><br> <button onclick="onPress()">send todo</button> <div id="mainArea"> </div> </body>

如何控制一个元素滚动另一个元素

正如你可以看到我的html的结构，我试图将光标定位在屏幕的左列并向下滚动，这样我就不会在正文内滚动并转到页脚，而是......

在 React.js 中实现“阅读更多”链接

我正在尝试实现一个“阅读更多”链接，该链接展开以显示 单击后显示更多文本。我正在尝试以 React 的方式做到这一点。 Lorem Ipsum 是... 我正在尝试实现一个 Read More 链接，该链接会展开以显示 单击后显示更多文本。我正在尝试以 React 方式做到这一点。 <!--html--> <div class="initialText"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <a> Read More </a> </div> <div class="fullText"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> /* JavaScript */ /* @jsx DOM */ var component = React.createClass({ getInitialState: function() { return { expanded: false }; }, expandedText: function() { this.setState({ expanded: true }); }, render: function() { return ( <div> </div> ); } }); 我是 React 新手。我不确定如何处理渲染方法中的所有内容。如何在纯 React 中实现此功能？ 所以基本上你想根据状态属性“expanded”显示一个额外的 div。 您可以有条件地创建组件。如果你不想要一个组件，你可以直接返回 null。 我只想有一个小方法，例如： var component = React.createClass({ getInitialState: function() { return { expanded: false }; }, expandedText: function() { this.setState({ expanded: true }); }, getMoreTextDiv: function() { if (this.state.expanded) { return <div> My extended content </div>; } else { return null; } } }); 你的渲染函数应该变成： render: function() { var expandedDiv = this.getMoreTextDiv(); return ( <div> <a onClick={this.expandedText}>Read more</a> { expandedDiv } </div> ); } 每次调用 setState() 时，都会使用新状态触发 render()。 如果 Expanded 为 false，您将返回 null 作为组件，这基本上意味着什么都没有。所以什么也不会显示。 当您单击链接时，它将更新您的状态和展开的值，因此您将返回一个 div 作为组件并将其显示。 我认为阅读this是一个好的开始。 这是一篇非常棒的文章，解释了渲染的基本工作原理以及与状态的链接。 您还应该确保您理解这种小示例 http://jsfiddle.net/3d1jzhh2/1/ 以了解状态和渲染如何相互链接。 再次迟到回答，但也许有人会需要它。 所以基本上你只需要一个组件来接收你想要显示的文本。 然后，您将使用 useState 钩子来设置文本长度的值 - 是否需要显示短版本或长版本，最后一个函数将在文本的短版本和长版本之间切换。 代码示例： import React, { useState } from 'react'; const ReadMore = ({text}) => { const [isReadMore, setIsReadMore] = useState(true); const toggleReadMore = () => {setIsReadMore(!isReadMore)}; return ( <p className='testimonials__quote__text'> {isReadMore ? text.slice(0, 150): text } // condition that will render 'read more' only if the text.length is greated than 150 chars {text.length > 150 && <span onClick={toggleReadMore}> {isReadMore ? '...read more' : ' ...show less'} </span> } </p> ) } export default ReadMore; 您可以尝试 read-more-react 库，链接：https://www.npmjs.com/package/read-more-react npm install --save read-more-react import ReadMoreReact from 'read-more-react'; <ReadMoreReact text={yourTextHere} min={minimumLength} ideal={idealLength} max={maxLength} /> 你几乎走在正确的轨道上。正如反应文档中所述： https://facebook.github.io/react/tips/if-else-in-JSX.html 它只是使用经典的 if 和一个变量，如下所示： render: function() { var expandedContent; if (this.state.expanded) { expandedContent = <div>some details</div>; } return ( <div> <div>Title or likewise</div> {expandedContent} </div> ); } 我知道我回答这个问题有点晚了，但为什么不只使用 1 个字符串而不是使用 2 个字符串呢？ 查看这个 npm 包 https://www.npmjs.com/package/react-simple-read-more 它会解决问题。 如果您对代码感兴趣：https://github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx 这就是 React Js 中的完整解决方案： 调用组件： <TeamCard description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." limit={150}/> 成分： const TeamCard = ({ description, limit }) => { const [showAll, setShowAll] = useState(false); return ( <p className="text-center text-white text-base pt-3 font-normal pb-5"> {description.length > limit ? ( <div> {showAll ? ( <div> {description} <br /> <button onClick={() => setShowAll(false)} className="text-primary" > Read Less </button> </div> ) : ( <div> {description.substring(0, limit).concat("...")} <br /> <button onClick={() => setShowAll(true)} className="text-primary"> Read More </button> </div> )} </div> ) : ( description )} </p> ); }; export default TeamCard; 构建一个简单的组件（去掉样式）。 用途： <ReadMore text={someLongText} maxChars={500} /> 代码： import React from "react"; interface ReadMoreProps extends React.HTMLAttributes<HTMLDivElement> { text: string; maxChars: number; readMoreText?: string; readLessText?: string; } const ReadMore = ({ className, text, maxChars, readMoreText = "read more", readLessText = "read less", }: ReadMoreProps) => { const [isExpanded, setIsExpanded] = React.useState(false); const hasReadMore = text.length > maxChars; return ( <div className={className}> {text && (isExpanded || !hasReadMore) && ( <p> {text}{" "} {hasReadMore && !!isExpanded && ( <span onClick={() => setIsExpanded(false)} > {readLessText} </span> )} </p> )} {text && !isExpanded && !!hasReadMore && ( <p> {text.slice(0, maxChars)}...{" "} <span onClick={() => setIsExpanded(true)} > {readMoreText} </span> </p> )} </div> ); }; export default ReadMore;

如何求这段js代码的时间和空间复杂度？

这是我的平台用来查找两个节点之间关系的两个代码。 代码1： const getNodeRelationship = (节点1, 节点2) => { // 如果node1和node2是同一个节点 如果（...