DOM编程

获取元素，也叫标签

  Window.idxxx 或者直接 idxxx
  document.getElementById('idxxx')
  document.getElementsByTagName('div')[0]
  document.getElementsByClassName('classxxx')[0]
  document.querySelector('#idxxx')
  document.querySelectorAll('xxx')[0]
复制代码

• 现在常用querySelector querySelectorAll
• getElement(s)Byxxx 需要兼容 ie 才用

获取特定元素

  // 1.获取html元素
  document.documentElement
  // 2.获取head元素
  document.head
  // 3.获取body元素
  document.body
  // 4.获取窗口
  window
  //5.获取所有元素
  document.all // 它是一个falsy值
  if(document.all){
    console('只能在ie运行')
  }else{
    console('其他浏览器，非ie')
  }
复制代码

节点的增删改查

增

• 创建一个标签节点

  let div1 = document.creatElement('div')
  document.creatElement('style')
  document.creatElement('script')
  document.creatElement('li')
复制代码

• 创建一个文本节点

  text1 = document.creatTextNode('hellow')
复制代码

• 标签里面插入文本

  div1.appendChild(text1)
  div.innerText = 'hellow' | div1.textContent = 'hellow'
复制代码

删

old

  parentNode.childChild(childNode)
复制代码

new

  childNode.remove()
复制代码

  // old
  div1.parentNode.removeChild(div1)
  // new
  div1.remove()
  // 让删除的节点回来
  document.body.appendchild(div1)
  // 彻底被干掉
  div1 = null
复制代码

改

• 写标准属性

  // 改class
  div.className = 'pink red' // 全覆盖
  div.classList.add('red')
  // 改style
  div.style = 'width: 100px; color: blue;'
  // 改部分style
  div.style.width = '200px'
  // 大小写
  div.style.backgroundColor = '#e3e3e3'
  // 改data-*属性
  div.dataset.x = 'xxx'
复制代码

• 读标准属性

  div.classList / a.href
  div.getattribute('class') / a.getAttribute('href')
复制代码

• 改事件处理函数
  1. div.onclick 默认位 null
  • 默认点击div不会有任何事情发生
  • 如果吧 div.onclick 改为一个函数 fn
  • 那么点击div的时候，浏览器就会调用这个函数
  • 并且是这样调用的 fn.call(div, event)
  • div 会被当做 this
  • enent 则包含了点击事件的所有信息， 如坐标
  2. div.addEventListenter
  • 是 div.onclick 的升级版
• 改文本内容

  div.innerText = 'xxx'
  div.textcontent = 'xxx'
复制代码

• 改 HTML 内容

  div.innerHTML = '<strong> 注意 </strong>'
复制代码

• 改标签

  div.innerHTML = '' // 先清空
  div.appendChid(div2) // 再加内容
复制代码

• 改parent

  newParent.appendChild(div)
复制代码

查

  // 查爸爸
  node.parentNode | node.parentElement
  // 查爷爷
  node.parentNode.parentNode
  // 查子代
  node.childNodes // 子代node下有text和element
  node.children // 子代的element
  // 查兄弟姐妹
  node.parentNode.childNodes // 还要排除自己
  node.parentNode.children //还有排除自己
  node.firstChild // 老大
  node.lastChild // 老小
  node.previousSibling // 查哥哥/姐姐
  node.nextString // 查下一个弟弟/妹妹    
复制代码

• 遍历一个 div 里面的所有元素

  travel1 = (node, fn) => {
    fn(node)
    if(node.children){
      for(let i=0; i<node.children.length; i++){
        travel(node.children[i], fn)
      }
    }
  }
  travel(div1, (node) => console.log(node))
复制代码

对象风格封装DOM

增

  dom.create(`<div></div>`) // 用于创建节点
  dom.after(node, node2) // 用于新增弟弟
  dom.before(node, node2) // 用于新增哥哥
  dom.append(parent, child) // 用于新增儿子
  dom.wrap(`<div></div>`) // 用于新增爸爸
复制代码

删

  dom.remove(node) // 用于删除节点
  dom.empty(parent) // 用于删除后代
复制代码

改

  dom.attr(node, 'title', ?) // 用于读写属性
  dom.text(node, ?) // 用于读写文本内容
  dom.html(node, ?) // 用于读写 html 内容
  dom.style(node, {color: 'red'}) // 用于修改 style
  dom.class.add(node, 'pink') // 用于添加 class
  dom.class.remove(node, 'pink') // 用于删除 class
  dom.on(node, 'click', fn) // 用于添加事件监听
  dom.off(node, 'click', fn) // 用于删除事件监听
复制代码

查

  dom.find('选择器') // 用于获取标签或标签们
  dom.parent(node) // 用于获取父元素
  dom.children(node) // 用于获取子元素
  dom.siblings(node) // 用于获取兄弟姐妹
  dom.next(node) // 用于获取弟弟
  dom.previoous(node) // 用于获取哥哥
  dom.each(nodes.fn) // 用于遍历所有节点
  dom.index(node) // 用于获取排行老几
复制代码

链式风格封装DOM(jQuery风格)

查

  jQuery('#xxx') // 返回值并不是元素，而是一个api对象
  jQuery('#xxx').find('.red') // 查找#xxx里的.red元素
  jQuery('#xxx').parent(node) // 用于获取父元素
  jQuery('#xxx').children(node) // 用于获取子元素
  jQuery('#xxx').siblings(node) // 用于获取兄弟姐妹
  jQuery('#xxx').next(node) // 用于获取弟弟
  jQuery('#xxx').prev(node) // 用于获取哥哥
  jQuery('#xxx').each(nodes.fn) // 用于遍历所有节点
  jQuery('#xxx').index(node) // 用于获取排行老几  
  jQuery('.red').each(fn) // 遍历并对每个元素执行 fn
复制代码

增

  // jQuery('#xxx') 可以写成 $('#xxx')
  $('<div><span> 1 </span></div>') // 创建div
  .appendTo(document.body) //插入到body中
复制代码

删

  $div.remove()
  $div.empty()
复制代码

改

  $div.attr('title', ?) // 用于读写属性
  $div.text(?) // 用于读写文本内容
  $div.html(?) // 用于读写 html 内容
  $div.css({color: 'red'}) // 用于修改 style
  $div.addClass('pink') // 用于添加 class
  $div.on('click', fn) // 用于添加事件监听
  $div.off('click', fn) // 用于删除事件监听
复制代码