js-day11

classList多个类名

• 添加 box.classList.add('sy')
• 删除 box.classList.remove('sy')
• 切换，如果没有就添加，有就删除 box.classList.toggle('sy')

元素节点操作

• 创建节点
  • document.createElement()
• 追加节点
  • parentNode.appendChild()
  注意点：appendChild()方法追加的内容只能放在已经有的标记后面
  • parentNode.insertBefore('创建的元素', '追加到那个元素前面'):
  表示可以把新创建的标记追加到已经存在标记的前面
• 删除节点
  • remove():自己删除自己
  • parentNode.removeChild():通过父元素删除子元素
• 克隆节点
  • ele.cloneNode()
  如果传递一个true表示深克隆，把里面的子元素都克隆。如果不传递或者给一个false表示只克隆当前的元素
  • ele.cloneNode(true | false)
• 替换节点
  • parentNode.replaceChild('要替换的节点', '被替换的节点')

js选择器

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByName():

通过表单name属性的属性值获取元素，结果是一个伪数组

• document.getElementsByClassName():

通过class类名获取元素，结果是一个伪数组

• document.querySelector():

支持css选择器，获取单个，如果是多个的话，那么只获取第一个

• document.querySelectorAll():

支持css选择器，获取所有的，结果是一个伪数组

自定义属性

根据业务需求给标记自己设置的属性，这个属性不是标记本身就具有的，是你自定义的

• 通过使用setAttribute()设置的显示方式
• 通过使用对象.属性形式设置的隐式方式 注意点：这种方式只能获取显示方式设置的自定义属性
• H5新增的方式 ele.dataset.index