4-DOM简介-核心DOM

DOM：DOM可以使用脚本，动态的访问或操作，网页的内容、网页外观、网页结构。

DOM分类（学习属性和方法）

• 核心DOM：提供了同时操作HTML文档和XML文档的公共属性和方法
• HTML DOM：针对HTML文档提供的专用的属性和方法
• XML DOM：针对XML文档提供的专用的属性和方法
• CSS DOM：提供了操作CSS的属性和方法
• Event DOM：事件对象模型。如：onclick、onload等

HTML节点树

节点关系（根节点、子节点、父节点、兄弟节点）

DOM中节点类型

• document文档节点，代表整个网页，不代表任何HTML标记。是HTML标记的父节点。
• element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
• attribute属性节点，指HTML标记的属性。
• text节点，是节点树的最底层节点。

核心DOM中公共的属性和方法

• 提示：核心DOM中查找节点（标记），都是从根节点开始的。
• 节点访问
  • nodeName：节点名称
  • nodeValue：节点值。只有文本节点才有值，元素节点没有值。不包含标记，只是文本。
  • firstChild：第一个子节点
  • lastChild：最后一个子节点
  • childNodes：子节点列表，是一个数组。
  • parentNode：父节点
  • 查找HTML标记
    • document.firstChild
    • document.documentElement
  • 查找body标记
    • document.firstChild.lastChild
    • document.body
  • 为什么，document.body.first找不到table节点？
    • 核心DOM是针对的属性和方法，主要针对HTML4.0开发的。
    • 在Firefox下，会把空格和换行，当成文本节点
    • HTML4.0是没有DTD类型定义的
• 节点属性
  • setAttribute（name，value）：给某个节点添加一个属性
  • getAttribute（name）：获取某个节点属性的值
  • removeAttribute（name）：删除某个节点的属性
• 节点的创建
  • createElement（tagName）：创建一个HTML标记，一个节点
    • tagName：的HTML标记名称，如：var imgObj = document.createElement(“img”);
  • parentNode.appendChild（childNode）：将创建的节点，追加到某个父节点下
  • parentNode.removeChild（childNode）:删除子节点