Java带有示例的脚本 DOM 教程

由： 詹姆斯·哈特曼 詹姆斯·哈特曼
Hours 更新

DOM 是什么 Java脚本？

Java脚本可以利用文档对象模型 (DOM) 访问网页中的所有元素。事实上，网页加载时，Web 浏览器会创建网页的 DOM。DOM 模型以对象树的形式创建，如下所示：

DOM 中 Java脚本

如何使用 DOM 和事件

使用 DOM， Java脚本可以执行多项任务。它可以创建新的元素和属性，更改现有的元素和属性，甚至删除现有的元素和属性。 JavaScript 还可以对现有事件做出反应并在页面中创建新事件。

getElementById, innerHTML 示例

  1. getElementById：访问已设置 id 的元素和属性。
  2. innerHTML：访问元素的内容。

自己尝试一下这个例子：

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

getElementsByTagName 示例

getElementsByTagName：使用标签名称访问元素和属性。此方法将返回一个 排列 所有具有相同标签名称的项目。

自己尝试一下这个例子：

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

事件处理程序示例

  1. createElement：创建新元素
  2. removeChild：删除一个元素
  3. 您可以添加一个 事件处理程序 对于这样的特定元素：
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

自己尝试一下这个例子：

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>