第八章：DOM模型二

HTML 文档中的所有内容都是节点：

• ① 整个文档是一个文档节点 ；
• ② 每个 HTML 元素是元素节点 ；
• ③ HTML 元素内的文本是文本节点 ；
• ④ 每个 HTML 属性是属性节点 ；
• ⑤ 注释是注释节点 ；

获取DOM节点

获取 DOM 节点

• 元素节点 var list = document.getElementById(“list”)
• 属性节点 var href = list.getAttributeNode(“href”)
• 文本节点 var text = list.firstChild

DOM 树中每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

• nodeType （节点类型）
• nodeName（节点名称）
• nodeValue （节点值）

nodeType 属性

nodeType 属性可区分节点的类型

• 元素节点的 nodeType 返回值为 1
• 属性节点的 nodeType 返回值为 2
• 文本节点的 nodeType 返回值为 3
• nodeType 是只读的

nodeName属性

nodeName 属性依据节点的类型返回其名称

• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• nodeName 是只读的
• nodeName 返回标签名为大写标签名

nodeValue 属性

nodeValue 属性返回或设置当前节点的值

• 元素节点的 nodeValue 是 undefined 或 null
• 属性节点的 nodeValue 是属性值
• 文本节点的 nodeValue 是文本本身
• DOM 处理中的常见错误是希望元素节点包含文本节点
• 例如 <title》DOM 教程《/title>，元素节点《 title>，包含值为 “DOM 教程” 的文本节点。
• 可通过节点的 innerHTML 属性来访问文本节点的值。

添加元素与文本节点

第一步：生成一个 DOM 节点

• 生成一个元素节点： document.createElement( Element )
  通过指定标签名创建一个元素节点，返回一个节点对象。
  例：var btn=document.createElement(“button”);

• • 生成一个文本节点：document.createTextNode( text )
    创建文本节点，返回文本节点对象。
    例：var text=document.createTextNode( “hello!” );

第二步：把生成的节点作为某一个节点的子节点进行添加

• 向父节点的末尾添加：node.appendChild( newNode )
  例：var btn=document.createElement(“button");
  document.body. appendChild( btn );

• • 在已有子节点前插入一个新的子节点：node.insertBefore( new, old )
    例：var btn=document.createElement(“button");
    document.body.insertBefore( btn , null );

删除元素节点或文本节点

从子节点列表中删除某个节点：parentNode.removeChild(childNode)
例：通过父节点删除本节点：
myParent.removeChild( mySelfNode )

通过自己删除本节点：
mySelfNode.parentNode.removeChild( mySelfNode )