20190710-下午js数组和DOM及js应用实例_js dom 和数组经典案例-CSDN博客

本文链接：https://blog.csdn.net/qq_38901340/article/details/96451830

20190710-下午js数组和DOM及js应用实例

——Javee

DOM树：

查找DOM元素：

document.getElementById - 通过 id 查找 HTML 元素
document.getElementsByTagName - 通过标签名查找 HTML 元素
document.getElementsByName - 通过名字查找 HTML 元素
document.getElementsByClassName - 通过类名找到 HTML 元素
document.querySelector - 返回文档中匹配指定 CSS 选择器的一个元素
document.querySelectorAll - 通过选择器找到指定CSS选择器的一组元素，如果通过属性选择，则如querySelectAll("[name=gender]"（这个代码css同样适用）

数组操作：

.push() - 往数组里面加入元素
.join("-") - 以-将数组里面每个元素连成一个字符串，默认用逗号
.reverse() - 将数组里面的元素翻转
.pop - 将数组中的最后一个元素删掉

js使用实例：漂浮广告（遇到边界就会弹开，鼠标放在广告上就会停止，离开广告继续运动）

<!DOCTYPE html>
<html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <style>
              *{
                  margin: 0;
                  padding: 0;
              }
              #face{
                  position: absolute;
                  z-index: 999;
              }
         </style>
     </head>
     <body>
         <img src="face.jpg" id="face" height="200px"  style="left: 0; top: 0;"
              onmouseover="stop()"
              onmouseout="move()" />
         <script>
              var isTop = true;
              var isLeft = true;
              
              function stop(){
                  cancelAnimationFrame(mymove);
              }
              
              function move(){
                  var node =  document.querySelector("#face");
                  var left =  parseInt(node.style.left);
                  var top = parseInt(node.style.top);
                  
                    //判断广告底部是否碰到浏览器页面底部
                  if(top >= (window.innerHeight -  node.clientHeight))         isTop = false;
                  if(top <= 0)  isTop = true;
                  if(isTop)top++;
                  if(!isTop) top--;
                  
                  if(left >= (window.innerWidth -  node.clientWidth))     isLeft = false;
                  if(left <= 0) isLeft = true;
                  if(isLeft)    left++;
                  if(!isLeft) left--;
                  
                  node.style.top = top + "px";
                  node.style.left = left + "px";
                  
                  mymove =  requestAnimationFrame(move);
              }
              
              var  mymove =  requestAnimationFrame(move);
              
         </script>
     </body>
</html>