标签：WebAPI function const let querySelector div document

一.Dom获取和属性操作

1.获取元素

1.1 根据css选择器来获取DOM元素(重点)

1.选择器匹配的第一个元素
document.querySelector('css选择器');
2.选择匹配多个元素
//返回指定的选择器的所有元素对象集合
document.querySelectorAll('css选择器')
//querSelector() 返回指定选择器的第一个元素对象
const firstBox=document.querySelector('.box');
console.log(firstBox);
console.log(typeof firstBox)//object
//querySelectorAll() 返回指定的选择器的所有元素对象集合
const liAll=document.querySelectorAll('li');
console.log(liAll);
//1.得到一个伪数组 ,有长度有索引号 ,没有pop(),push()等方法
//2.返回的是获取元素对象的集合 以伪数组的形式储存

1.2.其他方法获取DOM元素(了解)

1.id获取
//get获得element元素by通过驼峰命名法
let uname = document.getElementById('wo')
2.类名获取
//根据类名获取元素
const boxs=document.getElementsByClassName('box')
3.获取标签
let lis = document.getElementsByTagName('li')

1.3.获取body和html

  //1.获取body元素
    const body = document.body;
    console.log(body);
  //2.获取html元素
   const html = document.documentElement;
   console.log(html);

1.4.操作元素 innerHTML

 const li=document.querySelector('li');
 li.innerHTML='我是<strong>神仙</strong>无无无无无';
 //能识别文本，能够解析标签

2.修改元素样式

2.1 修改img属性

<img src="./images/1.jpg" alt="" title="图片">
const img = document.querySelector('img')
      img.src = './images/hot.png';
      img.title = '替换文字';
      img.alt='替换';
//<img src="./images/hot.png" alt="替换" title="替换文字">

2.2 通过style修改css

 const div=document.querySelector('div');
 div.style.backgroundColor='red';
 div.style.width='200px'

2.3通过修改类名修改样式

 const box=document.querySelector('.box');
 box.className='change box';

2.4通过classList控制css

const div = document.querySelector('div');
//1.追加一个类
div.classList.add('current');
//2.移除一个类
div.classList.remove('current');
//3.如果没有这个类就添加，如果有这给类就删除这个类
div.classList.toggle('current');

2.5修改表单属性

<input type="password" value="文字内容">
const input =document.querySelector('input')
input.value="用户名";
input.type="text";

2.6选中复选框和禁用按钮

    const input=document.querySelector('[type=checkbox]')
    //选中复选框
    input.checked=true
    const btn=document.querySelector('button')
    //禁用按钮
    btn.disabled=true

3. 自定义属性

1 设置自定义属性

//设置自定义属性
div.setAttribute('index',2)
<div id="id" index='2'></div>

2 获取元素自定义属性值 getAttribute

 const div=document.querySelector('div')
 console.log(div.id);
 console.log(div.getAttribute('index'));//2

3 设置类名

 const div=document.querySelector('div')
 //方法一
  div.className='test';
 //方法二
 div.setAttribute('class','footer')

4 移除自定义属性

div.removeAttribute('index')

5 获取自定义属性

    <div data-id="1" data-name="勇"></div>
    const div=document.querySelector('div')
    //获取自定义属性
    console.log(div.dataset)
    console.log(div.dataset.id)
    console.log(div.dataset.name)

3.事件监听

3.1事件监听语法(重点)

const div = document.querySelector('div');
div.addEventListerner('click',function(){
   alert(1);
})
//addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

3.2事件对象 function(e)

3.2.1 事件返回 e.target

 const div=document.querySelector('div');
 div.addEventListener('click',function(e){
  //e.target 返回的是触发事件的元素
  console.log(e.target);
  //this返回的是绑定事件的元素
   console.log(this);
    })

3.2.2 链接不跳转 e.preventDefault

<a href="#">链接</a>
const a=document.querySelector('a');
//方法一
a.addEventListener('click',function(e){
      e.preventDefault();
    })
//方法二
a.onclick=function(e){
      return false;
      alert(11);
    }
//方法三
<a href="javascript:;">链接不跳转</a>

3.3.3 阻止冒泡 e.stopPropagation()

   const father = document.querySelector('.father');
    const son = document.querySelector('.son');
    son.addEventListener('click', function (e) {
      alert('son');
      //方法一
      e.stopPropagation();//Propagation 传播
      //方法二
      e.cancelBubble = true;//非标准 cancel 取消 bubble 泡泡
    },false)
    father.addEventListener('click', function () {
      alert('father');
    },false)

