WEB API获取元素的方式随机点名并渲染到指定位置单击生成不同图片操作类名样式设置表单元素属性<!DOCTYP

获取元素的方式

<body>
  <ul class="nav">
    <li>我的首页</li>
    <li>产品介绍</li>
    <li>联系方式</li>
  </ul>

  <ul class="nav2">
    <li>我的首页2</li>
    <li>产品介绍3</li>
    <li>联系方式4</li>
  </ul>
  <script>
    // 1，返回匹配的第一个元素，未匹配到返回null
    let lis = document.querySelector('.nav2 li')
    console.log(lis);
    
    
    //2，返回伪数组
    let nav2 = document.querySelector('.nav2')
    let lis = nav2.querySelectorAll('li')
    console.log(lis);
    // 遍历value：值  index:索引
    lis.forEach(function (value, index) {
      console.log(value, index);
    });
  
  </script>
</body>
</html>

随机点名并渲染到指定位置


<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    span {
      display: block;
      width: 100px;
      margin-top: 100px;
      padding: 10px 20px;
      border: solid #f00 1px;
      text-align: center;
    }
  </style>
</head>

<body>
  <button>随机抽取</button>
  <span>这是渲染位置</span>
  <script>
    let names = ['小红', '小绿', '小兰', '小黑']
    
    // 获取元素
    let btn = document.querySelector('button')
    let span = document.querySelector('span')
    
    // 绑定单击事件
    btn = addEventListener('click', function () {
      // 生成随机数索引
      let random = parseInt(Math.random() * names.length)
      
      // 根据索引取得姓名
      let name = names[random]
      
      // 将姓名填入指定位置
      span.innerText = name
    })


  </script>
</body>

</html>

单击生成不同图片

<body>
  <button>单击随机显示图片</button>
  <img src="" alt="" />

  <script>
    // 获取元素
    let btn = document.querySelector('button')
    let img = document.querySelector('img')
    // 绑定单击事件
    btn = document.addEventListener('click', function () {
      // 生成随机数
      let random = parseInt(Math.random() * 4)
      // 生成路径
      let path = `./images/${random}.jpg`
      // 赋值
      img.src = path
    })

  </script>
</body>

</html>

操作类名样式


<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .red {
      color: red;
    }

    .size50 {
      font-size: 50px;
    }

    .underline {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <button class="btn1">添加一个字体大小样式</button>
  <button class="btn2">移除一个字体大小样式</button>
  <button class="btn3">切换一个字体大小样式</button>
  <button class="btn4">判断元素是否有某个样式</button>
  <p class="red">我是百变p元素</p>

  <script>
    // 获取元素
    let p = document.querySelector('p')
    let btn1 = document.querySelector('button')
    let btn2 = document.querySelector('button:nth-of-type(2)')
    let btn3 = document.querySelector('button:nth-of-type(3)')
    let btn4 = document.querySelector('button:nth-of-type(4)')

    // 绑定单击事件
    btn1.addEventListener('click', function () {
      // 操作类名，添加类名
      p.classList.add('size50', 'underline')
    })
    btn2.addEventListener('click', function () {
      // 操作类名，移除类名
      p.classList.remove('size50')
    })
    btn3.addEventListener('click', function () {
      // 操作类名，切换类名
      p.classList.toggle('underline')
    })
    btn4.addEventListener('click', function () {
      // 操作类名，移除类名
      let Class = p.classList.contains('blue')
      console.log(Class);
    })


  </script>
</body>

</html>

设置表单元素属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <input type="password" class="username" />
  <button class="changeType">变</button>
  <br />

  <input type="checkbox" class="chkAll" />全选
  <div class="list">
    <input type="checkbox" />写代码 <input type="checkbox" />调bug
    <input type="checkbox" />写文档
  </div>
  <button class="getChioce">获取用户选择</button>

  <script>
    // 第一题，password和text的转换
    // 获取元素
    let username = document.querySelector('.username')
    let changeType = document.querySelector('.changeType')
    // 绑定单击事件
    changeType.addEventListener('click', function () {
      // 根据当前type值进行type属性的设置(第一个username.type为变量)
      username.type = username.type === 'password' ? 'text' : 'password'
    })

    // 第二题，设置全选
    // 获取全选框
    let chkAll = document.querySelector('.chkAll')
    // 获取列表结构的复选框
    let chks = document.querySelectorAll('.list input')
    // 绑定单击事件
    chkAll.addEventListener('click', function () {
      // 设置当前全选复选框状态,表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性

      let state = chkAll.checked
      // 遍历列表结构的复选框的状态
      for (let i = 0; i < chks.length; i++) {
        chks[i].checked = state
      }
    })

  </script>
</body>

</html>