HTML DOM了解

来源：互联网发布：mysql join 编辑：程序博客网时间：2024/05/17 21:05

1、简介
HTML DOM 定义了访问和操作 HTML 文档的标准方法

DOM 是 Document Object Model（文档对象模型）的缩写。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
    整个文档是一个文档节点
    每个 HTML 元素是元素节点
    HTML 元素内的文本是文本节点
    每个 HTML 属性是属性节点
    注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，
它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

根元素<html>
元素<head> <body>
子元素<title> <h1>
文本节点

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。

2、编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。

例如
<p id="intro">Hello World!</p>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");

3、HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

    getElementById(id) - 获取带有指定 id 的节点（元素）
    appendChild(node) - 插入新的子节点（元素）
    removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

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

4、
某个人是一个对象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有这些方法，但会在不同时间执行它们。
一个人的属性包括姓名、身高、体重、年龄、性别等等。
所有人都有这些属性，但它们的值因人而异。

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

5、DOM 属性

nodeName 属性
nodeValue 属性

document.write(x.firstChild.nodeValue); //元素节点的第一个子节点文本节点的值

nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

6、DOM访问
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[1].innerHTML);

7、DOM修改
修改 HTML = 改变元素、属性、样式和事件。

document.getElementById("p1").innerHTML="New text!";
document.getElementById("p2").style.color="blue";

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); //向 <p> 元素追加文本节点

var element=document.getElementById("div1");
element.appendChild(para); //向父元素追加新的子元素
</script>
</body>

删除已有的HTML元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

8、事件 (onload、onunload、onchange、onmouseover、onmouseout、onmousedown、onmouseup )
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

(1)
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />

(2)
<body>
<script>
function ChangeBackground() {
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="Change background color" />
</body>

(3)
<body>
<button id="myBtn">显示日期</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate() {
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

9、DOM实例
Anchor对象：链接
Document对象：文档
Event对象：点击、光标坐标
Form和Input对象：表单
Frame、Frameset 以及 IFrame 对象：框架
Image 对象：图像
Location 对象
Navigator：浏览器
Option 和 Select 对象：下拉框
Screen 对象：屏幕
Table、TableHeader、TableRow、TableData 对象：表格
Window 对象：窗口

0 0