3.3.4 鼠标在页面文档的x和y坐标 e.pageX

document.addEventListener('click',function(e){
//e.page 鼠标在页面文档的x和y坐标
 console.log(e.pageX);
 console.log(e.pageY);
})

3.3传统事件(了解)

    //事件三要素 事件源 事件类型 事件处理程序
    //事件源
    const btn = document.getElementById('btn');
    //事件类型
    //事件处理程序 通过一个函数赋值
    btn.onclick = function () {
      alert('点秋香');
    } 
    //onclick方式只可绑定一次，后面会覆盖前面

3.3鼠标事件

3.3.1 鼠标点击事件 click

const div = document.querySelector('div');
div.addEventListerner('click',function(){
   alert(1);
})

3.3.2 鼠标经过 mouseenter

const div = document.querySelector('div');
div.addEventListerner('mouseenter',function(){
   alert(1);
})
//mouseenter 不会冒泡
//方法二 mouseover  会冒泡

3.3.3 鼠标离开 mouseleave

const div = document.querySelector('div');
div.addEventListerner('mouseleave',function(){
   alert(1);
})
//mouseleave 不会冒泡
//方法二 mouseout  会冒泡

3.3.4 鼠标移动 mousemove

const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
   alert(1);
})

3.3.5 鼠标按下 mousedown

const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
   alert(1);
})

3.3.6 鼠标弹起 mouseup

const div = document.querySelector('div');
div.addEventListerner('mousemove',function(){
   alert(1);
})

3.3.7 清除事件

const div = document.querySelector('div');
div.addEventListerner('mousemove',fn)
function fn(){
   alert(1);
}
div.removeEventListener('mousemove', fn)

3.4焦点事件

3.4.1 获得焦点 focus

const input = document.querySelector('input');
input.addEventListerner('focus',function(){
   alert(1);
})

3.4.2 失去焦点 blur

const input = document.querySelector('input');
input.addEventListerner('blur',function(){
   alert(1);
})

3.5 键盘事件 keyup keydown

    //1.onkeyup 某个键盘按键被松开时触发
    document.addEventListener('keyup',function(e){
      console.log('up:'+e.key);
    })
    //2.onkeydown 某个键盘按键被按下时触发
     document.addEventListener('keydown',function(e){
      console.log('down:'+e.key);
     })
     //3.onkeypress 某个键盘按键被按下时触发
     document.addEventListener('press:'+e.key);
     //1.使用addEventListener不需要加on
     //2.onkeypress不能识别功能键,区分字母大小写
     //3.执行顺序:keydown > keypress > keyup
     //4.key属性可以得到相应键的ASCII码值
     //5.keydown和keydown区分大小写 可以识别功能键

3.6文本事件 input

const input = document.querySelector('input');
input.addEventListerner('input',function(){
   alert(1);
})

4.节点

4.1 父节点 parentNode和子节点children

    //1.父级节点 parentNode
    const ul=document.querySelector('ul')
    const li=document.querySelector('li');
    // 得到离父元素最近的父级元素 ,如果找不到父节点为null
    console.log(li.parentNode);
    //2.子节点 childern
    console.log(ul.childNodes);//[text, li, text, li, text, li, text, li, text, li, text]
    console.log(ul.children);//[li, li, li, li, li]

4.2 创建节点createElement和在元素最后加appendChild(li)

    //第一步 创建节点元素节点
    const li=document.createElement('li');
    //第二步 添加节点
    const ul=document.querySelector('ul');
    //在元素最后面加
    ul.appendChild(li);
    //添加节点
    const lis=document.createElement('li');
    //在指定元素之前添加元素
    ul.insertBefore(lis ,ul.children[1]);

4.3 删除元素(节点) removeChild

    const ul=document.querySelector('ul');
    const btn=document.querySelector('button');
    //删除元素
    // ul.removeChild(ul.children[0]);
    btn.onclick=function(){
      if(ul.children.length==0){
          //禁用按钮
        this.disabled=true;
      }else{
          //移除ul中第一个li
        ul.removeChild(ul.children[0]);
      }
    }

4.4 复制元素(节点) cloneNode()

    const ul = document.querySelector('ul');
    //node.cloneNode() 浅拷贝 只复制标签不复制内容
    //node.cloneNode(true) 深拷贝 复制标签又复制内容
    const li = ul.children[0].cloneNode();
    const lis =ul.children[0].cloneNode(true);
    ul.appendChild(li);
    ul.appendChild(lis);

