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 ...
随机推荐
- python之django 资料
里边有不少比较好的文章. http://www.cnblogs.com/luxiaojun/p/5795070.html
- 1029-对c语言文法的理解
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
- data type Migration from MySQL to PostgreSQL
MySQL PostgreSQL tinyint smallint smallint smallint mediumint integ ...
- Leetcode: Rotate Function
Given an array of integers A and let n to be its length. Assume Bk to be an array obtained by rotati ...
- poj 1475 || zoj 249 Pushing Boxes
http://poj.org/problem?id=1475 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=249 Pushin ...
- cell点击按钮崩的一种情况
这个错误表示:该类方法没有addBtnClick对应的方法: bug的复现:创建一个cell,并且添加一个类方法来赋值,在方法中,给按钮添加一个点击事件(addBtnClick),但是,再实现这个方法 ...
- JetBrains公司介绍（Java、Python、PHP、Ruby、前端和代码测试与重构的IDE）
JetBrains JetBrains是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是Java编程语言开发撰写时所用的集成开 ...
- Java基础(51):Super与this的区别
1. 子类的构造函数如果要引用super的话,必须把super放在函数的首位. class Base { Base() { System.out.println("Base" ...
- vs2003打包
怎样将.Net程序部署到没有安装.Net Framwork的机器上? 部署在.Net 平台下开发的应用程序,需要安装安装对应版本的.Net Framwork,而Vsual Studio 2003并没有 ...
- 活动组件（五）：一个activity的例子
建立两个Activity,一个是NormalActivity,另一个是DialogActivity.首先建立这两个Activity的布局文件,如下图: 然后编写这连个Activity,如下: 接着对这 ...