javascript学习笔记（四）：DOM操作HTML
当网页被加载时，浏览器会创建页面的文档对象模型Document Object Model，简称DOM
Dom操作html
1:改变页面中所有HTML元素
2:改变页面中所有HTML属性
3:改变页面中所有css样式
4:对页面中所有事件做出反应
改变页面中HTML元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<p id="div">Hello</p> <!--设置一个p标签，id为div，显示Hello-->
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").innerHTML="world"; //查找id=div的元素，并替换其内容。
}
</script>
</body>
</html>
改变页面中HTML属性
改变href属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<a id="aid" href="http://www.baidu.com">Hello</a> <!--默认hello指向www.baidu.com-->
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="http://www.qq.com"; //点击按钮之后替换掉hello的指向，指向www.qq.com
}
</script>
</body>
</html>
在浏览器中运行
默认Hello指向www.baidu.com，点击按钮后，Hello指向www.qq.com
改变src属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<img id="imgid" src="1.jpg"> <!--src属性初始为1.jpg-->
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("imgid").src="2.jpg";//改变id=imgid的src属性为2.jpg
}
</script>
</body>
</html>
在浏览器中运行初始显示1.jpg图片，点击按钮后显示2.jpg图片
改变页面中css样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"> <!--使用link标签引用css文件，制定rel为web样式表，制定类型type为css样式，href制定外部文件路径-->
</head>
<body>
<div id="div" class="div"> <!--div标签应用于样式表-->
Hello
</div>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").style.background="blue"; <!--更改css样式属性，背景更改为蓝色-->
}
</script>
</body>
</html>
新建一个css文件
.div{
width: 100px; //宽100
height: 100px; //高100
background-color: red; //颜色设置为红色
}
打开初始背景颜色为红色。
点击按钮后，背景变成蓝色。
对页面中事件做出反应
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button id=btn onclick="hello()">按钮</button> //当点击事件发生时按钮时弹窗显示内容
<script>
function hello(){
alert("hello");
}
function world(){
alert("world");
}
</script>
</body>
</html>
其实以上的使用并不是很方便，当函数名修改时，点击事件调用的地方也要修改对应的函数名，而且一个点击事件对应一个函数，使用时不够灵活。
更好的方式是对应某个事件设置一个句柄，通过使用这个句柄进行操作，方便灵活。
这里会涉及到两个函数addEventListener()、removeEventListener()。
addEventListener()：向制定元素添加句柄
removeEventListener()：向制定元素移除句柄
<!DOCTYPE html>
<html>
<head lang="en">
<meta chaset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var handle=document.getElementById("btn"); //对应id=btn的元素设置一个名为handle的句柄
handle.addEventListener("click",hello); //添加一个句柄，addEventListener("事件"，调用函数名)
handle.addEventListener("click",world);
//handle.removeEventListener("click",hello); //移除一个句柄，addEventListener("事件"，调用函数名)
//handle.removeEventListener("click",world); //移除一个句柄，addEventListener("事件"，调用函数名)
function hello(){
alert("hello");
}
function world(){
alert("world");
}
</script>
</body>
</html>
在浏览器中运行，点击按钮，先弹窗hello，接着弹窗world.
javascript学习笔记（四）：DOM操作HTML的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
随机推荐
- MySql 索引 查询 优化
官方文档: https://dev.mysql.com/doc/refman/5.7/en/explain-output.html#explain_rows type: 连接类型 system 表只有 ...
- Linux 搜索日志信息
在工作中我们经常要通过日志来查找问题,但有时候日志太多又不知道日志什么时候打印的,这时我们可以通过一下方法来查找: 1.进入到日志文件存放的目录下 2.grep 关键字 * 例如要查找多有有 ...
- 阿里云实现putty私钥登录全过程
阿里云实现putty私钥登录全过程 1 putty生成公钥和私钥 1)putty生成公钥和私钥 记得在空白区域 滑动 2 公钥上传到阿里云 1)公钥上传 私钥存到本地 3 公钥绑定要登录的实例 4 ...
- Linux设置时间
设置时间为2017年5月18号9:55:15 date -s "2017-05-18 09:55:15" 修改完后执行clock -w,把系统时间写入CMOS clock -w
- HTML5 Canvas 小例子 旋转的时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ubuntu16.04搭建geodjango+postgresql+postgis的WebGIS框架（一）安装第三方空间库
postgis是postgresql的空间扩展对象,它需要一些第三方库的支持.包括GEOS, PROJ.4 和 GDAL.我们首先安装这几个空间库. 在ubuntu系统终端执行:(预先装一些依赖的库) ...
- WebService与RESTful WebService
Manual Instruction Document Web Service JAX-WS & JAX-RS Author: Liu Xiang Date: 2018/01/12 1. Su ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- 16_虚拟dom和dom diff算法
虚拟dom的作用:是为了减少操作真实的dom 初始化显示界面的过程: 1.创建虚拟dom树——>真实dom树——>绘制页面显示 更新界面的过程: 2.绘制页面显示——>setStat ...
- css：自己实现一个带小图标的input输入框
有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...