html模型,html dom模型一

DOM 节点

包含的节点内容：

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

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：

DOM 教程，元素节点 ，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

1：HTML DOM 常用方法方法

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createAttribute()

创建属性节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

getAttribute()

返回指定的属性值。

setAttribute()

把指定属性设置或修改为指定的值。

2：HTML 的属性：

innerHTML

Hello World!

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

nodeName 属性：

nodeName 属性规定节点的名称

nodeValue 属性

nodeValue 属性规定节点的值。

nodeType 属性

nodeType 属性返回节点的类型

元素类型

NodeType

元素

1

属性

2

文本

3

注释

8

文档

9

3：HTML DOM 访问：

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

通过使用 getElementById() 方法

Hello World!

DOM 很有用！

本例演示 getElementsByTagName 方法。

x=document.getElementById("main").getElementsByTagName("p");

document.write("div 中的第一段的文本: " + x[0].innerHTML);

Hello World!

DOM 很有用！

本例演示 getElementsByTagName 方法。

x=document.getElementById("main").getElementsByTagName("p");

document.write("div 中的第一段的文本: " + x[0].innerHTML);

4：修改html dom

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件(处理程序)

5:HTML DOM - 元素

添加、删除和替换 HTML 元素。

6:HTML DOM - 事件

DOM模型有三种