JavaScript ｜ 青训营笔记

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

操作元素样式

• 设置元素样式

  /*
  语法：元素.style.样式 = 样式值
  /
  

• 获取元素行内样式

   /*
   语法：元素.style.样式 = 样式值
   /
  

• 获取元素非行内样式（可以获取行内也可以获取非行内）

  /*
  标准浏览器
  window.getComputedStyle（要获取样式的元素）.样式名
  ​
  低版本
  元素.currentStyle.样式名
  /
  

操作元素类名

• className

  元素.className

  追加类名

      <script>
          var ele = document.querySelector('div')
          ele.className += ' container' ================================注意：值前面要有一个空格
  ==========================================================
          或者
          ele.classList.add('类名')=============追加
          ele.classList.remove('类名')=============删除
          ele.classList.toggle('类名')=============有就删除没有就添加
      </script>
  

案例 选项卡

for循环

<script>
        var btns = document.querySelectorAll('ul>li')
        var boxs = document.querySelectorAll('ol>li')
        for (var i = 0; i < btns.length; i++) {
​
            btns[i].dataset.index = i
            btns[i].onclick = function() {
                var index = this.dataset.index - 0
                for (var j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('active')
                    boxs[j].classList.remove('active')
                }
                btns[index].classList.add('active')
                boxs[index].classList.add('active')
            }
        }
       
    </script>

forEach方法

<script>
        var btns = document.querySelectorAll('ul>li')
        var boxs = document.querySelectorAll('ol>li')
       
        btns.forEach(function(item, index) {
            item.onclick = function() {
                for (var j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('active')
                    boxs[j].classList.remove('active')
                }
                btns[index].classList.add('active')
                boxs[index].classList.add('active')
            }
        })
    </script>

获取元素尺寸

• 占地面积 一个元素在页面或者在文档流占多大位置

/*
元素.offsetWidth
元素.offsetHeight
得到元素 内容+padding+border区域的尺寸
注意：当元素 display = none 时  获取不到  因为此时不占位置
​
元素.clientheight
元素.clientwidth
得到元素 内容+padding
/

获取元素偏移量

• 相对于左侧和上侧

/*
元素.offsetLeft
元素.offsetTop
/

获取窗口尺寸

• BOM级别的 window,innerWidth 得到包含滚动条的

• DOM级别的 不包含滚动条

  /*
  document.documentElement.clientWidth
  document.documentElement.clientHeight
  /
  

DOM节点的操作

• 什么是节点 ===页面的每一个组成部分 标签是节点 但节点不一定全是标签

• 最大的节点 document

• 对节点的操作

  • 创建一个节点
  • 插入一个节点
  • 删除一个节点
  • 替换一个节点
  • 克隆一个节点

• 常见的节点

  • 元素节点
  • 文本节点
  • 属性节点
  • 注释节点

• 获取节点

  • 获取元素节点

    • 非常规节点

      • html
      • body
      • head

    • 常规节点

      • getElementById()
      • getElementByClassName()
      • getElementByTagName()
      • querySelector()
      • querySelectAll()

  • 获取节点 但不限于元素节点

    • childNodes
    • 父节点.childNodes 得到父节点的子一节点的一个伪数组
    • children
    • 父节点.children 得到一个伪数组 内包含所有子一级 元素节点
    • firstchild
    • 父节点.firstchild 得到第一个节点
    • firstElementchild
    • 父节点.firstElementchild 得到第一个元素节点
    • last 同上
    • previoussibling 该节点的上一个兄弟节点
    • previouselementsibling 上一个兄弟的元素节点
    • nextsibling 该节点的下一个兄弟节点
    • nextelementsibling 该节点的下一个元素节点
    • parentNode 该节点的父节点
    • parentElement 该节点的父元素
    • attributes 节点.attributes 得到一个类似于数组的数据结构，里面包含该元素的所有属性节点