5.定时器

5.1 创建定时器 setInterval

 setInterval(function () {
      console.log('持续输出');
    }, 1000)
//每隔一秒执行一次

5.2 清除定时器 clearInterval

 let timer = setInterval(fn, 1000);
  clearInterval(timer);

6.元素属性和位置

6.1 offset元素的宽高和位置

    //1.offsetTop 元素距离网页顶部的高度 返回不带单位的数值
    console.log(father.offsetTop);//100
    //2.offsetLeft 元素距离网页左边的位置 返回不带单位的数值
    console.log(father.offsetLeft);//490
    //3.以带有定位的父亲为准 如果父亲没有定位 则以body为准
    console.log(son.offsetLeft);//150
    //4.得到元素的大小 宽度和高度=padding+border+width
    console.log(father.offsetWidth);//300
    console.log(father.offsetHeight);//300
    //5.返回带有定位的父亲 否则返回的是body
    console.log(son.offsetParent);
    //6.不管父亲是否有定位 返回最近一级的父亲
    console.log(son.parentNode);
    <!-- 
    offset:
    1.可以得到任意样式表中样式值
    2.得到的数值没有单位
    3.offsetWidth包含padding+border+width
    4.只能获取不能赋值
    style:
    1.只能得到行内样式表中的样式值
    2.得到带有单位的字符串
    3.style.width获得width的值 不包含padding和border
    4.可以获取也可以赋值
   -->

6.2 client元素的宽高和位置

    //1.返回元素上边框的大小
    console.log(box.clientTop);//1
    //2.返回元素左边框的大小
    console.log(box.clientLeft);//1
    //3.返回padding,内容的宽度 不包含边框,返回数值不带单位
    console.log(box.clientWidth);//120
    //4.返回padding,内容的高度 不包含边框,返回数值不带单位
    console.log(box.clientHeight);//220

6.3 scroll 滚动条的位置

    //1.返回元素被卷去的高度
    console.log(div.scrollTop);//1
    //2.返回元素被卷去左侧的距离
    console.log(div.scrollLeft);//1
    //3.返回padding,内容的宽度 不包含边框,返回数值不带单位
    console.log(div.scrollWidth);//140
    console.log(div.clientWidth);//140
    //4.返回padding,内容的高度 不包含边框,返回数值不带单位
    console.log(div.scrollHeight);//293
    console.log(div.clientHeight);//140

7.网页特效案例

7.1 排他思想

const btn = document.querySelectorAll('button');
    for (let i = 0; i < btn.length; i++) {
      btn[i].addEventListener('click', function () {
        for (let i = 0; i < btn.length; i++) {
          btn[i].style.backgroundColor = ''
        }
        this.style.backgroundColor = 'pink'
      })
    }

7.2 表格全选

<table border="1" width="100" height="30" rules="all">
    <tr>
      <th>
        <input type="checkbox" class="all">
      </th>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="one">
      </td>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="one">
      </td>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
  <script>
    const all = document.querySelector('.all');
    const one = document.querySelectorAll('.one');
    all.addEventListener('click', function () {
      for (let i = 0; i < one.length; i++) {
        one[i].checked = all.checked;
      }
    })
    for (let i = 0; i < one.length; i++) {
      let flag = true;
      one[i].addEventListener('click', function () {
        for (let i = 0; i < one.length; i++) {
          if (!one[i].checked) {
            flag = false;
            break;
          }
        }
        all.checked = flag;
      })
    }

7.3 评论区

    const lis = document.querySelectorAll('li');
    const boxs = document.querySelectorAll('.box');
    for (let i = 0; i < lis.length; i++) {
      //生成自定义属性
      lis[i].setAttribute('index', i);
      //得到自定义属性值
       let index = lis[i].getAttribute('index');
      lis[i].addEventListener('click', function () {
        for (let i = 0; i < lis.length; i++) {
          lis[i].className = '';
        }
        this.className = 'bg';
        for (let i = 0; i < boxs.length; i++) {
          boxs[i].className = 'none';
        }
        boxs[index].className = 'current box'
      })
    }

7.4 快递单号

 const div=document.querySelector('div');
    const input=document.querySelector('input');
    input.addEventListener('keyup',function(){
      if (this.value='') {
        div.style.display='none';
      } else {
         div.style.display='block';
      div.innerHTML=this.value;
      }
    })

 

