节点

节点

节点值

• 所有的元素节点 节点值都是null
• 文本节点的节点值 是文本内容
• 注释节点的节点值 是注释文本身
• 属性节点的节点值 是属性值
• 文档节点的节点值是 null

节点值

• 元素节点 元素名(大写)
• 属性节点 属性名
• 文本节点 #text
• 注释节点 #comment
• 文档节点 #document

节点属性

• innerHTML
  • 可以获取或设置元素内部的html内容
    • 例： box.innerHTML += ‘hello world’;
    • console.log(text.innerHTML)
• innerText 和 textContent
  • 用于获取元素内部的文本内容(不包含标签)
    • innerText不是DOM标准 兼容低版本IE
    • textContent是DOM标准属性 IE8以下不支持

节点方法

• removeChild
  • 用于删除并返回指定的元素节点
• parentNode.appendChild(childNode);
  • 在父节点的结尾追加子节点
  • document.body.appendChild(div);//将div放入body
• parentNode.insertBefore(newChild,existingChild)
  • 在父元素的指定子元素之前插入新节点
  • 第一个参数 新的节点；第二个参数 旧的节点
    • document.body.insertBefore(span, h1);
• parentNode.replaceChild(newNode,oldNode);
  • 用于子节点替换 返回被替换的元素
  • 第一个参数（newNode）新的； old旧的