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 对象允 ...
随机推荐
- oracle的schema的含义
转自:http://www.cnblogs.com/sfmjp/articles/2932748.html 在现在做的Kraft Catalyst 项目中,Cransoft其中有一个功能就是schem ...
- uva-10132-排序
题意: 有很多文件,碎成了俩片,问,原来的文件是什么,如果有多个答案,任意一个答案就行,输入2N个字符串,拼接成N个文件. 直接排序,正确的答案一定是某个长度最短的和某个最长的连在一起. #inclu ...
- 57.纯 CSS 创作一双黑暗中的眼睛
原文地址:https://segmentfault.com/a/1190000015327725 感想:原来边框还能这样玩-->做会眨眼的眼睛 HTML code: <div class= ...
- 06.linux文件目录操作命令
文件目录操作命令: ls 显示文件和目录列表 -l 列出文件的详细信息 -a 列出当前目录所有文件,包含隐藏文件 mkdir 创建目录 -p 父目录不存在情况下先生成父目录 cd 切换目录 t ...
- 02.设计模式_NullObject模式
使用NULL OBJECT模式,我们可以确保返回的总是有效的对象,即使失败时也代表对象什么也不做. 下面以一个数据库查询的示例来演示空对象模式. 1.Employe实体对象空对象的接口 Employe ...
- CSS3 过渡动画
实现如下效果:当鼠标移动到图片上是图片有类似于放大镜放大的效果 transition : CSS属性 时间 当transition中监测的css属性发生变化时,会触发动画 .img_box img{ ...
- Linux的学习 --corntab
计划任务的使用方法 http://www.cnblogs.com/CraryPrimitiveMan/p/4124851.html
- WPF中TextBox文件拖放问题
在WPF中,当我们尝试向TextBox中拖放文件,从而获取其路径时,往往无法成功(拖放文字可以成功).造成这种原因关键是WPF的TextBox对拖放事件处理机制的不同,具体可参考这篇文章Textbox ...
- numpy笔记
numpy数组切片 import numpy as np arr = np.empty((8, 3))for i in range(8): arr[i] == i arr[1,2] # 选取第1行第2 ...
- Who am I？
陈治宏. 一只想做软件开发,但还在machine learning领域挣扎的计算机汪.