持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

js 操作dom的方式

1. dom元素的获取

  document.getElementById()
  document.getElementsByTagName()
  document.getElementsByClassName()
  document.querySelector()
  document.querySelectorAll()

2. dom操作，增删改查

  // 增：
  document.createElement()
  // 删：
  父节点.removeChild()
  // 改：
  insertBefore(新节点, 参照节点)
  appendChild(新节点)

3. 获取/设置属性

  dom.title
  dom.tagName
  dom.className
  domList.length
  domList.item(1)
  domList[1]
  dom.classList
  dom.textContent
  dom.innerText
  dom.innerHTML
  dom.getAttribute()
  dom.setAttribute()
  dom.hasAttribute()

4. dom事件只触发一次

  dom.addEventListener('click', () => {
    console.log('只执行一次')
  }, { once: true } );

5. 点击模态框之外的区域，关闭弹框

  dom.addEventListener('click', e => {
    const isOut = dom.contains(e.target);
    console.log(isOut)
  });

6. 让当前元素滚动到浏览器窗口可视区域

  dom.scrollIntoView()
  dom.scrollIntoView(false)
  dom.scrollIntoView({ block: 'end' })
  dom.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' })

7. 获取元素实际显示的样式

const style = window.getComputedStyle(dom)

获取元素的大小、相对视口的位置

const style = dom.getBoundingClientRect()

8. 节点

节点类型：

  nodeType =1 元素节点
  nodeType =2 属性节点
  nodeType =3 文本节点

父级节点： dom.parentNode 子节点：所有子节点：parentNode.childNodes 所有子元素节点： parentNode.children 第一个子节点： parentNode.firstchild 第一个子元素节点： parentNode.firstElementChild 最后一个子节点： parentNode.lastchild 最后一个子元素节点： parentNode.lastElementChild 兄弟节点：下一个节点：dom.nextSibling 下一个元素节点： dom.nextElementSibling 上一个节点： dom.previousSibling 上一个元素节点：dom.previousElementSibling

9. `document.write()`

监听事件

10. 创建事件

  dom.onclick = function(){}
  dom.addEventListener('click', ()=>{})

11. 删除事件

dom.removeEventListener('click', fn)

12. this和e.target的区别

e.target是触发事件的对象，this是绑定事件的元素

13. 阻止默认行为，阻止冒泡

  e.preventDefault()
  e.stopPropagation()

14. 跟随鼠标移动

  domcument.addEventListener('mousemove', e => {
    const x = e.pageX;
    const y = e.pageY;
    dom.style.left = x - 10 + 'px';
    dom.style.top = y - 10 + 'px';
  })

原生JS操作Dom的方法总结