dom 相关问题

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

我有以下名为index.html的HTML文件：我有以下名为 index.html 的 HTML 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Components test</title> <script src="/script.js"></script> </head> <body> <h1>All reviews:</h1> <div id="CK-reviews"></div> <h1>All users:</h1> <div id="CK-users"></div> <h1>Search Users</h1> <div id="CK-search"></div> </body> </html> 脚本文件名为 script.js: // Fetch calls for data const get = async (id, filters, url) => { const encodedFilters = btoa (JSON.stringify (filters)) const rawResponse = await fetch (url, {headers: { "id": id, "filters": encodedFilters }}) const response = await rawResponse.json() return response } const post = async (createData, url) => { const rawResponse = await fetch (url, {body: JSON.stringify (createData)}) const response = await rawResponse.json() return response } // Inject data into correct divs const injectReviews = async () => { const data = await get ("655643cd1c82275babfaf859", {title: "Thank you"}, "http://localhost:3000/api/reviews/add") const reviews = data.reviews const reviewsContainer = document.getElementById("CK-reviews") let injectHtml = "" for (let i = 0; i < reviews.length; i++) { injectHtml += ` <div class="CK-review"> <h1 class="CK-review-title">${reviews[i].title}</h1> <b>${reviews[i].stars}</b> <p class="CK-search-text">${reviews[i].text}</p> </div>` } reviewsContainer.innerHTML += injectHtml } const injectUser = async () => { const data = await get ("64e15d2329617fb0163de018", {}, "http://localhost:3000/api/user") const users = data.user const usersContainer = document.getElementById("CK-users") let injectHtml = "" for (let i = 0; i < users.length; i++) { injectHtml += ` <div class="CK-user"> <h1 class="CK-user-name">${users[i].name}</h1> </div>` } usersContainer.innerHTML += injectHtml } const injectSearch = () => { const searchContainer = document.getElementById("CK-search") searchContainer.innerHTML = `<input type="text" placeholder="Search for anyone"/>` } injectReviews() injectUser() injectSearch() 问题出在注入搜索功能中，我收到错误： Uncaught TypeError: can't access property "innerHTML", searchContainer is null injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 script.js:70:5 injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 发生什么事了？该元素确实存在。当尝试访问函数内的其他元素时，我收到相同的错误。所有其他功能都有效。可能是脚本在 dom 完成之前运行，请尝试在文档完全加载并准备好后运行脚本。 document.addEventListener("DOMContentLoaded", () => { injectReviews(); injectUser(); injectSearch(); });

javascript html dom innerhtml

回答 1 投票 0

将 HTMLCollection 的内容附加到 Body

我正在努力：将 HTML 字符串解析为 DOM 对象提取段落（本例中为 10 段）将提取的段落附加到正文我有以下代码： $(文档).ready(函数(){ ...

javascript html dom

回答 2 投票 0

鼠标悬停时突出显示 DOM 元素，就像检查一样

我们有一个书签，用户单击一个按钮，然后需要启动像 highligther 这样的检查。我们希望这是跨浏览器的。为此，我们需要在运行过程中检测 DOM 元素...

javascript html dom bookmarklet highlight

回答 2 投票 0

Javascript 我无法删除事件监听器

下面是我的代码的缩短版本。问题是我无法删除函数内的事件侦听器，这会触发一个简单的警报。有什么帮助吗？ const resizers = document.querySelectorAll(".