dom 相关问题

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

我按以下方式使用app-some组件如何检查 app-somecomponent 是否具有 app-somecompo 中所需的属性...

javascript angular dom

回答 4 投票 0

for循环innerHTML +=不起作用富巴 document.getElementById('outSecs').</desc> <question vote="-1"> <p>在 addeventlistener 负载上调用函数时，for 循环 insideHTML += 不起作用</p> <pre><code><main id='outSecs'> foobar </main> <script> document.getElementById('outSecs').addEventListener('load', myFn); function myFn() { for (var q = 1; q <= 9; q++) { document.getElementById('outSecs').innerHTML += "<section><p class='myOutput'></p></section>"; } } </code></pre> <p>如何在加载时插入带有innerHTML的循环代码？</p> </question> <answer tick="false" vote="0"> <p>我建议你使用窗口的 DOMContentLoaded 事件。</p> <p>代码也可以更优雅。无需每次都获取主容器。只需获取一次并填充即可。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const myFn = () => { const mainContainer = document.getElementById('outSecs'); mainContainer.innerHTML = Array.from({ length: 9 }) .map((_, i) => `<section id="s${i}"><p class="myOutput">${i+1}</p></section>`) .join('') }; window.addEventListener('DOMContentLoaded', myFn)</code></pre> <pre><code><main id='outSecs'> foobar </main></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript html dom addeventlistener getelementbyid

回答 0 投票 0

onblur 事件阻止 onclick

尝试选择下拉列表中的项目。当我尝试单击该项目时，由于 onBlur，它没有单击。我看到很多带有 onMouseDown 的解决方案，但很多人说这不是

javascript reactjs dom

回答 1 投票 0

documnt.addEventListener 导致“未捕获的类型错误‘属性handleEvent’不可调用。”

我有一个简单的 HTML 文件，它加载脚本“asyncLoader.js”： ...

dom firefox addeventlistener

回答 1 投票 0

javascript如何找到包含文本的DOM节点？

给定一个获取的html页面，我想找到包含一部分文本的特定节点。我想最困难的方法是一一迭代所有节点，尽可能深入，然后......

javascript dom html-parsing domparser

回答 2 投票 0

为什么在 <IMG> 事件处理程序中运行的 JavaScript 中 x 和 y 是不可变的？

我正在使用 Chrome，以防这是浏览器特定的行为当我尝试在图像的 onLoad 或 onError 事件处理程序中使用 JavaScript 设置 x 变量的值时，我无法做到。 x 和 y s...

javascript google-chrome dom scope immutability

回答 1 投票 0

documentElement节点使用innerHTML时不会触发MutationObserver

我发现了 MutationObserver 接口，用于拦截和分析 DOM 中的更改。它工作得很好，我已经成功拦截了所有 DOM 更改...除了 DOM c...

javascript dom dom-events innerhtml mutation-observers

回答 1 投票 0

按钮切换绑定事件bug

重新赋值getRes时，num的打印值保持不变，但重新绑定DOM点击事件时不会出现这个问题。是什么原因导致这个问题呢？我尝试切换箭头功能，

javascript html dom

回答 1 投票 0

事件循环如何处理 JavaScript 中的 DOM 事件处理程序？

我对浏览器如何处理 JavaScript 事件有点困惑。假设我有两个事件处理程序附加到按钮 A 和 B。这两个事件处理程序花费完全相同的时间来完成。 ...

javascript dom dom-events

回答 2 投票 0

同一元素上的 JavaScript DOM 事件处理程序是否按注册顺序调用相同的事件和阶段？

如果我将多个事件处理程序附加到单个 DOM 元素上的单个事件，是否保证事件处理程序按照它们添加的顺序被调用？或者我不应该依赖这种行为？

javascript dom events event-handling dom-events

回答 1 投票 0

JavaScript DOM 中事件目标的父链中事件监听器的顺序是如何确定的？

假设有一个 div 包含一个链接（a href），并且有三个事件侦听器 - 单击时 - 1）整个页面，2）div 3）标签。如果用户点击a标签，列表如何...

javascript dom event-handling dom-events

回答 1 投票 0

JavaScript DOM 事件处理程序是否按照注册顺序调用？

如果我将多个事件处理程序附加到单个 DOM 元素上的单个事件，是否可以保证事件处理程序按照添加顺序进行调用？或者我不应该依赖这种行为？

javascript dom events event-handling dom-events

回答 1 投票 0

如何测量首屏油漆？

Web Vitals 具有两个众所周知的指标：FCP 和 LCP。测量绘画时间是个好主意。但我有不同的问题。我必须实现一个描述第一个屏幕何时出现的指标

javascript performance dom web-performance core-web-vitals

回答 1 投票 0

