DOM节点操作
DOM全称为 “Document Object Model”,文档对象模型,提供操作HTML文档的方法。(注:每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。)
1)节点对象
JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装,称为节点对象,提供相关的属性和方法。
2)常用节点分类
- 元素节点 ( 操作标签)
- 属性节点(操作标签属性)
- 文本节点(操作标签的文本内容)
3)获取元素节点
- 根据标签名获取元素节点列表
var elems = document.getElementsByTagName("");
/*
参数 : 标签名
返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
*/
- 根据 class 属性值获取元素节点列表
var elems = document.getElementsByClassName("");
/*
参数 : 类名(class属性值)
返回值 : 节点列表
*/
- 根据 id 属性值取元素节点
var elem = document.getElementById("");
/*
参数 : id属性值
返回值 : 元素节点
*/
- 根据 name 属性值取元素列表
var elems = document.getElementsByName("");
/*
参数 : name属性值
返回 : 节点列表
*/
4)操作元素内容
元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值
5)操作元素属性
- 获取 DOM 树中的属性值
- 设置 DOM 树中的属性值:
//根据指定的属性名返回对应属性值
elem.getAttribute("attrname");
//为元素添加属性,参数为属性名和属性值
elem.setAttribute("attrname","value");
//移除指定属性
elem.removeAttribute("attrname");
- 标签属性都是元素节点对象的属性,可以使用点语法访问,例如:
h1.id = "d1"; //set 方法
console.log(h1.id); //get 方法
h1.id = null; //remove 方法
注意 :
- 属性值以字符串表示
- class属性需要更名为
className
,避免与关键字冲突,例如:
h1.className = “c1 c2 c3”;
6)操作元素样式
- 为元素添加 id、class属性,对应选择器样式
- 操作元素的行内样式,访问元素节点的style属性,获取样式对象;样式对象中包含CSS属性,使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
注意 :
- 属性值以
字符串
形式给出,单位不能省略 - 如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为
驼峰
, font-size -> fontSize