原生JS操作DOM常用方法

获取节点：

• document.getElementById(elementId: string)

  通过元素id属性来获取元素，返回值：一个元素对象

• document.getElementsByClassName(className: string)

  通过元素class属性来获取元素，返回值：一个元素对象数组

• document.getElementsByTagName(TagName: string)

  通过元素标签来获取元素，返回值：一个元素对象数组

• document.querySelector(selectors: string)

  通过选择器来获取元素，返回值：第一个匹配的元素对象

• document.querySelectorAll(selectors: string)

  通过选择器来获取元素，返回值：匹配的元素对象数组

创建节点：

• document.createElement('div')

  创建一个div标签元素

• document.createTextNode('string')

  创建一个文本标签

添加节点：

• Node.appendChild(newChild: Node)

  在节点中添加一个新节点

• Node.insertBefore(newChild: Node, refChild: Node)

  在节点Node内部中的refChild子节点前添加一个新节点newChild

删除节点：

• Node.removeChild(oldChild: Node)

  删除Node节点中的oldChild子节点

• Node.remove()

  删除Node节点

获取/设置节点元素的属性：

• Element.getAttribute(qualifiedName: string)

  获取元素对应属性的属性值

• Element.setAttribute(qualifiedName: string, value: string)

  设置元素的属性、属性值