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 ...
随机推荐
- 1.Spring Web MVC有什么
Spring Web MVC使用了MVC架构模式的思想,将web层进行职责解耦. 同样也是基于请求驱动的,也就是使用请求-响应模型.它主要包含如下组件: DispatcherServlet :前端控制 ...
- Spring shiro使用
maven依赖: <dependency> <groupId>commons-collections</groupId> <artifactId>com ...
- Leetcode: Strobogrammatic Number III
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...
- editPlus修改默认的文件编码
- springday04-go1
springmvc02:1.创建项目,导入jar包 2.复制xml文件到src下 3.在web.xml中配置DispatcherServlet(代码一致) <?xml version=" ...
- mac tomcat
alampsdeMacBook-Pro:bin alamps$ ./startup.sh Using CATALINA_BASE: /Users/alamps/Library/apache-tomca ...
- PHP XDEBUG
PHP调试时,不得不提XDEBUG这个调试利器.学习PHP以来,几乎所有的问题我都利用它来解决. 首先关于如何安装,不在赘述,请自行google之.(需要特别注意的是:PHP5.2 和5.3 ,关于加 ...
- (转)VS2008连接TFS 2010
偶尔还是会用到,老是忘记安装的顺序,在这儿mark一下. 用VS2008连接TFS 2010, 需要按照以下顺序安装一下组件: .VS2008 Team Explorer 2008 3.Install ...
- 项目中的一个JQuery ajax实现案例
/** * brief 这些代码用于在线制图中 attention author <list of authors> <date> begin modify by * nu ...
- webssh software
shellinabox是由Markus Gutschke开发的一款自由开源的基于Web的Ajax的终端模拟器.它使用AJAX技术,通过Web浏览器提供了类似原生的 Shell 的外观和感受. yum ...