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(“属性名” , “属性值”):设置属性值
创建和插入节点
- 创建节点
- 插入节点语法:
- 父级.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中元素的应用
例如: