原生JS操作DOM常用方法

原生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)设置元素的属性、属性值