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 ...
随机推荐
- Groupon面经Prepare: Sort given a range && Summary: Bucket Sort
首先是如何sort一个只有0和1的数组,要求inplace. follow up是告诉一个range,如何在O(N)时间内sort好 两个pointer可解 package Sorting; impo ...
- C++之路进阶——codevs1036（商务旅行）
1036 商务旅行 题目描述 Description 某首都城市的商人要经常到各城镇去做生意,他们按自己的路线去做,目的是为了更好的节约时间. 假设有N个城镇,首都编号为1,商人从首都出发,其他各城镇 ...
- HDU 1724 Ellipse（数值积分の辛普森公式）
Problem Description Math is important!! Many students failed in 2+2’s mathematical test, so let's AC ...
- Mysql索引总结(二)
在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytable表: ) NOT NULL ); 在查找username="admin"的记录 SELECT * ...
- 夺命雷公狗—angularjs—4—继承和修正继承
angularjs 中也有继承的方法,废话不多说,看代码: <!doctype html> <html lang="en"> <head> &l ...
- 把Nodepad++添加进右键菜单
1.运行注册表编辑器:开始->运行->regedit 2.找到HKEY_CLASSES_ROOT/*/shell 3.右击shell,选择 新建->项 4.项的名字为Edit wit ...
- $.extend，$.fn.extend，$.fn的区别
jQuery.extend(object) 为jQuery类添加类方法,可以理解为添加静态方法.如: jQuery.extend({ min: function(a, b) { return a &l ...
- android——单点触控移动，多点触控放大缩小
xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- javascript 深拷贝
javascript存在两种拷贝:浅拷贝.深拷贝. 它们最大的区别在于引用类型的拷贝上:浅拷贝复制的是引用(指针),深拷贝复制的是里面的数据. 由于以上原因,在下例中 浅拷贝修改的值影响了声明的对象a ...
- 视频处理控件TVideoGrabber中如何混合多个视频源（2）
在前面的<视频处理控件TVideoGrabber混合多个视频源(1)>一文中,已经对TVideoGrabber中混合视频源做了一些内容的说明,本文将继续前文: >>>TV ...