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 元素

改变 HTML 内容

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

如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法。

注:attribute表示 属性的名字。

document.getElementById(id).attribute=new value

改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById("p1").style.color = "red"; document.getElementById("p2").style.fontFamily="FangSong"; document.getElementById("p2").style.fontSize = "40px";

HTML DOM 事件

HTML 事件的例子:

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

鼠标点击:

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>点击事件</title>
6 <script type="text/javascript">
7 function changeText() {
8 document.getElementById("c1").innerHTML = "谢谢点击";
9 }
10 </script>
11 </head>
12 <body>
13 <h1 onclick="this.innerHTML='谢谢'">点击文字试试看</h1>
14 <h2 id="c1" onclick="changeText();">点击文字试试看</h2>
15 <h3 id="c3" onclick="changeText1(this);">点击文字试试看</h3>
16
17 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
18 <button onclick="displayDate();">点击</button>
19 <button id="b1">点击</button>
20 <p id="demo"></p>
21 <script type="text/javascript">
22 function changeText() {
23 document.getElementById("c1").innerHTML = "谢谢点击";
24 }
25
26 function changeText1(id) {
27 id.innerHTML = "也行";
28 }
29
30 function displayDate() {
31 document.getElementById("demo").innerHTML = Date();
32 }
33
34 document.getElementById("b1").onclick = function() {play();}
35 function play() {
36 document.getElementById("demo").innerHTML = Date();
37 }
38 </script>
39 </body>
40 </html>

网页加载onload 和 onunload 事件:

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

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

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

<body onload="checkCookies()">

onchange事件:

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

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

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

JavaScript的DOM对象的更多相关文章

  1. javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  2. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  3. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  4. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  5. JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

  6. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. JavaScript之DOM对象获取(1)

    我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...

  8. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  9. jquery对象和javascript的dom对象转换

    Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...

  10. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

随机推荐

  1. post body 传输参数

    postman 示例: 请求地址:http://member-system-api.dd01.work/api/inApp 设置headers头:Content-Type       applicat ...

  2. 洛谷P3167 通配符匹配 [CQOI2014] 字符串

    正解:哈希+dp/AC自动机/kmp 解题报告: 传送门! 这题解法挺多的,所以就分别港下好了QwQ 首先港下hash+dp趴 可以考虑设dp式f[i][j]:匹配到第i个通配符了,下面那个字符串匹配 ...

  3. 小程序map组件默认层级最高,并且不能设置的解决方案

    map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些 ...

  4. ACFS-9459: ADVM/ACFS is not supported on this OS version

    环境:RHEL 7.3 + Oracle 12.2.0.1 RAC 现象:acfs资源状态不正常,asmca图形也没有acfs相关内容,无法使用acfs. 1.具体现象 2.定位bug 3.解决问题 ...

  5. reactjs中使用高德地图计算两个经纬度之间的距离

    第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { L ...

  6. SV coverage

    covergroup是对coverage model的一种包装,每个covergroup可以包含: 1) sync event来触发采样, 2) 很多coverpoint, 3) cross cove ...

  7. MSG结构体和WndProc窗口过程详解

    MSG结构体和WndProc窗口过程对于Windows编程非常重要,如果不了解它们,可以说就没有学会Windows编程. MSG结构体 MSG 结构体用来表示一条消息,各个字段的含义如下: typed ...

  8. 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现

    目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...

  9. 微信小程序一些demo链接地址

    校园小情书小程序前端+后端源码 https://www.douban.com/group/topic/116974400/ 小程序源码疯狂猜成语小程序源码UI美观 https://www.douban ...

  10. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...