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只是学了一 ...
随机推荐
- java文件在没有安装jdk的windows下运行。
1.首先该工程最好是gui的,使用swing或者awt的都行. 2.使用eclipse打包jar文件. 项目名字上面点右键,选择Export,在选择java\JAR file. 选择src文件夹 ...
- C# dynamic json
对应普通对象,写个扩展方法,ToJson蛮方便. 但是 dynamic 类型就不行了,因为是运行时解析,只能转换为强类型 IDictionary<string, object> 才可以. ...
- PostgreSQL On Windows Process Connection Performance
本文主要对PostgreSql在Windows下的连接测试. 测试环境: Win7 x64, PostgreSql 10.1 x64 测试语言: VS2015 C# 因为Pg的数据库连接是开启进程来处 ...
- Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...
- Git - 远程库的创建与认证
前些日子因为某些原因,需要在windows上创建一个remote仓库. 由于实在是太麻烦而且时间紧急,就直接用了gitstack. 发现这个东西居然需要付费,未认证时只能创建两个用户. 其实对我而言足 ...
- 【转】百亿级实时大数据分析项目，为什么不用Hadoop？
百亿数量级的大数据项目,软硬件总体预算只有30万左右,需求是进行复杂分析查询,性能要求多数分析请求达到秒级响应. 遇到这样的项目需求,预算不多的情况,似乎只能考虑基于Hadoop来实施. ...
- 4、springboot之全局异常捕获
1.新建一个springboot项目 添加一个全局异常的类 import org.springframework.web.bind.annotation.ControllerAdvice; impor ...
- SQL SERVER 2012修改数据库名称（包括 db.mdf 名称的修改）
假设原来数据库名为db,附加数据库为db.mdf和db_log.ldf.需要改成dbt,及dbt.mdf和dbt_log.ldf. 步骤: .首先把原来的数据库进行备份(选择数据库->右键-&g ...
- jQuery阻止向上冒泡事件
//阻止起泡取消下面的注释 e.stopPropagation(); //或者使用这种方式 //return false; }); $('.three').click(function(e){ ale ...
- 日常捕获的野生知识 - javascript 与 类
javascript 并不提供类这样方便实用的面向对象类型,今天学习到了,直接上代码: <!DOCTYPE html> <html lang="en"> & ...