7.5 倒计时

 const div = document.querySelector('.box').querySelectorAll('div');
    fn();
    function fn() {
      let time1 = +new Date();
      let time2 = +new Date('2022-7-9 18:00');
      let time = parseInt(time2 - time1) / 1000;
      let h = parseInt(time / 60 / 60);
      h = h < 10 ? '0' + h : h;
      div[0].innerHTML = h;
      let m = parseInt(time / 60 % 60);
      m = m < 10 ? '0' + m : m;
      div[1].innerHTML = m;
      let s = parseInt(time % 60);
      s = s < 10 ? '0' + s : s;
      div[2].innerHTML = s;
    }
    setInterval(fn, 1000)

7.6 动态生成表格

const date = [{ uname: '小龙', sex: '男', age: '18' }, { uname: '小美', sex: '女', age: '18' }, { uname: '小勇', sex: '男', age: '18' }];
    const tbody = document.querySelector('tbody');
    const obj = {};
    const input = document.querySelectorAll('input');
    const btn = document.querySelector('button');
    for (let i = 0; i < date.length; i++) {
      table(date[i]);
    }
    btn.addEventListener('click', function () {
      obj.uname = input[0].value;
      obj.sex = input[1].value;
      obj.age = input[2].value;
      console.log(obj);
      date.push(obj);
      table(obj);
    })
    function table(obj) {
      const tr = document.createElement('tr');
      tbody.appendChild(tr);
      for (const key in obj) {
        let td = document.createElement('td');
        td.innerHTML = obj[key];
        tr.appendChild(td);
      }
      let td = document.createElement('td');
      td.innerHTML = '<a href="javascript:;">删除</a>';
      tr.appendChild(td);
      fn();
    }
    function fn() {
      const a = document.querySelectorAll('a');
      for (let i = 0; i < a.length; i++) {
        a[i].addEventListener('click', function () {
          tbody.removeChild(this.parentNode.parentNode)
        })
      }
    }

