十五、DOM（文档对象模型）

1、操作节点

  • (1) appendChild(newNode) 向 childNodes 列表的末尾增加一个节点
    例：someNode.appendChild(newNode)
  • (2) insertBefore(newNode, Node) 将一个节点插入到一个节点的前面
    例：someNode.insertBefore(newNode, someNode.firstChild)
  • (3) replaceChild(newNode, Node) 用一个节点替换一个节点
  • (4) removeChild(Node) 移除一个节点

2、

  • (1) 创建元素 document.createElement("div")
  • (2) 创建文本节点 document.createTextNode("Hello world")

3、操作属性

  • (1) getAttribute() 取得属性的值
  • (2) setAttribute() 设置属性，例：
    var div = document.getElementById("myDiv");
    div.setElementById("class", "abc");
  • (3) removeAttribute() 移除属性

4、表格 table

<table>元素的属性和方法：

  • caption：得到caption
  • tHead：得到thead
  • tBodies：得到tbody的集合
  • tFoot：得到tfoot
  • rows：表格中所有行的集合
  • createTHead()：创建元素
  • createTFoot()：创建元素
  • createCaption()：创建元素
  • insertRow(n)：插入一行，返回其引用
  • deleteRow(n)：删除第n行

<tr>元素的属性和方法

  • cells：中的单元格的集合
  • insertCell(n)：插入单元格
  • deleteCell(n)：删除单元格

5、插入标记

  • (1) innerHTML：代表元素的所有子节点
  • (2) outerHTML：代表元素及其所有子节点
  • (3) insertAdjacentHTML()：插入HTML标签和文本