dom 相关问题

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

如何测量首屏油漆？

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

如何使用 Renderer2 设置 Angular 中原生元素的值？

我想设置nativeElement的innerText/innerHTML/textContent？ this.render.setValue(this.nativeCloneLi.querySelector('.down .inn'), timeVal); 其中 timeVal 是一个字符串该元素是

javascript angular dom angular-renderer2

回答 2 投票 0

对于 XPATH，如何对不同类型的祖先使用 OR？

我试图阻止某些结果出现在我的 Google 搜索中，但我很难使用 uBlock Origin 简洁地创建单行块。例如，我不想要“www”。伊米丰....

regex xml dom xpath ublock-origin

回答 1 投票 0

JavaScript 图像替换

我想知道是否有一种简单的方法可以让脚本循环遍历网页上的所有图像（可能属于某个类别）并将所有这些图像的来源更改为同一图像。这是为了

javascript image dom

回答 3 投票 0

如何在React中使用类列表？

我试图在页面大小调整时将导航栏从桌面视图更改为移动视图。现在我已将导航栏代码设置为 2 个不同的组件，其中一个是桌面 vi...