HTML DOM 常用方法合集

常见的节点分为以下五种：

1.元素：ELement（nodeType返回1）
2.属性：Attribute（nodeType返回2）
3.文本：Text（nodeType返回3）
4.注释：Comment（nodeType返回8）
5.文档：Document（nodeType返回9）
文档就是 DOM 树的根节点（其实就是 ），剩下所有节点都包含在文档里。
文本是元素或属性中的文本内容，

我也是文本

属性是元素里的，

常用的 HTML DOM 方法：

• addEventListener()：向文档添加句柄
• createAttribute()：创建一个属性节点
• getAttribute()：返回指定的属性值
• setAttribute()：把指定属性设置或修改为指定的值
• createElement()：创建元素节点
• createTextNode()：创建文本节点
• appendChild(node)：插入新的子节点（元素）
• removeChild(node)：删除子节点（元素）（用法： parent.removeChild(child);或child.parentNode.removeChild(child);）
• replaceChild(node,child)：替换子节点（用法：parent.replaceChild(node,child);）
• quertSelector()：返回文档中匹配指定的CSS选择器的第一元素
• write()：向文档写 HTML 表达式 或 JavaScript 代码
• writeln()：等同于 write() 方法，不同的是在每个表达式之后写一个换行符，即自动换行（注意这里时小写的l而不是大写的i）

常用的 HTML DOM 属性：

• document.URL：返回文档完整的URL
• innerHTML：节点的文本值
• parentNode：节点的父节点
• childNodes：节点的子节点
• attributes：节点的属性节点
• firstChild：第一个子节点
• lastChild：最后一个子节点

例如：

• nodeName属性规定节点的名称：
  1.nodeName 是只读的
  2.元素节点的 nodeName 与标签名相同
  3.属性节点的 nodeName 与属性名相同
  4.文本节点的 nodeName 始终是 #text
  5.文档节点的 nodeName 始终是 #document
• nodeValue属性规定节点的值：
  1.元素节点的 nodeValue 是 undefined 或 null
  2.文本节点的 nodeValue 是文本本身
  3.属性节点的 nodeValue 是属性值

DOM根节点：

有两个特殊的属性，可以访问全部文档：
1.document.documentElement：全部文档
2.document.body：文档的主体