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下的i++问题
在解决一道面试题目时遇到问题. public class Inc { public static void main(String args[]){ Inc inc = new Inc(); int ...
Ubuntu apache
Linux系统为Ubuntu 1. 启动apache服务 # /etc/init.d/apache2 start 2. 重启apache服务 # /etc/init.d/apache2 restart ...
vue-cli中使用stylus
1.在package.json文件中写入依赖: "stylus-loader": "^2.5.0", "stylus": "0 ...
python-入门教程（操作mysql数据库）
pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x,而MySQLdb不支持3.x版本. 本文测试python版本:3.6. ...
在浏览器中输入URL并回车后都发生了什么？
1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...
git flow强制重新初始化
Gitflow工作流定义了一个围绕项目发布的严格分支模型. git flow初始化命令: git flow init 关于各个分支的命名一路回车就可以了,如果不小心修改了默认的分支命名,后来又觉得不爽 ...
python中的单例模式的应用
1 使用__new__方法 class Singleton(object): def __new__(cls, *args, **kw): if not hasattr(cls, ...
八、cent OS下tomcat启用APR并发模式
Tomcat支持三种接收请求的处理方式: BIO.NIO.APR ,本文记录tomcat配置APR模式,也是首选的模式.(Tomcat7 或以下,在 Linux 系统中默认使用BIO方式) 安装依赖库 ...
Spring Data JPA 缓存结合Ehcache介绍
一级缓存: 会话session.事务级别的,事务退出,缓存就失效了. 实体管理器在事务执行期间持有一份数据的拷贝,而非直接操作数据源. 二级缓存: 进程范围级或集群范围的缓存,这个级别的缓存可配置和修 ...
Linux基础之命令练习Day3-文件管理：cat，tar，gzip，vim，ln
一. 文件合并 cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1．命令格式: cat [ ...

HTML DOM 初学笔记