createElement() 在将元素追加到 DOM 之前是否会触发回流？令人困惑的 abt DocumentFragment 行为

我试图弄清楚创建元素时何时触发回流或重绘。其上下文试图了解如果元素是...

javascript html dom optimization reflow

回答 1 投票 0

为什么我无法从LI获取DIV子元素？

为什么代码总是返回 false？为什么我无法从 LI 获取 DIV 子元素？让 li = document.getElementById('ul').children 控制台.log(li) 对于(i=0;i 为什么代码总是返回 false？为什么我无法从 LI 获取 DIV 子元素？ let li = document.getElementById('ul').children console.log(li) for(i=0;i<li.length;i++) li.hasChildren ? console.log("true") : console.log("false")// only false <div id="conteinerTask2"> <ul id="ul"> <li class= "el">Element 1 <div class="el-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eum quibusdam obcaecati sunt nulla, culpa nesciunt quas in officia sit. Illo aliquam beatae amet eos placeat neque, earum officiis ratione reiciendis exercitationem.</div></li> <li class= "el">Element 2 <div class="el-txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus ex commodi, laudantium corrupti nam quos.</div></li> <li class= "el">Element 3 <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa obcaecati delectus nulla aperiam sint sit aliquam natus! Voluptatum, minima libero.</div></li> <li class= "el">Element 4 <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing.</div> </li> </ul> </div> 首先，在 for 循环中，您仅访问 li 元素的集合，而不是单独访问每个 li，因为您不通过索引访问它们。其次，没有hasChildren属性。您可以使用 children.length > 0 来代替。 let li = document.getElementById('ul').children for (i = 0; i < li.length; i++) { li[i].children.length > 0 ? console.log("true") : console.log("false") // only false } <div id="conteinerTask2"> <ul id="ul"> <li class="el">Element 1 <div class="el-txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem eum quibusdam obcaecati sunt nulla, culpa nesciunt quas in officia sit. Illo aliquam beatae amet eos placeat neque, earum officiis ratione reiciendis exercitationem.</div> </li> <li class="el">Element 2 <div class="el-txt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus ex commodi, laudantium corrupti nam quos.</div> </li> <li class="el">Element 3 <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa obcaecati delectus nulla aperiam sint sit aliquam natus! Voluptatum, minima libero.</div> </li> <li class="el">Element 4 <div class="el-txt">Lorem ipsum, dolor sit amet consectetur adipisicing.</div> </li> </ul> </div>

javascript dom

回答 1 投票 0

javascript：无法在函数中使用全局变量来导航 dom

这里是初学者... 我缺少什么？我定义了一个全局变量，它是对 html 元素的引用： var x=document.getElementById("xxx1"); 然后，在函数内部尝试引用...

javascript dom variables scope

回答 5 投票 0

Snabbdom - 无法将 TR 添加到表顶部而不完全重新渲染行

我正在尝试向表中添加和删除表行，而不重新呈现所有未修改的行。当我将行添加到表末尾时，现有行不会重新呈现，并且...

html list dom virtual rerender

回答 1 投票 0

如何让 Firefox 扩展等待页面内容的获取请求？

我的 JavaScript 从页面获取 HTML dom 元素，但页面必须发出 HTML get 请求才能获取 HTML 内容。如何让我的脚本在收到的 HTML 而不是默认的 HTML 上运行。 ...

javascript dom firefox-addon get-request

回答 1 投票 0

将 JavaScript 输出打印为 HTML

第一次在这里发帖，请多多包涵！我正在学习 JavaScript 课程，我们正在制作一个网页，该网页会随着 Unix 纪元以来的时间而更新。这个

javascript html dom output

回答 1 投票 0

JavaScript 未添加输入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Youtube Card</title> <style> .container { display: flex; align-items: center; justify-content: space-around; width: 900px; height: 198px; border: 2px solid black; background-color: black; } .box { height: 190px; margin: 4px; /* border: 2px solid grey; */ border-radius: 15px; } .photo { width: 180px; overflow: hidden; } .textbox { width: 681px; color: azure; display: flex; flex-direction: column; align-items: center; justify-content: center; } #img { position: absolute; overflow: hidden; } .numberbox { height: 17px; width: 43px; border: 2px solid black; border-radius: 7px; background-color: black; color: white; display: flex; align-items: center; justify-content: center; z-index: 5; position: relative; top: 163px; left: 129px; font-family: "Roboto", "Arial", sans-serif; font-weight: 500; } .boxtitle { height: 49px; width: 702px; /* border: 2px solid gray; */ display: flex; align-items: center; justify-content: left; color: white; bottom: 12px; position: relative; text-overflow: ellipsis; line-height: 2.2rem; max-height: 4.4rem; font-size: 1.6rem; font-weight: 500; font-family: "Roboto", "Arial", sans-serif; } .boxdescription { height: 99px; width: 702px; /* border: 2px solid grey; */ display: flex; align-items: center; justify-content: left; color: rgb(152, 147, 147); position: relative; top: 3px; } .innerbox { display: flex; align-items: center; justify-content: center; font-weight: 500; font-family: "Roboto", "Arial", sans-serif; } .innerboxdot { font-weight: 400; display: flex; align-items: center; justify-content: center; position: relative; bottom: 3px; font-family: "Roboto", "Arial", sans-serif; } </style> </head> <body> <div class="container"> <div class="photo box"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj_nNfaS6PjY5sGzdvEyn4wrFFrrPl_WSoLQ&usqp=CAU" height="190px" width="180px" id="img" /> <div class="numberbox">Video Time</div> </div> <div class="textbox box"> <div class="boxtitle">Title Here</div> <div class="boxdescription"> <div class="innerbox">Channel Name</div> <div class="innerboxdot">.</div> <div class="innerbox">views</div> <div class="innerboxdot">.</div> <div class="innerbox">upload time</div> </div> </div> </div> <script> console.log("Running Script"); let photo=document.body.children[0].children[0].children[0] let video_time=document.body.children[0].children[0].children[1].innerText let title=document.body.children[0].lastElementChild.children[0].innerText let channel_name=document.body.children[0].children[1].lastElementChild.children[0].innerText let views=document.body.children[0].children[1].lastElementChild.children[2].innerText let upload_time=document.body.children[0].children[1].lastElementChild.children[4].innerText console.log("Running Photo"); let user_photo=prompt("Enter The URL Of Image You Want As Thumbnail : \n(If Not Type \"no\")") if (user_photo=="no" || user_photo=="No" || user_photo=="NO") { document.body.children[0].children[0].children[0].setAttribute("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj_nNfaS6PjY5sGzdvEyn4wrFFrrPl_WSoLQ&usqp=CAU") } else{ document.body.children[0].children[0].children[0].setAttribute("src",user_photo) } console.log(user_photo); console.log("Running Video Timing"); let user_video_time=prompt("Enter Your Video Timing : \n(Type In The Format hour:minute:second or minute:second") video_time=user_video_time console.log(user_video_time, typeof user_video_time); console.log("Running Title"); let user_title=prompt("Enter Title OF Your Video : ") title=user_title console.log(user_title); console.log("Running Channel Name"); let user_channel_name=prompt("Enter Your Channel Name : ") channel_name=user_channel_name console.log(user_channel_name); console.log("Running Views"); // let user_views=prompt("Enter Views :\n(Enter In Pure Number)") // if (user_views.length=4 || user_views.length=5 || user_views.length=6) { // views=String(Math.ceil.((Number)user_views/1000))+"K views "; // } // else if (user_views.length=7 || user_views.length=8 || user_views.length=9) { // views=String(Math.ceil.((Number)user_views/1000000))+"M views " // } // else if (user_views.length=10 || user_views.length=11 || user_views.length=12) { // views=String(Math.ceil.((Number)user_views/1000000000))+"B views " // } // else{ // views=user_views // } // console.log(user_views); console.log("Running Upload Time"); let user_upload_time=prompt("Enter Upload Time : \n(Enter In The Format {Number Month} Or {Number Year})") upload_time=user_upload_time+" ago " console.log(user_upload_time); console.log("End"); </script> </body> </html> 我为自定义 YouTube 卡制作了此代码。所有 console.log 函数都在运行，但输入并未像这样添加 video_time=user_video_time。另请修复评论中的代码（它显示错误，我不知道为什么）。要运行此代码，请将给定代码保存为 html 文件。我尝试使用 querySelector() 更改代码，但没有成功。如果单独输入，所有代码都可以在浏览器控制台中运行。我为自定义 YouTube 卡制作了此代码。所有 console.log 函数都在运行，但输入并未像这样添加 video_time=user_video_time。另请修复评论中的代码（它显示错误，我不知道为什么）。要运行此代码，请将给定代码保存为 html 文件。我尝试使用 querySelector() 更改代码，但没有成功。如果单独输入，所有代码都可以在浏览器控制台中运行。在脚本标签中，当需要更改 HTML 标签时，获取完整的元素（标签）。但这里的“title”或“channel_name”变量，您正在获取标签内的数据。所以， title =“此处的标题”最初。现在，您只需将提示数据分配给该“标题”变量即可。但实际上你需要获取整个标签。例如： let title = document.body.children[0].lastElementChild.children[0] 现在，使用将提示值分配给标题 title.innerText = user_title

javascript html css dom flexbox

回答 1 投票 0

dom 相关问题

最新问题