HTML DOM (文档对象模型)

什么是DOM?

DOM 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准。

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

W3C DOM 标准被分为 3 个不同的部分:

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

访问浏览器,加载网页的同时,浏览器会创建页面的文档对象模型(Document Object Model)。

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

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

在HTML DOM中,所有事物都是节点,DOM是被视为节点树的HTML,方法是在节点上执行的操作。

编程接口

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

一些常用的 HTML DOM 属性:

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

一些常用的HTML DOM方法:

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

查找 HTML 元素

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

查找 id="intro" 的元素

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

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素,如果未找到该元素,则 x 将包含 null。

方法(二)在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id通过标签名查找 HTML 元素

查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

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

提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

改变 HTML 输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

document.write(Date());

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

document.getElementById("p1").innerHTML="New text!";

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";

对事件做出反应

我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。

HTML 事件的例子:

  • 当用户点击鼠标时
  • <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

使用 HTML DOM 来分配事件

HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件:

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

添加和删除节点(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>

删除已有的 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>

提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚需要删除的元素,以及它的父元素。

这是常用的解决方案:找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

  var child=document.getElementById("p1");  child.parentNode.removeChild(child); 

javascript进击(四)HTML DOM的更多相关文章

  1. JavaScript(四)——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  2. Javascript知识四(DOM)

     [箴 10:4] 手懒的,要受贫穷:手勤的,却要富足. He becometh poor that dealeth with a slack hand: but the hand of the di ...

  3. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  4. JavaScript之旅(DOM)

    JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...

  5. 学习javascript数据结构(四)——树

    前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...

  6. JavaScript大杂烩10 - 理解DOM

    操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标.   DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...

  7. 第一百四十一节,JavaScript,封装库--DOM加载

    JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

  8. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  9. JavaScript之BOM和DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  10. 8.6 JavaScript之HTML的DOM(三)

    8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...

随机推荐

  1. HDU4739Zhuge Liang's Mines(状压)

    链接 预处理出只有四个1的情况存入数组中 然后状压下 #include <iostream> #include<cstdio> #include<cstring> ...

  2. 采用软件nginx实现web服务器集群

    nginx:软件负载均衡器  是高并发量http/反向代理服务器.实现windows下IIS的负载均衡 条件:2台服务器 1.cpu:Inter(R) 酷睿 i5 cpu 2.26GHz 内存:2G ...

  3. 【Android】Android部分问题记录

    1.EditText不显示光标 开发的时候遇到有部分手机,小米系列以及华为部分手机不显示光标. 设置EditText属性 android:textCursorDrawable="@null& ...

  4. SQL Server触发器以及如何在SQL Server Manager中调试触发器

    ·只有inserted表有数据时,当前操作为insert:·inserted和deleted两张表都有数据时,当前操作为update:·只有deleted表有数据时,当前操作为delete. 1. C ...

  5. [Andrew]Ext.Net常用布局(Border布局)

    @(Html.X().Window().Width(600).Height(400).Layout(LayoutType.Border) .Items(p => {     p.Add(Html ...

  6. 【libsvm学习】

    参考: http://www.cnblogs.com/bigshuai/articles/2883256.html http://www.cnblogs.com/tornadomeet/archive ...

  7. lua部分 tips

    lua文件刷新 function require_ex( _mname ) if _mname == "" then return end if package.loaded[_m ...

  8. qosort 使用使用小例子

    输入 1500 3150 300100 200 输出结果470 471100    200150    300470    471     #include <iostream> #inc ...

  9. CentOS下恢复Firefox的复制等功能

    在CentOS下使用firefox编辑博客时,我发现无法使用复制粘帖功能,可用如下两种方法恢复(方法一已验证可行): 方法一: 找到user.js所在的目录,Linux下的user.js所在目录为Un ...

  10. Jquery zTree的使用

    <%@ page language="java" pageEncoding="utf-8"%><%@taglib prefix="s ...