7.7 京东放大镜

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box1 {
      float: left;
      width: 300px;
      height: 300px;
      margin-right: 20px;
      text-align: center;
      border: 1px solid #000;
    }

    .box1 img {
      width: 100%;
      height: 100%;
    }

    .box {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      
      opacity: 0.5;
      cursor: pointer;
    }

    .box2 {
      overflow: hidden;
      position: relative;
      display: none;
      float: left;
      width: 600px;
      height: 600px;
      text-align: center;
      border: 1px solid #000;
    }

    .box2 img {
      position: absolute;
      left: 0;
      width: 800px;
      height: 800px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <img src="./img/1.jpg" alt="">
    <div class="box"></div>
  </div>
  <div class="box2">
    <img src="./img/1.jpg" alt="">
  </div>
  <script>
    const box1 = document.querySelector('.box1');
    const box2 = document.querySelector('.box2');
    const box = document.querySelector('.box');
    const img = box.querySelector('img');
    const big = document.querySelector('.box2').querySelector('img');
    //1.鼠标经过显示
    box1.addEventListener('mouseenter', function () {
      box.style.display = 'block';
      box2.style.display = 'block';
    })
    //2.鼠标离开消失
    box1.addEventListener('mouseleave', function () {
      box.style.display = 'none';
      box2.style.display = 'none';
    })
    //3.获取鼠标的坐标
    box1.addEventListener('mousemove', function (e) {
      let x = e.pageX - box.offsetWidth / 2;
      let y = e.pageY - box.offsetHeight / 2;
      let boxXMAX = box1.offsetWidth - box.offsetWidth;
      let boxYMAX = box1.offsetHeight - box.offsetHeight;
      //4.限制盒子移动范围
      if (x <= 0) {
        x = 0;
      } else if (x >= boxXMAX) {
        x = boxXMAX;
      }
      if (y <= 0) {
        y = 0;
      } else if (y >= boxYMAX) {
        y = boxYMAX;
      }
      box.style.left = x + 'px';
      box.style.top = y + 'px';
      //5.大盒子跟随小盒子移动
      //大盒子移动距离/大盒子最大位移=小盒子移动距离/小盒子最大位移
      let bigXMAX = big.offsetWidth - box2.offsetWidth;
      let bigYMAX = big.offsetHeight - box2.offsetHeight;
      let X = x * bigXMAX / boxXMAX;
      let Y = y * bigYMAX / boxYMAX;
      big.style.left = -X + 'px';
      big.style.top = -Y + 'px';
    })  
  </script>
</body>
</body>
</html>

7.8 动画函数

 function animate(obj, target) {
      clearInterval(obj.time);
      obj.time = setInterval(function () {
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
          clearInterval(obj.time);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
      }, 15)
    }

7.9 轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .box {
      overflow: hidden;
      position: relative;
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      margin: 100px;
    }

    ul {
      position: absolute;
      left: 0;
      width: 3000px;
      height: 400px;
    }

    ul li {
      float: left;
      list-style: none;
    }

    .box img {
      width: 500px;
      height: 100%;
    }

    .arrow {
      display: none;
    }

    .right,
    .left {
      position: absolute;
      top: 50%;
      width: 20px;
      height: 20px;
      line-height: 15px;
      transform: translateY(-50%);
      text-align: center;
      color: red;
      cursor: pointer;
      border: 1px solid #000;
      z-index: 2;
    }

    .left {
      left: 0;
    }

    .right {
      right: 0;
    }

    ol {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
    }

    ol li {
      float: left;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 5px;
      border: 1px solid #000;
      list-style: none;
    }

    .color {
      
    }
  
  </style>
  <script src="./10-动画函数.js"></script>
  <script src="./11-轮播图.js"></script>
</head>

<body>
  
  <div class="box">
    <div class="arrow">
      <div class="left">&lt;</div>
      <div class="right">&gt;</div>
    </div>
    <ul>
      <li><a href="#">
          <img src="./img/3.jpg" alt="" class="pic">
        </a></li>
      <li><a href="#">
          <img src="./img/2.jpg" alt="">
        </a></li>
      <li><a href="#">
          <img src="./img/1.jpg" alt="">
        </a></li>
        <li><a href="#">
          <img src="./img/3.jpg" alt="" >
        </a></li>
      <li><a href="#">
          <img src="./img/2.jpg" alt="">
        </a></li>
    </ul>
    <ol>
    </ol>
  </div>
</body>
</html>
window.addEventListener('load', function () {
  //1.鼠标经过箭头显示
  const box = document.querySelector('.box');
  const arrow = document.querySelector('.arrow');
  box.addEventListener('mouseenter', function () {
    arrow.style.display = 'block';
    //11.清除定时器
    clearInterval(time);
    time = null;
  })
  //2.鼠标离开箭头消失
  box.addEventListener('mouseleave', function () {
    arrow.style.display = 'none';
    //12.开启定时器
    time=setInterval(function () {
      right.click();
    },2000)
  })
  //3.自动生成小圆点
  const pic = document.querySelector('.pic');
  const ul = document.querySelector('ul');
  const ol = document.querySelector('ol');
  let num = 0;
  let round = 0;
  for (let i = 0; i < ul.children.length; i++) {
    //4.创建ol中的li
    const li = document.createElement('li')
    //5.创建自定义属性
    li.setAttribute('index', i)
    ol.appendChild(li);
    ol.children[i].addEventListener('click', function () {
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      this.className = 'color';
      //6.得到自定义属性值
      let index = li.getAttribute('index');
      num = index;
      round = index;
      //7.图片跟随小圆点移动
      animate(ul, -index * pic.offsetWidth);
    })
  }
  ol.children[0].className = 'color';
  //13.克隆第一张照片
  const first =ul.children[0].cloneNode(true);
  ul.appendChild(first);
  //8.点击右箭头,让图片移动
  const right = document.querySelector('.right');
  right.addEventListener('click', function () {
    num++;
    if (num == ol.children.length) {
      num = 0;
      ul.style.left = 0;
    }
    animate(ul, -num * pic.offsetWidth);
    round++;
    if (round == ol.children.length) {
      round = 0;
    }
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    ol.children[round].className = 'color';
  })
  //9.点击左箭头,让图片移动
  const left = document.querySelector('.left');
  left.addEventListener('click', function () {
    num++;
    if (num == ol.children.length) {
      num = 0;
      ul.style.left = 0;
    }
    animate(ul, -num * pic.offsetWidth);
    round++;
    if (round == ol.children.length) {
      round = 0;
    }
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    ol.children[round].className = 'color';
  })
  //10.自动播放
  let time = setInterval(function () {
    right.click();
  }, 2000)
})

 

标签：WebAPI,function,const,let,querySelector,div,document
来源： https://www.cnblogs.com/-hy-/p/16504319.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。