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 ...
随机推荐
- wampserver环境下，apache本地下设置多个域名
Apache在安装之后默认只是指向一个站点,即127.0.0.1,如果要进行多站点的配置,需要更改一些配置. 步骤.方法: 1,)让Apache在启动时能加载虚拟主机模块. 打开Apache安装目录下 ...
- MVC 学习系列-Controller
MVC最核心的也就是Controller了,控制器(controller)在功能中起到了核心功能. 1,)在MVC类库中,根据URL,通过MVCHandler进入MVC处理系统中, 2,)解析初始化对 ...
- Orthomcl的详细使用
参考了众多文章并结合实际操作后的感想. 参考:http://www.plob.org/2013/09/18/6174.html 参考:http://www.plob.org/2012/06/12/22 ...
- Codeforce Round #210 Div2
A:对角线为k其他为0 B:利用两个相邻的数一定gcd为1和1与任何数gcd为1错k个位就行了 C:不会做操蛋,好像是因为上一层的始终小于下一层的 好吧C又研究了一下,是个贪心题,不符合的情况先科不考 ...
- .vimrc文件配置及航意
1. vimrc文件常见语句释义 设定 tab 的位置 :set tabstop=4 输入 tab 时自动将其转化为空格 :set expandtab ...
- Codeforces Round #312 (Div. 2) E. A Simple Task
题目大意就是给一个字符串,然后多个操作,每次操作可以把每一段区间的字符进行升序或者降序排序,问最终的字符串是多少. 一开始只考虑字符串中字符'a'的情况,假设操作区间[L,R]中有x个'a',那么一次 ...
- C#与js的各种交互
今天遇到一个问题,查到不错的资料,放上来记录一下,以防忘记地址,算是我的笔记吧! 很多人都向在服务器端调用客户端的函数来操作,也就是在asp中调用javascript脚本中已经定义好的脚本函数.经过研 ...
- 夺命雷公狗—angularjs—23—copy拷贝对象
copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...
- 夺命雷公狗—angularjs—21—解决angularjs压缩问题
我们在实际的开发中往往离不开js的代码压缩,因为这样可以减轻服务器的压力,是的的方法如下所示: <!DOCTYPE html> <html lang="en" n ...
- archlinux 网络配置
https://wiki.archlinux.org/index.php/Network_configuration_%28%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%2 ...