DOM对象是个好东西。

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

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

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

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

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


一、查找元素

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

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

1.通过 id 找到 HTML 元素

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

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

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

亲自试一试

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

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

2.通过标签名找到 HTML 元素

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

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

亲自试一试
3.通 过类名找到 HTML 元素通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

二、更改元素内容

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1.改变HTML输出流

JavaScript 能够创建动态的 HTML内容。

比如输出当前日期：Sun Jan 27 2013 12:07:33 GMT+0800

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

<!DOCTYPE html>
<html>
<body><script>
document.write(Date());
</script></body>
</html>

亲自试一试

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

2.改变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)。

3.更改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"）。

三、更改元素的样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

例子 1
下面的例子会改变 <p> 元素的样式：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>

亲自试一试
例子 2
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<h1 id="id1">My Heading 1</h1>
<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>

亲自试一试

更多实例
Visibility

如何使元素不可见。你希望元素显示或消失吗？请点击上面的案例

HTML DOM Style 对象参考手册

如需完整的 HTML DOM Style 对象属性，请参阅W3C的HTML DOM Style 对象参考手册。

四、处理各种事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

1.对事件作出反应

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

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript

HTML 事件的例子：

  • 当用户点击鼠标时

  • 当网页已加载时

  • 当图像已加载时

  • 当鼠标移动到元素上时

  • 当输入字段被改变时

  • 当提交 HTML 表单时

  • 当用户触发按键时

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

亲自试一试

本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击该文本</h1>
</body>
</html>

亲自试一试

2.HTML事件属性

如需向 HTML 元素分配 事件，可以使用事件属性。

实例

向 button 元素分配 onclick 事件：

<button οnclick="displayDate()">点击这里</button>

亲自试一试

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

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

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

亲自试一试

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时，会执行该函数。

4.onload 和 onunload 事件

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

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

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

<body οnlοad="checkCookies()">

亲自试一试

5.onchange 事件

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" οnchange="upperCase()">

亲自试一试

6.onmouseover 和 onmouseout 事件

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

一个简单的 onmouseover-onmouseout 实例：

亲自试一试

7.onmousedown、onmouseup 以及 onclick 事件

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

一个简单的 onmousedown-onmouseup 实例：

亲自试一试

8.更多实例

onmousedown 和 onmouseup ：当用户按下鼠标按钮时，更换一幅图像。 onload： 当页面完成加载时，显示一个提示框。 onfocus ：当输入字段获得焦点时，改变其背景色。 鼠标事件 ：当指针移动到元素上方时，改变其颜色 ；当指针移出文本后，会再次改变其颜色。

五、添加和删除节点

1.创建新的 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);

2.删除已有的 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);

至此，简单的DOM就算是介绍完毕。

[JavaScript]关于JavaScript中DOM对象的使用相关推荐

  1. JavaScript中DOM对象的详解

    *** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...

  2. HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  3. [举一反三]使用javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程 ...

  4. 用 JavaScript 替换数组中的对象

    由于 JavaScript 是一种动态语言,本文将讨论如何在 JavaScript 中轻松替换存储在数组中的不同对象. 在 JavaScript 中,数组中的对象和类型是动态的或可以更改的.我们可以在 ...

  5. 初学JavaScript：js中的对象（对象+原型对象）

    文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...

  6. 前端之JavaScript：JS之DOM对象一

    js之DOM对象一 一.什么是HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...

  7. javaScript与jQuery中Window对象

    一,Window对象概述:对游览器窗口的控制.window对象代表游览器打开的窗口. 二,Window对象的属性: document-对话框中显示的当前文档 location-指定当前文档的URL n ...

  8. Javascript vue 数组中的对象分离 获取对象属性名称 对象属性值

    "productItemInfo":[{"字面颜色":"蓝色系/深蓝色"},{"字边颜色":"金属色/拉丝银& ...

  9. 抓取html对象插件,chrome扩展获取页面dom对象信息

    chrome扩展,在popup页面,给页面对象绑定点击事件,获取当前tab加载页面的DOM对象信息.本chrome扩展功能主要用于获取百度搜索输入框中用户输入的关键字.效果如下 源代码如下注意:以下文 ...

最新文章

  1. 210106阶段三 文件I/O
  2. CF981E Addition on Segments 线段树分治 + bitset优化
  3. android: a system image must be selected to continmue
  4. 三星开源的 tcpflow 抓包工具
  5. C语言中全局变量存放在哪个位置？
  6. Android相对属性布局总结
  7. BUMO 区块链开发文档
  8. 服务器虚拟化基础hcna,华为云计算全新大纲课程 乾颐堂HCNA-Cloud服务器虚拟化云计算实战课程 HCNA认证课程...
  9. 完美解决IE9浏览器出现的对象未定义问题
  10. 华为会强迫升级鸿蒙,华为手机升级鸿蒙系统好用吗
  11. [实战]爬取网抑云音乐评论
  12. Git拉分支及合并分支
  13. 代码审计| HDWiki 漏洞（一）
  14. 怀揣梦想，我依靠自己，往后余生越来越精彩
  15. python 可视化 皮肤_为什么我不建议你轻易入Python的“坑”？
  16. 蓝桥杯——PWM / PWM定时器捕获频率和占空比
  17. WPS编辑器实现自定义小功能
  18. 堆栈内存的分析以及作用域的详解
  19. 【干货】百度站长工具（资源平台）使用教程、解读
  20. 计算机怎么删除我的苹果设备管理器,怎么删除电脑我的苹果设备管理器

热门文章

  1. 守护者创客~ 一个真正可以放手一搏的项目
  2. 一个matlab可视化的结果
  3. 【HTML】常见的块元素，行内元素，行内块元素有哪些？
  4. ubuntu 更新系统源
  5. 浏览器中的画中画（Picture-in-Picture）模式及其 API
  6. 基于linux的在线英汉词典（带源码）
  7. Kerberos认证介绍及黄金票据和白银票据
  8. 力扣网-罗马数字转整数
  9. 机器学习中的数学——常用概率分布（二）：范畴分布（Multinoulli分布）
  10. soul 总是显示登录聊天服务器,用soul聊天莫名其妙被封了号，并没有发广告就被封...