HTML DOM 初学笔记
JavaScript HTML DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树，如图：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
- 通过id查找HTML元素。用方法：document.getElementById(id_name);
- 通过标签名查找HTML元素。用方法：getElementsByTagName(tag_name);
- 通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。这里暂不讨论
DOM 改变 HTML 输出流
<!DOCTYPE html>
<html>
<body> <script>
document.write(Date()); //绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
</script> </body>
</html>
改变 HTML 内容
语句：document.getElementById(id).innerHTML=new HTML
<html>
<body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> </body>
</html>
改变 HTML 属性
<!DOCTYPE html>
<html>
<body> <img id="image" src="smiley.gif"> <script>
document.getElementById("image").src="landscape.jpg";
</script> </body>
</html>
改变 HTML 样式
语句： document.getElementById(id).style.property=new style
<!DOCTYPE html>
<html>
<body> <h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button> </body>
</html>
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
点击文本内容改变文本：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
点击按键改变文本内容：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
点击按键文本内容：
<html>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
给按钮定义一个事件：
<html>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
鼠标在文本上，不在文本上，鼠标点击，鼠标起来。
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<div onmousedown="mOver(this)" onmouseup="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
} function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
创建新的 HTML 元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有的 HTML 元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
HTML DOM 初学笔记的更多相关文章
- C++ STL初学笔记
C++ STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...
- Spring 初学笔记
Spring 初学笔记: https://blog.csdn.net/weixin_35909255/article/category/7470388
- laravel 5.6初学笔记
laravel 5.6初学笔记 http://note.youdao.com/noteshare?id=bf4b701b49dd035564e7145ba2d978b4 框架简介 laravel文档齐 ...
- csapp网络编程初学笔记
csapp网络编程初学笔记 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型,服务器管理某种资源,并且通过操作来为它的客户提供某种服务 客户端-服务器模型中的基本操作是transacti ...
- Python初学笔记之字符串
一.字符串的定义 字符串是就一堆字符,可以使用""(双引号).''(单引号)来创建. 1 one_str = "定义字符串" 字符串内容中包含引号时,可以使用转 ...
- python 初学笔记 （一）
初学python第一天,希望自己真正了解计算机语言,并且做出成效. 写下学习笔记,记录学习进度,娱乐学习,不断成长. python详细介绍: python是什么?运用到哪里?有哪些在使用它? pyth ...
- 从Python到Go：初学笔记
本文记录了我在学习Go的过程时的一些笔记,主要是比较Python和Go之间的差异并作简单描述,以此使Python程序员对Go语言的特性有简略的了解.初学难免有纰漏,欢迎各位批评指正补充交流,谢谢. 数 ...
- 【爬虫】Python2 爬虫初学笔记
爬虫,个人理解就是:利用模拟“操作浏览器”的过程,自动获取我们想要的数据(或者说信息,比如图片啊) 为何要学爬虫:爬取数据,为我所用(相当于可以把一类数据整合起来) 一.简单静态网页爬虫架构: 1.B ...
- Dom学习笔记
今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...
随机推荐
- [tools]转载汇总
1. 发送请求工具—Advanced REST Client Advanced REST Client是Chrome浏览器下的一个插件,通过它可以发送http.https.WebSocket请求.
- Linux文件上传下载sz 和 rz 命令
windows系统和linux系统之间文件上传和下载用到 rz 和 sz 命令.rz: 上传文件sz:下载文件 先检查是否安装rz,sz模块 安装rz,sz 模块yum search sz安装yum ...
- deblurGAN
-- main.py -- util.py -- data_loader.py -- mode.py -- DeblurGAN.py -- vgg19.py -- layer.py -- vgg19. ...
- JRebel - 给IDE安装JRebel插件
JRebel对于很多人来说已经并不陌生了,一搜一大把. 用过JRebel后发现,这对于Java开发简直不可缺少. 尽管其价格有点春节国庆期间的各种交通费用——打劫! 即使如此也出现了有"分享 ...
- winform多线程调用控件
对多线程操作控件的理解: 控件不能被非创造他的线程修改.需调用控件.beginvoke,注入UI线程.控件.beginvoke会把操作加入UI线程,阻塞画面响应.不要把耗时的计算放在控件.beginv ...
- 05_zookeeper的ACL
[ACL概述] ACL:access control Lists,权限控制. * 针对节点可以设置相关的读写等权限,目的是为了保障数据安全性. * 权限permissions可以指定不同的权限范围以及 ...
- C# GDI+ 利用 Rectangle GraphicsPath 判断 矩形或多边形 图形关系
最近在做一些简单的图像对比工作,总结了一些GDI+对象的使用方式,记录下来共享给大家使用. 判断Rectangl与多边形的关系 /// <summary> /// 是否包含输入范围 /// ...
- [PE格式分析] 2.IMAGE_DOS_HEADER
typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // Magic number 固定为"MZ" ...
- [英中双语] Pragmatic Software Development Tips 务实的软件开发提示
Pragmatic Software Development Tips务实的软件开发提示 Care About Your Craft Why spend your life developing so ...
- 线程间协作：wait、notify、notifyAll
线程间协作:wait.notify.notifyAll 在 Java 中,可以通过配合调用 Object 对象的 wait() 方法和 notify()方法或 notifyAll() 方法来实现线程间 ...