javascript学习笔记2之HTML DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/cqkxboy168/article/details/8714923

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

实例

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果为找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

实例

本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

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

JavaScript HTML DOM - 改变 HTML

  
  
   
   改变 HTML 输出流
   
   JavaScript 能够创建动态的 HTML 内容：
   
   今天的日期是： Sun Mar 24 2013 22:57:49 GMT+0800 (中国标准时间)
   
   在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
   
   实例
   
   <!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

   
   亲自试一试
   
   提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
  
  
  
  
   
   改变 HTML 内容
   
   修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
   
   如需改变 HTML 元素的内容，请使用这个语法：
   
   document.getElementById(id).innerHTML=new HTML
   
   实例
   
   本例改变了 <p> 元素的内容：
   
   <html>
<body>

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

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

</body>
</html>

   
   亲自试一试
   
   实例
   
   本例改变了 <h1> 元素的内容：
   
   <!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

   
   亲自试一试
   
   例子解释：
   
   上面的 HTML 文档含有 id="header" 的 <h1> 元素
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)
  
  
  
  
   
   改变 HTML 属性
   
   如需改变 HTML 元素的属性，请使用这个语法：
   
   document.getElementById(id).attribute=new value
   
   实例
   
   本例改变了 <img> 元素的 src 属性：
   
   <!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

   
   亲自试一试
   
   例子解释：
   
   上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

JavaScript HTML DOM 事件

HTML 事件的例子：

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

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时...	IE	F	O	W3C
onabort	图像的加载被中断。	4	1	9	Yes
onblur	元素失去焦点。	3	1	9	Yes
onchange	域的内容被改变。	3	1	9	Yes
onclick	当用户点击某个对象时调用的事件句柄。	3	1	9	Yes
ondblclick	当用户双击某个对象时调用的事件句柄。	4	1	9	Yes
onerror	在加载文档或图像时发生错误。	4	1	9	Yes
onfocus	元素获得焦点。	3	1	9	Yes
onkeydown	某个键盘按键被按下。	3	1	No	Yes
onkeypress	某个键盘按键被按下并松开。	3	1	9	Yes
onkeyup	某个键盘按键被松开。	3	1	9	Yes
onload	一张页面或一幅图像完成加载。	3	1	9	Yes
onmousedown	鼠标按钮被按下。	4	1	9	Yes
onmousemove	鼠标被移动。	3	1	9	Yes
onmouseout	鼠标从某元素移开。	4	1	9	Yes
onmouseover	鼠标移到某元素之上。	3	1	9	Yes
onmouseup	鼠标按键被松开。	4	1	9	Yes
onreset	重置按钮被点击。	4	1	9	Yes
onresize	窗口或框架被重新调整大小。	4	1	9	Yes
onselect	文本被选中。	3	1	9	Yes
onsubmit	确认按钮被点击。	3	1	9	Yes
onunload	用户退出页面。	3	1	9	Yes

JavaScript HTML DOM 元素（节点）
  
  
   
   添加和删除节点（HTML 元素）。
  
  
  
  
   
   创建新的 HTML 元素
   
   如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
   
   实例
   
   <div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

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

   
   亲自试一试
   
   例子解释：
   
   这段代码创建新的 <p> 元素：
   
   var para=document.createElement("p");
   
   如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
   
   var node=document.createTextNode("这是新段落。");
   
   然后您必须向 <p> 元素追加这个文本节点：
   
   para.appendChild(node);
   
   最后您必须向一个已有的元素追加这个新元素。
   
   这段代码找到一个已有的元素：
   
   var element=document.getElementById("div1");
   
   这段代码向这个已有的元素追加新元素：
   
   element.appendChild(para);
  
  
  
  
   
   删除已有的 HTML 元素
   
   如需删除 HTML 元素，您必须首先获得该元素的父元素：
   
   实例
   
   <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

   
   亲自试一试
   
   例子解释：
   
   这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
   
   <div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

   
   找到 id="div1" 的元素：
   
   var parent=document.getElementById("div1");
   
   找到 id="p1" 的 <p> 元素：
   
   var child=document.getElementById("p1");
   
   从父元素中删除子元素：
   
   parent.removeChild(child);
   
   提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
   
   不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
   
   这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
   
   var child=document.getElementById("p1");
child.parentNode.removeChild(child);

  
  
  
  
   
   HTML DOM 教程
   
   在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：
   
   如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
   
   如果您希望学到更多有关使用 JavaScript 访问 HTML DOM 的知识，请访问我们完整的 HTML DOM 教程。

javascript学习笔记2之HTML DOM

HTML DOM （文档对象模型）

HTML DOM 树

查找 HTML 元素

通过 id 查找 HTML 元素

实例

通过标签名查找 HTML 元素

实例

JavaScript HTML DOM - 改变 HTML

改变 HTML 输出流

实例

改变 HTML 内容

实例

实例

改变 HTML 属性

实例

JavaScript HTML DOM 事件

事件句柄 (Event Handlers)

JavaScript HTML DOM 元素（节点）

创建新的 HTML 元素

实例

删除已有的 HTML 元素

实例

HTML DOM 教程

事件句柄　(Event Handlers)