JavaScript操作DOM对象

DOM：Document Object Model（文档对象模型）。

获取DOM对象的八种方法

• 通过ID获取：getElementById();
• 通过类名获取：getElementsByClassName();
• 通过标签名获取：getElementsByTagName();
• 通过name属性获取：getElementsByName();
• 通过选择器获取一个元素：querySelector();
• 通过选择器获取一组元素：querySelectorAll();
• 获取html的方法：document.documentElement();
• 获取body的方法：document.body();

根据层次访问节点

• 节点属性
  

• element属性
  

• 有些浏览器仅支持以上两种属性中的一种，所以经常要连用
  

• 节点信息
  nodeName：节点名称
  nodeValue：节点值
  nodeType：节点类型
  

操作节点的属性

• getAttribute(“属性名”)：获取属性值
• setAttribute(“属性名” ， “属性值”)：设置属性值

创建和插入节点

1. 创建节点
2. 插入节点语法：

• 父级.insertBefore(新元素 ， 被插入的元素)；
• 父级.insertBefore（新元素，父级.children[0]）；
  注：如果第二个节点不存在，则会默认以appendChild的形式添加
  

删除和替换节点

• 语法：父节点.remoceChild(要删除的子节点)
  

修改style属性

• HTML元素.style.样式属性 = ‘值’;
  例如：document.getElementById("titles").style.fontSize="25px ";
  

className属性

• className：给指定HTML标签添加CSS样式标签（这种发法一次加一个CSS样式，方便快捷）
• HTML元素.className = “样式名称”;

获取元素的样式

• HTML元素.style.样式属性

HTML中元素的应用

例如：