:::info js找Dom未知节点，如果用jq直接$()搞定了 :::

获取元素

  1. div = document.getElementsByTagName('div') // 通过元素名称获取元素对象
  2. div = document.getElementsByClassName('div_class') // 通过元素类名获取元素对象
  3. div = document.getElementById('div_id') // 通过元素ID获取元素对象
  4. //用这个上面就当了解了
  5. document.querySelector('#div_id') // [object HTMLDivElement] 
  6. document.querySelectorAll('div.div_class > p') // [object HTMLCollection] 
  7. //子元素获取
  8. div.children[1] // <p>2</p>
  9. //获取父元素
  10. div.parentElement

修改元素

  1. //修改元素中的内容
  2. div.innerHTML = 'p1'
  3. //修改元素的样式
  4. div..style.fontWeight = '20px' //css属性要用驼峰
  5. //属性修改
  6. div.setAttribute('class', 'other_class') // 修改 class 属性名称

添加元素

  1. style = document.createElement('style') // 创建元素
  2. style.setttribute('type','text/css') // 添加属性
  3. style.innerHTML = '* {...}' // 添加内容
  5. //将某个元素移动到另一个元素里
  6. p3 = document.getElementsByTagName('p')[0]
  7. div = document.getElementsByTagName('div')[0]
  8. div.appendChild(p3)
  10. //某个元素移动到另一个元素前面
  11. p3 = document.getElementsByTagName('p')[0]
  12. p1 = document.getElementsByTagName('p')[1]
  13. div = document.getElementsByTagName('div')[0]
  14. div.insertBefore(p1,p3)

删除元素

  1. div.children[0].removeChild(p)
  2. div.children[1].removeChild(p) // error 此时 p2 = 0 删除后位置被更新