JavaScript笔记 ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 N 天

DOM

• 全名：document object model
• 用来描绘一个层次化的节点树
• 允许开发人员获取、添加、移除和修改页面的某一部分元素

获取非常规标签

html
document.documentElement
​
head
document.head
​
body
document.body

获取常规标签

根据id获取元素
document.getElementById('Id')
​
根据类名获取元素
document.getElementsByCkassName('类名')
返回一个伪数组
注意:你拿到的不是一个元素，而是一个集合，集合内的【n】才是元素
​
根据标签名获取元素
document.getElementsByTagName('标签名')
返回一个伪数组，没有的话返回空数组
​
根据name属性获取元素
document.getElementsByName('name')
返回一个伪数组
​
根据选择器获取一个元素
document.querySelector('选择器')
注意：如果页面上有该选择器对应的，那么只要第一个，如果没有 返回null
​
根据选择器获取一组元素
document.querySelectorALL('选择器')
有多少要多少 放在一个伪数组
​
 

案例 动态渲染表格

• 利用innerHTML来渲染页面
• 这个属性可以识别和解析html结构
• 只要把数组变成一个html结构的字符串

    <script>
        var userList = [{
            id: 1,
            name: 'rock',
            age: 18,
            gender: '女'
        }, {
            id: 2,
            name: 'jack',
            age: 18,
            gender: '女'
        }, {
            id: 3,
            name: 'sim',
            age: 18,
            gender: '女'
        }]
        var tbody = document.querySelector('tbody')
        var str = ''
        userList.forEach(function(item) {
            str += '<tr>'
            for (var k in item) {
                str += '<td>' + item[k] + '</td>'
            }
            str += '</tr>'
        })
        tbody.innerHTML = str
    </script>

动态渲染案例的拓展

• 模板字符串

  /*
  js定义字符串的一种方式，只不过是使用反引号``来定义
  ​
  优点： 可以换行  可以直接解析字符串
  /
  

<script>  
    userList.forEach(function(item) {
            str += `   <tr>
                <td><span>${item.id}</span></td>
                <td>
                    <h3>${item.name}</h3>
                </td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
            </tr>`
        })
    </script>

案例 全选

• 点击全选 每个选项都选上

• 再次点击，就取消

• 如果每一个选项都被选中，全选按钮被选中

    <div class="box">
          <input type="checkbox">全选
          <hr>
          <input class="item" type="checkbox">选项一<br>
          <input class="item" type="checkbox">选项二<br>
          <input class="item" type="checkbox">选项三<br>
          <input class="item" type="checkbox">选项四<br>
      </div>   
      <script>
          var allBtn = document.querySelector('input')
          var btns = document.querySelectorAll('.item')
          allBtn.onclick = function() {
              var c = allBtn.checked
              btns.forEach(function(item) {
                  item.checked = c
              })
          }
          btns.forEach(function(item) {
              item.onclick = function() {
                  var count = 0
                  btns.forEach(function(t) {
                      if (t.checked) {
                          count++
                      }
                  })
                  allBtn.checked = count === btns.length
              }
          })
      </script>