1.2（JavaScript学习笔记）JavaScript HTML DOM
一、DOM
DOM全称为document object model（文档对象模型）。
此处的文档指当前HTML文档，对象指HTML标签。
当网页被加载时，浏览器会创建页面的文档对象模型。
下面结合具体的例子理解文档对象模型。 图片来自：w3school JavaScript HTML DOM
<html>
<head> <!--元素-->
</head>
<body> <!--属性，属性值--->
<a href = "www.baidu.com">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
每个载入浏览器的 HTML 文档都会成为 document 对象。
document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
图片来自：w3school
document就是一个代表当前HTML文档的对象，这个对象中有一些方法。
而HTML中每个标签也是一个对象，这个对象就是元素对象（标签是HTML文档的元素），可以通过document获取。
<!DOCTYPE html>
<html>
<head> </head> <body> aaaaaaaa
<input id = "i1" type = "test" value = "123456"/>
</body>
</html> <script>
var pt = document.getElementById("i1");//获取id为pt的元素
var pt_info = pt.value; //获取该元素的值 ，HTML元素属性
var pi = pt.tagName; //获取该元素的标签名，元素对象方法，可以用在所有HTML元素对象上。
document.write("输入框内容为："+pt_info + "<br>");//输出值
document.write("标签名为："+pi);//输出值
</script>
首先通过document.getElementById获取指定元素，此时pt就代表id为i1的input标签。
然后获取pt.value获取对象的值，value是<input>对象的属性值。
HTML元素对象、HTML元素对象的属性及方法可参阅：JavaScript参考手册
上例中通过document获取一个元素对象，但这里的pt特指<input type = "text">这个HTML对象。
首先pt是一个元素对象，其次它是一个HTML元素对象。
可以看做HTML元素继承了Element元素，HTML元素既有Element元素提供的方法，
也可以根据当前标签本身设置特定的方法（HTMLElement中的方法）。
所以pt既有元素对象的方法和属性，
也有HTML对象的方法和属性。
简单的说就是元素对象的方法和属性可以用在所以HTML元素对象上。
二、DOM HTML
使用JavaScript可以动态的改变HTML元素的属性和内容，
主要步骤，
1、根据id或name或标签名获取元素。
2、根据元素的属性和方法修改其属性或值。
这里需要用到一个比较重要的方法
innerHTML这个是元素对象中的方法，也就意味着可以对所有HTML元素对象使用。
innerHTML有两个作用，var info = element.innerHTML; 代表返回HTML标签内部的值。
element.innerHTML = "123"; 代表修改标签内部的值为123.
<!DOCTYPE html>
<html>
<head> </head> <body>
aaaaaaaa
<p id = "p1">p111111</p>
</body>
</html>
<script>
var p_info = document.getElementById("p1").innerHTML;
document.write("改变前：" + p_info);
document.getElementById("p1").innerHTML= "改变后：12345"; </script>
改变的是<p>标签原有内容，将p11111变为了12345.
使用innerHTML可以直接在标签内部写入新标签。
<!DOCTYPE html>
<html>
<head> </head> <body>
aaaaaaaa
<p id = "p1">p111111</p>
</body>
</html>
<script>
var p_info = document.getElementById("p1").innerHTML;
document.write("改变前：" + p_info);
document.getElementById("p1").innerHTML= "改变后<a href='http://www.baidu.com'>baidu</a>"; </script>
三、DOM CSS
DOM允许JavaScript修改HTML元素的样式。
document.getElementxxx("xxx").style.属性 = xxx;
<!DOCTYPE html>
<html>
<head>
</head> <body>
aaaaaaaa
<p id = "p1">p111111</p>
</body>
</html>
<script>
var p_info = document.getElementById("p1").innerHTML;
document.write("改变前：" + p_info);
document.getElementById("p1").style.color= "red"; </script>
style对象是element的一个属性
style对象的属性可参阅：Style对象参考手册
四、DOM 事件
DOM 事件：例如鼠标点击，
4.1鼠标点击 onclick="事件发生时执行的函数"， onclick所在的标签触发了事件才会执行。
<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function changeText(ele){
ele.innerHTML = "点击了" + count + "次";
count++;
} </script>
</head> <body>
<p id = "p1" onclick = "changeText(this)">请点击我</p> <!--this代表当前HTML元素对象 <p>元素所代表的对象-->
</body>
</html>
点击<p>标签，会显示更新当前点击次数。
<p onclick = "this.innerHTML = '1111' ">123455</p>
点击后，当前元素内部的内容会变为111.
4.2 为元素分配事件。
DOM允许为元素分配事件。
下面看一个例子：
<!DOCTYPE html>
<html>
<head> </head> <body>
<p id = "p1">请点击我</p>
</body>
</html> <script>
var count = 1;
function changeText(ele){
ele.innerHTML = "点击了" + count + "次";
count++;
}
var p1 = document.getElementById("p1");
p1.onclick = function(){changeText(p1)}; <!--为p1分配点击事件对应执行的函数--> </script>
4.3onload 和 onunload 事件
onload会在页面加载时触发，onunload会在离开、刷新页面时触发。
<!DOCTYPE html>
<html>
<head> </head> <body onload = "alert('欢迎！') " onunload = "alert('再见！')">
<a href="http://www.baidu.com"> baidu</a>
</body>
</html>
测试时chrome、edge不支持onunload事件，ie支持onunload事件。alert是window对象（当前窗口）提供的函数
显示带有一段消息和一个确认按钮的警告框。
4.4 onchange
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
<!DOCTYPE html>
<html>
<head>
<script>
function toUpper(e){
e.value = e.value.toUpperCase();//将value改为大写
} </script>
</head> <body>
<input id = "i1" type = "text" onchange = "toUpper(this)"/>
</body>
</html>
e.value是一个string对象，toUpperCase是字符串对象提供的方法，将小写转换为大写。
当文本域发送变化时触发onchange事件，执行对应函数。
4.5 onmouseover onmouseout
onmouseover当鼠标处于该元素上方时触发，onmouseout当鼠标离开时触发。
<!DOCTYPE html>
<html>
<head> </head> <body >
<p id = "p1">请将鼠标放在上面</p>
</body>
</html>
<script>
function over(p){
p.innerHTML = "谢谢！";
p.style.color = "red";
}
function out(p){
p.innerHTML = "请将鼠标放在上面";
p.style.color = "black";
} var p1 = document.getElementById("p1"); <!--将事件绑定到p标签-->
p1.onmouseover = function(){over(p1)};
p1.onmouseout = function(){out(p1)}; </script>
4.6 onmousedown onmouseup
onmousedown在鼠标按下时触发，onmouseup在鼠标松开时触发。
<!DOCTYPE html>
<html>
<head> </head> <body >
<p id = "p1">请按下鼠标</p>
</body>
</html>
<script>
function down(p){
p.innerHTML = "请松开鼠标";
p.style.color = "red";
}
function up(p){
p.innerHTML = "请按下鼠标";
p.style.color = "black";
} var p1 = document.getElementById("p1");
p1.onmousedown = function(){down(p1)};
p1.onmouseup = function(){up(p1)}; </script>
还有一些其他的事件可参阅：w3school 事件参考手册
参考资料：
1.2（JavaScript学习笔记）JavaScript HTML DOM的更多相关文章
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...
- JavaScript学习笔记系列2:Dom操作(一)
一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- javascript学习笔记 BOM和DOM详解
js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...
- JavaScript学习笔记(11)——HTML DOM Event对象
w3cshool:时间参考手册:http://www.w3school.com.cn/jsref/dom_obj_event.asp
- [JavaScript] 学习笔记-JavaScript基础教程
1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- 设计模式之Builder
设计模式总共有23种模式这仅仅是为了一个目的:解耦+解耦+解耦...(高内聚低耦合满足开闭原则) 介绍: Builder模式是一步一步创建一个复杂的对象,它允许用户可以只通过指定复杂对象. 将一个复杂 ...
- splay:优雅的区间暴力！
万年不更的blog主更新啦!主要是最近实在忙,好不容易才从划水做题的时间中抽出一段时间来写这篇blog 首先声明:这篇blog写的肯定会很基础...因为身为一个蒟蒻深知在茫茫大海中找到一个自己完全能够 ...
- gpio子系统和pinctrl子系统（中）
pinctrl子系统核心实现分析 pinctrl子系统的内容在drivers/pinctrl文件夹下,主要文件有(建议先看看pinctrl内核文档Documentation/pinctrl.txt): ...
- python基础===Character string
本文转自:python之Character string 1.python字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串,l Python不支持单 ...
- glom模块的使用(一)
glom模块的使用 简单说下glom模块主要是处理结构化数据用的,安装简单pip install glom即可,下面就glom的方法参数做例子讲解. glom 和模块同名的glom方法使用方法: .g ...
- python爬虫实战——5分钟做个图片自动下载器
python爬虫实战——图片自动下载器 制作爬虫的基本步骤 顺便通过这个小例子,可以掌握一些有关制作爬虫的基本的步骤. 一般来说,制作一个爬虫需要分以下几个步骤: 分析需求(对,需求分析非常重要, ...
- MongoDB的win安装教程
写在前面的 Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了面向对象的思想(OO思想),在Mo ...
- django给视图添加缓存功能
在开发过程中,有些视图只是查询数据,而且查询的数据一般不会变化.例如,做地址模块时,省市县都是不会变的.如果用户每次请求地址视图时,都要执行视图返回数据,会给服务端带来不必要的压力.这时候可以用到缓存 ...
- react初体验
function Guest() { return ( <h1>pls login in</h1> ); } function User() { return ( <h1 ...
- 初次接触express
今天初次使用express,还是写写心得好了. 中间件 mothod nodemon ~的使用 中间件 中间件我觉得就是个开箱即用的工具,写好中间件函数,直接use就好. 示例1: let myLog ...