【DOM】DOM相关操作

DOM简介

Document Object Model的缩写，表示文档对象模型
提供了很多对标签进行增、删、改、查的操作

DOM操作

1.增

• 新建
  –createElement(标签名) 创建元素节点
  –setAttribute(name,value) 直接设置属性
  – cloneNode(true,false) 是否包含子节点
• 插入
  –appendChild() 拼接节点
  –insertBefore(new,old) 插入节点

2.删

• removeChild(); 删除子节点
• removeAttributeNode() 删除属性节点

3.改

• replaceChild (new,old) 替换节点
  需要父级调用
• setAttribute() 修改属性值

4.查

• getElementById()
• getElementByTagName()
• getElementByClassName()
• getElementByName()
• querySelector()
• querySelectorAll()
• 获取下一个兄弟节点
  – nextSibling
  有兼容问题，ie9以上的浏览器即现代浏览器会将后边的换行部分作为节点处理
  – nextElementSibling
  可忽略文档节点，只获取元素节点，ie8及一下不支持
• 获取上一个兄弟节点
  – previousSibling
  – previousElementSibling (问题同上)
• 获取子节点
  – 第一个子节点
  1）firstChild 现代浏览器不支持
  2）firstElementChild ie6、7、8不支持
  – 最后一个子节点
  1）lastChild
  2）lastElementChild
  – 获取子节点
  1）childNodes 获取非元素类型的子节点
  2）Children 获取元素子节点
  -获取父节点
  parentNode

5.获取节点后的操作

• 通过点语法调用标签属性
• 通过style属性，控制样式
• 通过classList控制样式
  – add(class1.class2…) 添加类名
  –remove(class1,class2…) 删除类名
  –replace(oldclass,newclass) 替换类名
  – contains(class) 是否包含某个类名，返回布尔值
  –toggle(class,true/false)如果某个类名存在就删除，不存在就添加，第二个参数代表强制，true添加，falseshanchu