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 对象允 ...
随机推荐
- ROS学习手记 - 8 编写ROS的Publisher and Subscriber
上一节我们完成了 message & srv 文件的创建和加入编译,这次我们要玩简单的Publisher 和 Subscriber 要玩 Publisher 和 Subscriber, 需要具 ...
- ios自动监测更新
http://blog.csdn.net/davidsph/article/details/8931718
- openStack cpu绑定
来自:http://fishcried.com/2015-01-09/cpu_bindings/ 前一篇理解cpu topology对CPU Topology进行了学习总结,这里想总结下OpenSta ...
- 3. java.lang.UnsupportedClassVersionError: javax/annotation/ManagedBean : Unsupported major.minor version 51.0
问题描述:
- asp.net excel模板下载
string filePath = Server.MapPath("~/model/模板.xls");//路径 FileInfo fileInfo = new FileInfo(f ...
- Web移动端布局
说到移动端,不得不提适配问题,因为现如今市面上移动设备的分辨率大小不同,显然咱们常用的px单位在这个时候就有些不太灵光了,为此,css3出了一个新单位——rem,rem是移动端神器,它完美解决了分辨率 ...
- element(vue.js)+django 整合
近期开始接触Python,从web开发入门.尝试Django与vue整合,大概分3个阶段: 1.基于Django开发web后端 2.基于element开发好前端 3.前后端整合 参考:https:// ...
- Image Base64 Datasnap Image delphi与c#互相兼容识别
delphi用,不能与java.c#互相识别. procedure TServerMethods.UpdateDoc(ItemID : integer; doc : TStream); delphi用 ...
- html中控制Tab键的顺序
在做项目中,需要控制html页面上登陆表单的按Tab键的顺序,代码如下: <tr> <td width="19%&quo ...
- 机器学习进阶-图像特征sift-SIFT特征点 1.cv2.xfeatures2d.SIFT_create(实例化sift) 2. sift.detect(找出关键点) 3.cv2.drawKeypoints(画出关键点) 4.sift.compute(根据关键点计算sift向量)
1. sift = cv2.xfeatures2d.SIFT_create() 实例化 参数说明:sift为实例化的sift函数 2. kp = sift.detect(gray, None) 找出 ...