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进阶学习笔记（11）- Turtlebot Navigation and SLAM
(写在前面: 这里参考rbx书中第八章和ROS社区教程进行学习,先看社区教程) === Doing the Turtlebot Navigation === ref ros wiki: http ...
- Redis 常见配置
- nopi设置excel只读
- Appium -选择、操作元素2
选择元素的方法 根据xpath 在Appium中,我们没法使用css,因为css是web专用的 Appium支持xpath来定位元素 对于一些比较复杂的元素的定位,我们可以用它 driver.find ...
- Spring Cloud （6）config 客户端配置 与GitHub通信
1. 配置yml 1.1 1.2 1.3 2. 提交yml 到git 3.新建项目 pom 4.新建bootstrap.yml (优先权比application.yml高) 5.bootstrap.y ...
- Linux中的Wheel组的作用
原文:http://www.360doc.com/content/11/0505/10/4644186_114496525.shtml Linux中的Wheel组的作用(用自己的话翻译的) (原文) ...
- day30-模块和包
一.模块介绍 1.什么是模块 在python中,一个函数封装一个功能,当一个文件中包含很多个函数,而我们在其他程序中经常会用到这个文件中的功能时,那么我们就可以将这个包含多个函数的文件封装成一个模块, ...
- Redis入门高级部分
Redis: redis批量删除 redis数据备份和恢复 redis安全 redis性能测试 Redis 客户端连接 redis管道技术 redis分区 java操作redis redis批量删除 ...
- 一个未完成的2.6.32-220内核踩内存crash分析记录
遇到一个crash,log如下: BUG: unable to handle kernel NULL pointer dereference at (null) IP: [<ffffffff81 ...
- impdp导入文件失败问题解决(ORA-39001/ORA-39000/ORA-39143)
测试环境 SuSE11 + ORACLE11gR2 问题现象 执行 impdp导入现场导回的dmp文件,导入失败.错误提示如下 $impdp sysdb/oracle directory=imp_da ...