DOM节点操作

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

节点对象

JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。

访问节点

  • 元素节点 ( 操作标签）
  • 属性节点（操作标签属性）
  • 文本节点（操作标签的文本内容）

标签属性都是元素节点对象的属性,可以使用点语法访问，例如：

1
2
3
h1.id = "d1"; 		 //set 方法
console.log(h1.id);  //get 方法
h1.id = null;		//remove 方法

注意 :

  • 属性值以字符串表示
  • class属性需要更名为 className，避免与关键字冲突，例如：
    h1.className = “c1 c2 c3”；

获取多个DOM元素和控制属性

  1. 根据标签名获取元素节点列表

    1
    2
    3
    4
    5
    var elems = document.getElementsByTagName("");
    /*
    参数 : 标签名
    返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。
    */

  2. 根据 class 属性值获取元素节点列表

    1
    2
    3
    4
    5
    var elems = document.getElementsByClassName("");
    /*
    参数 : 类名(class属性值)
    返回值 : 节点列表
    */

  3. 元素节点对象提供了以下属性来操作元素内容

    1
    2
    3
    innerHTML : 读取或设置元素文本内容,可识别标签语法
    innerText : 设置元素文本内容,不能识别标签语法
    value : 读取或设置表单控件的值

  4. 操作 DOM 树中的属性值：

    1
    2
    3
    elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
    elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
    elem.removeAttribute("attrname");//移除指定属性

  5. 操作元素样式：
    为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

    1
    2
    3
    p.style = "width:300px;";
    p.style.color = "white";
    p.style.fontSize = "20px";

注意 :

  • 属性值以字符串形式给出，单位不能省略
  • 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

定时器方法

周期性定时器
作用：每隔一段时间就执行一次代码

1
2
3
4
5
6
7
8
//开启定时器:
var timerID = setInterval(function, interval);
/*
参数 :
 function : 需要执行的代码,可以传入函数名;或匿名函数
 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/

关闭定时器 :

1
2
//关闭指定id对应的定时器
clearInterval(timerID);

一次性定时器
作用：等待多久之后执行一次代码

1
2
3
4
//开启超时调用:
var timerId = setTimeout(function, ktimeout);
//关闭超时调用:
clearTimeout(timerId);

注：定时器是并发的，是在网页的进程中并发执行，会阻塞其他的任务。详见：javaScript 多线程并行编程