javascript学习（二） DOM操作HTML
一：DOM操作HTML
- JavaScript能够改变页面中所有的HTML元素
- JavaScript能够改变页面中所有的HTML属性
- JavaScript能够改变页面中所有的CSS样式
- JavaScript能够对页面中的所有事件做出反应
- 改变HTML的输出流：document.write(); 会覆盖其他的元素，所以最好不要用
eg1：简单操作HTML元素和属性
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p id="p1">
Hello</p>
<button id="btn" onclick="demo()">
变</button>
<button id="Button1" onclick="demo2()">
覆盖</button>
<a id="aid" href="www.baidu.com">百度</a>
<button id="Button2" onclick="demo3()">
修改元素</button>
<script type="text/javascript">
function demo() {
document.getElementById("p1").innerHTML = "World";
}
function demo2() {
document.write("会覆盖其他元素");
}
function demo3() {
document.getElementById("aid").href = "http://www.cnblogs.com/lipeng0824/";
document.getElementById("aid").innerHTML = "李鹏的博客";
}
</script>
</body>
</html>
eg2：操作样式和监听（包括几种不同的改变(注册)html事件的方法）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#divid
{
background-color: Red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="divid">
</div>
<script>
var div = document.getElementById("divid");
//匿名函数修改dom属性
div.onmousemove = function () {
div.style.backgroundColor = "yellow";
};
//直接修改函数 注意这里的函数名后面没有括号
div.onmouseout = bian2;
//为div添加监听函数
div.addEventListener("click", bian);
div.addEventListener("click", function () {
alert("点击了div");
});
function bian() {
div.style.backgroundColor = "blue";
}
function bian2() {
div.style.backgroundColor = "black";
}
</script>
</body>
</html>
javascript学习（二） DOM操作HTML的更多相关文章
- Javascript学习二---DOM元素操作
Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...
- Javascript学习笔记三——操作DOM（二）
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- javascript教程2:---DOM操作
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
- 网页制作之JavaScript部分 2 - DOM操作
1.DOM的基本概念 htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...
- 原生JavaScript常用的DOM操作
之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...
- HTML学习之==>DOM操作
DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...
- jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
- 7. JavaScript学习笔记——DOM
7. DOM 7.1 DOM简介 DOM是文档对象模型,HTML文档的所有内容都是节点: 整个文档是一个文档节点 (document 最顶级) HTML元素内的文本是文本节点 每个表面的属性是属性节点 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- JavaScript学习05（操作DOM）
操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...
随机推荐
- Swift实战-豆瓣电台（九）简单手势控制暂停播放（全文完）
Swift实战-豆瓣电台(九)简单手势控制暂停播放 全屏清晰观看地址:http://www.tudou.com/programs/view/tANnovvxR8U/ 这节我们主要讲UITapGestu ...
- PostgreSQL Replication之第十四章 扩展与BDR
在这一章中,将向您介绍一个全新的技术,成为BDR.双向复制(BDR),在PostgreSQL的世界里,它绝对是一颗冉冉升起的新星.在不久的将来,许多新的东西将会被看到,并且人们可以期待一个蓬勃发展的项 ...
- ASP.NET的一般处理程序对数据的基本操作
TableList.ashx: <%@ WebHandler Language="C#" Class="TableList" %> using Sy ...
- Android -- 自定义View小Demo（一）
1,现在要实现下图的简单效果,很简单 ,就是使用paint在canvas上绘制5中不同颜色的圆圈,效果图如下: 这是绘制基本图形一种最简单的方法,下面是它的代码 ,注释写的很详细,也就不去讲解了 M ...
- [转]iis7.5+win2008 出现 HTTP Error 503. The service is unavailable.
解决: 应用程序池启动32位应用程序 设置托管管道为集成 (仍然有问题) 试试以下方法: http://phpwind.me/1222.html 楼主 发表于: 2011-11-26 图片: ...
- event对象的属性
事件类型: bubbles:布尔值,表示事件是否通过DOM以冒泡形式触发. 事件发生时,反应当前环境信息的属性: button: 表示(如果有)鼠标所按下的按钮 ctrlKey: 布尔值,表示Ctrl ...
- java 中多线程和锁的使用
关键词: implements 实现 Runnable 类 run() 方法 注意点 : 创建类的实例 InterfaceController inter=new InterfaceContro ...
- sql 根据一个表更新 另一个表的例子及可能遇到的问题
例子: update a set a.name=b.name1 from a,b where a.id=b.id 例子延伸:更新的时候会把字符串 转为科学计数法 怎么办? 答:用 cast 转换一下 ...
- Java高效编程之一【创建和销毁对象】
一.考虑用静态工厂方法替代构造函数 代表实现:java.util.Collection Framework Boolean类的简单例子: public static Boolean valueOf ( ...
- PHP导出CSV文件
经常会碰到需要从数据库中导出数据到Excel文件,用一些开源的类库,比如PHPExcel,确实比较容易实现,但对大量数据的支持很不好,很容易到达PHP内存使用上限.这里的方法是利用fputcsv写CS ...