DOM简介

什么是DOM?

DOM 是 Document Object Model(文档对象模型)的缩写。
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是 HTML DOM?

HTML DOM 是:

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

HTML DOM树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。

通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

请看下面的 HTML 片段:

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中:

<html> 节点没有父节点;它是根节点
<head><body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且:

<html> 节点拥有两个子节点:<head><body>
<head> 节点拥有一个子节点:<title> 节点
<title> 节点也拥有一个子节点:文本节点 "DOM 教程"
<h1><p> 节点是同胞节点,同时也是 <body> 的子节点

并且:

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

方法&属性

常见 DOM 对象方法

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

一些常用的 HTML DOM 属性:

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

访问 HTML 元素(节点)

访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素:
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

<!DOCTYPE html>
<html>
  <body>
    <p>Hello World!</p>

    <div id="main">
    <p>DOM 很有用!</p>
    <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
    </div>

    <script>
    x=document.getElementById("main").getElementsByTagName("p");
    document.write("div 中的第一段的文本: " + x[0].innerHTML);
    </script>

  </body>
</html>

修改 HTML 元素

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

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件(处理程序)

<!DOCTYPE html>
<html>
	<body>

      <p id="p1">Hello World!</p>

      <script>
      document.getElementById("p1").innerHTML="New text!";
      </script>

      <p>上面的段落被一段脚本改变了。</p>

	</body>
</html>

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

<!DOCTYPE html>
<html>
	<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);

      var element=document.getElementById("div1");
      element.appendChild(para);
      </script>
	</body>
</html>

事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。
HTML 事件的例子:

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
		<button id="myBtn">试一试</button>

		<script>
		document.getElementById("myBtn").onclick=function(){displayDate()};
		function displayDate()
		{
			document.getElementById("demo").innerHTML=Date();
		}
		</script>

		<p id="demo"></p>

	</body>
</html>

posted on 2016-05-24 11:10  XD大侠  阅读(248)  评论(0编辑  收藏  举报

导航