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. VS 同词高亮显示

    Visual Studio 2010 选中高亮插件 - Highlight all occurrences of selected word Highlight all occurrences of ...

  2. mysql-elastic search canal

    背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增量变更,不过从2010年开始,阿里系公司开始逐步的尝 ...

  3. MVVMLight - IOC Containers and MVVM

    在面向对象编程的早期,开发者要面对在应用程序或者类库中创建或检索类的实例的问题.针对这个问题有很多的解决方案.在过去几年中,依赖注入(DI)和控制反转(IoC)在开发者中很流行,并且取代了老的方案,比 ...

  4. .net托管资源与非托管资源

    在项目当中用到的资源分为托管资源和非托管资源,托管资源无非就是什么int.string.datatime之类,托管资源不需要人为去管理,.net framework中有专门针对托管资源的管理机制(GC ...

  5. java 散列运算浅分析 hash()

            文章部分代码图片和总结来自参考资料 哈希和常用的方法 散列,从中文字面意思就很好理解了,分散排列,我们知道数组地址空间连续,查找快,增删慢,而链表,查找慢,增删快,两者结合起来形成散列 ...

  6. 3、springboot之热部署

    我用的是idea 一.开启idea自动make功能 1.CTRL + SHIFT + A --> 查找make project automatically --> 选中 2.CTRL + ...

  7. mysql通过一张表更新另一张表

    在mysql中,通过一张表的列修改另一张关联表中的内容: 1:  修改1列 update student s, city c set s.city_name = c.name where s.city ...

  8. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  9. 项目经验:GIS<MapWinGIS>建模第五天

    实现连能性的分析,及分析完成后,针对独立的块区域进行管网的修补工作 实现步骤如下图所示:

  10. KNN 与 K - Means 算法比较

    KNN K-Means 1.分类算法 聚类算法 2.监督学习 非监督学习 3.数据类型:喂给它的数据集是带label的数据,已经是完全正确的数据 喂给它的数据集是无label的数据,是杂乱无章的,经过 ...