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. Oracle 12c心得

    1.重新启动Listener后,远程客户端登录不了,只能全新启动Oralce服务才能正常,经分析,用Net Manager增加一个服务器的IP地址的监听. 执行 net start 监听服务名 再远程 ...

  2. 我该不该学习C语言

    这几天把c语言过了一遍,基本上算是入门了,常用语法.函数的使用.c语言是比较古老的语言了,很多系统的底层.工业控制软件都是使用C语言编写,过一遍之后觉得c语言屹立不倒是有原因.c程序员有一句话:使用c ...

  3. HDU 5701 ——中位数计数——————【思维题】

    中位数计数 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  4. 架构实战项目心得（十一）：基于spring-security-oauth2的mysql数据表设计

    一.建立数据库及数据表结构 CREATE SCHEMA IF NOT EXISTS `oauth2` DEFAULT CHARACTER SET utf8 ; USE `oauth2` ; -- -- ...

  5. 微软的TransactionScope类是个好玩意

    最近发现微软自带的TransactionScope(.Net Framework 2之后)是个好东东,提供的功能也很强大. 首先说说TransactionScope是什么,并能为我们做什么事情.其实看 ...

  6. Javascript与jQuery方法的隐藏与显示

    如题,代码奉上. <html> <head> <title>denotoggle</title> <style> #box { width: ...

  7. Java API 之 Properties 类

    1.简介 在项目中我们经常看到一种格式极其干净的配置文件,如:config.properties.在Java的体系结构中也提供了API对properties文件进行读取和写入等操作,即:Propert ...

  8. Open Live Writer 安装和博客账号配置

    打开Open Live Writer就像您的博客的Word一样.打开Live Writer是一个功能强大,轻量级的博客编辑器,允许您创建博客文章,添加照片和视频,然后发布到您的网站. Open Liv ...

  9. log4j的简单使用

    引入jar包org.apache.log4j.Logger,项目src目录下建立一个log4j.properties配置文件 log4j.rootLogger=INFO,A1,R log4j.appe ...

  10. TCP基础知识（三）重传、流量控制、拥塞控制

    TCP详解(3):重传.流量控制.拥塞控制…… 数据传输 在TCP的数据传送状态,很多重要的机制保证了TCP的可靠性和强壮性.它们包括:使用序号,对收到的TCP报文段进行排序以及检测重复的数据:使用校 ...