DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Tue Jun 07 2016 13:42:28 GMT+0800 (CST)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>

<html>

<body>

<script>

document.write(Date());

</script>

</body>

</html>

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 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>

本例改变了 <h1> 元素的内容：

<!DOCTYPE html>

<html>

  <body>

    <h1 id="header">Old Header</h1>

    <script>

    var element=document.getElementById("header");

    element.innerHTML="New Header";

    </script>

  </body>

</html>

例子解释：

  • 上面的 HTML 文档含有 id="header" 的<h1>元素
  • 我们使用 HTML DOM 来获得 id="header" 的元素
  • JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

本例改变了 元素的 src 属性：

<!DOCTYPE html>

<html>

  <body>

    <img id="image" src="smiley.gif">

    <script>

    document.getElementById("image").src="landscape.jpg";

    </script>

  </body>

</html>

例子解释：

  • 上面的 HTML 文档含有 id="image" 的 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

DOM HTML的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. CODING 代码多仓库实践

    关于代码的管理问题已经讨论多年,随着企业业务的复杂度提高.软件行业技术栈的选择度变宽泛,现代软件的代码仓库也变得越来越庞大和复杂.一个中型项目,将测试代码.核心业务代码.编译构建.部署打包等基础设施的 ...

  2. 来来来，告诉你一个简单易上手的KPI打分的方子

    ▋1/3 前言 每个企业都要定期为员工的工作来进行考核,有月度考核.季度考核和年度考核. 这次月度考核,我打算用一种新的方式来执行. 我在我们研发小组内曾分享过能力-意愿四象限图.根据岗位技术能力和工 ...

  3. C# TreeView模糊查找节点

    List<TreeNode> listSearchTreeNodes; private void btn_Search_Click(object sender, EventArgs e) ...

  4. springboot中使用aop技术

    aop是面向切面编程的意思,它可以需要先选择一些切入点,然后对这些切入点进行拦截,注入统一的代码逻辑,这也是解耦的一种方式,也是为了避免重复的代码,让开发人员把关注点放在业务上. 引用包 'org.s ...

  5. 2.Ansible Playbook剧本

    1.playbook?playbook翻译过来就是"剧本",那playbook组成如下 play: 定义的是主机的角色 task: 定义的是具体执行的任务 playbook: 由一 ...

  6. JWT基础知识

    1> JWT定义 JSON Web Token (JWT) 是一种开放的行业标准(RFC 7519),用于安全传送认证信息. 是目前流行的跨域认证的解决方案. 2> JWT数据结构 由三部 ...

  7. AlertDialog创建对话框的测试

    AlertDialog的功能是非常强大的,它可以创建各种对话框,它的结构分为:图标区.标题区.内容区.按钮区共四个区域.以这样的思路区创建AlertDialog是非常简单的. 创建AlertDialo ...

  8. varnish实现缓存加速

    varnish实现缓存加速 一.采用varnish为nginx实现缓存加速1.实验环境:(1)一台varnish缓存服务器,一台nginx服务器(2)关闭防火墙和selinux2.配置varnish( ...

  9. js知识点面试题

    网上看到的一个题,在这里存一下 此为题目function Foo() { getName = function () { alert (1); }; return this; } Foo.getNam ...

  10. 《Web Development with Go》Mangodb查询collection内所有记录

    相当于select * from table; package main import ( "fmt" "log" "time" " ...