Vanilla Javascript - 如何使用 querySelectorAll('*') 循环遍历 DOM 中的元素

Question

 var cancelBtn = document.querySelector(".btn--cancel"); var acceptBtn = document.querySelector(".btn--accept"); var thankYouPopup = document.querySelector(".thank-you-popup"); var comeBackSoonPopup = document.querySelector(".come-back-soon-popup"); document.addEventListener( "click", function(e) { if ( ((e.target.className !== "btn btn--cancel" || e.target.className !== "btn btn--accept") && e.target.className == "btn-container") || (e.target.className !== "thank-you-popup" && e.target.className == "thank-you-container") || (e.target.className !== "come-back-soon-popup" && e.target.className == "come-back-soon-container") ) { console.log("foo"); var els = document.querySelectorAll("*"); for (let i = 0; i < els.length; i++) { console.log("els[i]", els[i]); if ( els[i].left === "0" && (els[i].className === "thank-you-popup" || els[i].className === "come-back-soon-popup") ) { setTimeout(function() { els[i].style.left = "10000px"; }, 0); } } } }, false ); function myEventHandler(el) { if (getComputedStyle(el).left == "10000px") { el.style.left = "0"; setTimeout(function() { el.style.left = "10000px"; }, 8000); } else { el.style.left = "10000px"; } } cancelBtn.addEventListener( "click", function() { myEventHandler(comeBackSoonPopup); }, false ); cancelBtn.removeEventListener( "click", function() { myEventHandler(comeBackSoonPopup); }, false ); acceptBtn.addEventListener( "click", function() { myEventHandler(thankYouPopup); }, false ); acceptBtn.removeEventListener( "click", function() { myEventHandler(thankYouPopup); }, false );

 * { box-sizing: border-box; } body { overflow-x: hidden; } main { height: auto; margin-top: 0%; font: 1rem system-ui; } .thank-you-container, .come-back-soon-container { width: 100%; display: flex; justify-content: flex-end; } .thank-you-popup, .come-back-soon-popup { text-align: center; padding: 5%; height: 38px; background: lightgrey; border: 3px solid #bbb; border-radius: 4px; width: 50%; display: flex; justify-content: center; align-items: center; font-size: 3em; text-shadow: 0px 1px 0px; position: relative; left: 10000px; transition-property: left; transition-duration: 1s; } p { text-shadow: 0px 1px 0px rgba(255, 255, 255, 1); } .btn-container { margin: 5% 0; display: flex; justify-content: center; } .btn { display: inline-block; margin: 0 1%; height: 38px; padding: 0 30px; line-height: 38px; color: #ffffff; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; -o-transition: background-color 0.225s ease-in; transition: background-color 0.225s ease-in; } .btn--cancel { background-color: #ff4136; } .btn--cancel:hover { background-color: #e2392f; } .btn--accept { background: #01ff70; } .btn--accept:hover { background-color: #06da63; }

 <main> <div class="thank-you-container"> <div class="thank-you-popup"> <p>Thank you!</p> </div> </div> <div class="btn-container"> <button class="btn btn--cancel">cancel</button> <button class="btn btn--accept">accept</button> </div> <div class="come-back-soon-container"> <div class="come-back-soon-popup"> <p>Come back soon!</p> </div> </div> </main> <!-- In this exercise, you are asked to create a couple of buttons that, when clicked, trigger the display of popups. We want to not only see your coding skills, but also your eye for design and experience. Follow the instructions below and feel free to explain what you're doing or ask questions as you go. 1. Create two buttons centered on the page, next to each other. One should be for canceling and the other for accepting, so use appropriate background colors. The buttons should have rounded borders and should brighten up a bit with easing on hover. 2. Create two popups, one positioned a bit off from the bottom right corner of the page and the other from the top right. The popups should have rounded corners, a slightly thick border, and some padding. One popup should contain the text "Thank you!" while the other should contain the text "Come back soon." 3. Now, position the two popups off screen to the right using CSS. 4. We will now complete the exercise. Add a click handler to each button. For the first button, when clicked we want to slide the "Come back soon" popup from the right into view. For the second button, when clicked we want to slide the "Thank you!" popup from the right into view. The popups should slide back out of view 8 seconds after coming into view or when clicking anywhere on the page except the buttons and the popups. 5. BONUS: Make this work for touch devices! -->

我即将在练习中满足此要求：

我们现在将完成练习。 为每个按钮添加一个点击处理程序。 对于第一个按钮，当点击时，我们希望将“很快回来”弹出窗口从右侧滑动到视图中。 对于第二个按钮，单击时我们要滑动“谢谢！” 从右侧弹出到视图中。 弹出窗口应在进入视图 8 秒后或单击页面上除按钮和弹出窗口之外的任何位置时滑回视图之外。

我决定在文档上隔离这个 eventListener 以仅循环 DOM 中的元素，但是当我console.log吐出每个可能的节点时，即空格、css、脚本标签。

谁能帮我隔离dom中的元素？

我已经包含了一个工作示例，HTML、CSS 和 JavaScript

提前致谢！

Answer 1

这是你想要的吗？

var els = document.querySelectorAll("body *");