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 对象允 ...
随机推荐
- tornado－5.1版本
server.py python server.py执行 import tornado.ioloop import tornado.options import tornado.web from to ...
- CMD定时倒数
修改if %count%==20 goto finish改变秒数 CMD: mode con: cols=80 lines=25color 4ftitle Please WaitSET /P var= ...
- [转] 常用的CSS命名规则
(一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度 ...
- jquery给按钮绑定事件
JQuery: $(function(){ $("#btn1").bind("click",function(){ $("#div1").s ...
- 34.纯 CSS 创作在文本前后穿梭的边框
原文地址: https://segmentfault.com/a/1190000015045700 感想: 动画 + z-index:n ; HTML code: <div class= ...
- web.xml配置重理解
<context-param> <param-name>home-page</param-name> <param-value>home.jsp< ...
- 一个简单的python登录验证系统
希望大家来指正一下,之前间断学习了很久,刚捡起来继续学习,下面的代码写的不太好,希望看到的大神能够给予指正. 修正版: 1 # python_zhangzengqiang 2 3 a = open ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
- mysql高级聚合
GROUP_CONCAT() 函数的值等于属于一个组的指定列的所有值,以逗号隔开,并且以字符串表示 mysql> select sex,group_concat(level) from role ...
- PHP + Nginx 在 Linux（centos7）系统下的环境搭建
( 选用的操作系统为 centos7 ) 01,安装 nginx => 请移步 https://www.cnblogs.com/lovling/p/9197572.html 02,下载 php ...