Vanilla Javascript-如何使用querySelectorAll'*'

问题描述

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",false
);

acceptBtn.addEventListener(
  "click",function() {
    myEventHandler(thankYouPopup);
  },false
);

acceptBtn.removeEventListener(
  "click",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,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吐出所有可能的 node 时，即空白，css，脚本标签。 / p>

有人可以帮我把dom中的元素隔离吗？

我提供了一个工作示例，HTML，CSS和JavaScript

谢谢！

解决方法

这是您想要的吗？

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

dom html javascript