我经常会用到的DOM操作

增加、创建、修改

• document.createElement(nodename) ：创建一个新的标签节点
• document.createTextNode(text)： 创建新的文本内容
• node.appendChild(node)：向一个节点尾部插入一个新的节点
• node.insertBefore(newnode,existingnode)：向一个节点首部插入一个新的节点
• document.createAttribute(attributename)

删除

• parentNode.removeChild(childNode)：删除节点

查询

• document.getElementById(elementID)： 根据id查寻
• document.getElementsByClassName(className): 根据类名查询，返回一个数组，通过下标获取并进行操作
• document.getElementsByTagName(TagName)： 根据标签元素查询，返回一个数组
• document.querySelector(CSS selectors)： 根据选择器查询，所以 #、.都要带上，返回查询到的第一个元素
• document.querySelectorAll(CSS selectors)：根据选择器查询，返回一个数组

js修改样式

• document.querySelector(CSS selectors).style[‘display’] = ‘none’;
• document.getElementById(id).style.property = new style；：直接修改样式属性值

对应的可选的property：property

• document.querySelector(CSS selectors).className += ’ CSS selectors’: 有一个空格，通过添加类名

• document.querySelector(CSS selectors).style.cssText ：内联样式