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。

onchange事件：

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

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

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

javaScript操作DOM对象（看三遍，敲三遍，写三遍！不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
JavaScript操作DOM对象
js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
JavaScript之DOM对象获取（1）
我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...
JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
jquery对象和javascript的dom对象转换
Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...
JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...

随机推荐

springboot 2.0部署到Tomat8.5上
1.改jar为war 2.改下打包的名字 3.删掉tomcat的webapps下面的所有文件夹.将打好的jar包放入到webapps下 4.运行tomcat,双击shutdown.bat 注意: sp ...
python2，python3同时安装时，python3可以安装并升级pip库，python2报错的解决办法
最近在使用pip安装包的的时候出现下面错误 UnicodeEncodeError: 'ascii' codec can't encode character u'\u258f' 查询资料后发现原因是p ...
判断是手机请求还是pc请求
网址 http://detectmobilebrowsers.com/ string u = Request.ServerVariables["HTTP_USER_AGENT"]; ...
剑指offer-复杂链表的复制
题目描述输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...
PHP日常模拟业务的小工具
随机生成姓名 public function getChar($num=2) // $num为生成汉字的数量 { $first = array('赵','钱','孙','李','周','吴','郑', ...
node 解析图片二维码的内容
const {readFile, readFileSync} = require('fs'); const decodeImage = require('jimp').read; const qrco ...
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
numpy 数组对象
numpy 数组对象NumPy中的ndarray是一个多维数组对象,该对象由两部分组成:实际的数据,描述这些数据的元数据# eg_v1 import numpy as np a = np.arange ...
Docker Swarm 创建overlay网络
Docker Swarm 创建overlay网络环境: 系统:Centos 7.4 x64 应用版本:Docker 18.09.0 管理节点:192.168.1.79 工作节点:192.168.1. ...

JavaScript的DOM对象