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. plpgsql insert 性能 测试

    有时需要执行一些sql脚本,带逻辑控制语句,又不想用高级语言C#.Java之类的,可以直接用plpgsql,类似于Oracle的plsql. do language 'plpgsql' $$ decl ...

  2. poj 2392 建塔（多重背包+不定上界）

    http://blog.csdn.net/libin56842/article/details/9492351 这次比较理解那个!dp[j]是为了什么,因为是滚动数组,没有这个的话used那边会出问题 ...

  3. Windows安装配置xampp

    建议大家直接看原文 1.安装XAMPP 进入https://www.apachefriends.org/zh_cn/index.html页面下载XAMPP 2 3.打开xampp控制版 4.修改apa ...

  4. FLASK实现上传下载功能

    #!-*-coding=utf-8-*- # from flask import Flask # # app = Flask(__name__) # # # @app.route('/') # def ...

  5. 高德地图 API JavaScript API

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm12.aspx ...

  6. javascript刷新页面的集中办法

    1. history.go(0) 2. location.reload() 3. location=location 4. location.assign(location) 5. document. ...

  7. winform判断chrome是否正在最前端运行

    /// <summary> /// 获取系统当前活动窗口 /// </summary> /// <returns></returns> [DllImpo ...

  8. c# json数组动态字段名

    根据给定的列名动态生成json数组 List<string> cols = new List<string>() { "姓名","性别" ...

  9. VMWARE错误-"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常

    异常信息:"VirtualInfrastructure.Utils.ClientsXml"的类型初始值设定项引发异常. 解决方案:以管理员的身份运行客户程序

  10. Java中的深拷贝和浅拷贝（转载）

    深拷贝(深复制)和浅拷贝(浅复制)是两个比较通用的概念,尤其在C++语言中,若不弄懂,则会在delete的时候出问题,但是我们在这幸好用的是Java.虽然java自动管理对象的回收,但对于深拷贝(深复 ...