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 初学笔记的更多相关文章

  1. C++ STL初学笔记

    C++  STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...

  2. Spring 初学笔记

    Spring 初学笔记: https://blog.csdn.net/weixin_35909255/article/category/7470388

  3. laravel 5.6初学笔记

    laravel 5.6初学笔记 http://note.youdao.com/noteshare?id=bf4b701b49dd035564e7145ba2d978b4 框架简介 laravel文档齐 ...

  4. csapp网络编程初学笔记

    csapp网络编程初学笔记 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型,服务器管理某种资源,并且通过操作来为它的客户提供某种服务 客户端-服务器模型中的基本操作是transacti ...

  5. Python初学笔记之字符串

    一.字符串的定义 字符串是就一堆字符,可以使用""(双引号).''(单引号)来创建. 1 one_str = "定义字符串" 字符串内容中包含引号时,可以使用转 ...

  6. python 初学笔记 （一）

    初学python第一天,希望自己真正了解计算机语言,并且做出成效. 写下学习笔记,记录学习进度,娱乐学习,不断成长. python详细介绍: python是什么?运用到哪里?有哪些在使用它? pyth ...

  7. 从Python到Go：初学笔记

    本文记录了我在学习Go的过程时的一些笔记,主要是比较Python和Go之间的差异并作简单描述,以此使Python程序员对Go语言的特性有简略的了解.初学难免有纰漏,欢迎各位批评指正补充交流,谢谢. 数 ...

  8. 【爬虫】Python2 爬虫初学笔记

    爬虫,个人理解就是:利用模拟“操作浏览器”的过程,自动获取我们想要的数据(或者说信息,比如图片啊) 为何要学爬虫:爬取数据,为我所用(相当于可以把一类数据整合起来) 一.简单静态网页爬虫架构: 1.B ...

  9. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

随机推荐

  1. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  2. 「Sdchr 的邀请赛」题解

    骗个访问量.. A:取石子 将点 x 与点 x / prime 连边,那么这个图可以由指数之和的奇偶性来划分成一个二分图. 接下来考虑推广阶梯 NIM (或者这原本就是阶梯 NIM ?),必胜当且仅当 ...

  3. [转]象棋AI算法（一）

    本文转自:http://blog.csdn.net/u012723995/article/details/47133693 参考文献:http://www.xqbase.com/computer/se ...

  4. Messenger和MVVM中的View Services

    在前面的文章IoC容器和MVVM中, 介绍了IoC容器如何在大量用户类中帮助创建和分配用户类的实例.本文将介绍IoC容器如何帮助应用程序解耦,比如那些根据MVVM模式开发的应用.此模 式广泛应用在基于 ...

  5. 清除SQL Server内存

    数据库进行查询时,会缓存结果集,当查询结果过大时会出现内存爆满的情况,如果手动清除SQL所占用的内存呢,在网上搜索一下,把结果贴下面: --强制释放内存 Create procedure [dbo]. ...

  6. java设计模式-观察者模式学习

    最近学习了设计模式中的观察者模式,在这里记录下学习成果. 观察者模式,个人理解:就是一个一对多模型,一个主体做了事情,其余多个主体都可以观察到.只不过这个主体可以决定谁去观察他,以及做什么事情可以给别 ...

  7. PAT 1071. Speech Patterns

    又是考输入输出 #include <cstdio> #include <cstdlib> #include <string> #include <vector ...

  8. 移动web开发都会遇到的坑（会持续更新）

    1.自适应第一招 <meta name="viewport" content="width=device-width,initial-scale=1.0,user- ...

  9. Tjoi2016&Heoi2016 字符串

    传送门 另一个传送门 终于把心头大恨切掉了……后缀自动机大法好,从此抛弃后缀数组哈哈……(说的跟你会写后缀数组似的 好像网上的题解大多都是后缀数组?看了看表示理解不能,那我这份后缀自动机的题解就写详细 ...

  10. react 使用fortawesome字体图标

    fontawesome 官方使用教程=>点我 npm i --save @fortawesome/fontawesome-svg-core@prerelease \ npm i --save @ ...