html-DOM了解

什么是 HTML DOM？

HTML DOM 是：

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM节点：在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML

 

DOM Nodes

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

 

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）。
• 每个节点都有父节点、除了根（它没有父节点）。
• 一个节点可拥有任意数量的子节点。
• 同胞是拥有相同父节点的节点。

 

HTML DOM 方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

 

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）
• document.createTextNode("文本节点")

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

HTML DOM 属性

属性是节点（HTML 元素）的值，您能够获取或设置。

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

注意： nodeName 始终包含 HTML 元素的大写字母标签名。

 

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性

 

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

 

能否在不引用父元素的情况下删除某个元素？
很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。
var child=document.getElementById("p1");这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：child.parentNode.removeChild(child);