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. Linux下的密码破解

    密码散列: 密码散列的$6 表示是:SHA512 这里我们使用hashcat 工具进行破解 ╰─ hashcat -m 1800 hash.txt /usr/share/wordlists/rocky ...

  2. iOS底层实现原理【高级进阶】

    想要进阶,想要提升自己一个更高档次,想要拥有更高比格的iOS开发攻城狮们,请关注 ↓↓↓ 我的简书:https://www.jianshu.com/u/3adf2f8593b8 我的掘金:https: ...

  3. [CodeForces - 1225C]p-binary 【数论】【二进制】

    [CodeForces - 1225C]p-binary [数论][二进制] 标签: 题解 codeforces题解 数论 题目描述 Time limit 2000 ms Memory limit 5 ...

  4. 从无到有通过IDEA搭建SpringBoot项目

    本人第一次写博客希望记录当下,努力成为IT界中的清流,写的不好多多包涵. SpringBoot是由Pivotal团队在2013年开始研发.2014年4月发布第一个版本的全新开源的轻量级框架.它基于Sp ...

  5. java中线程的几种实现方式

    1. 继承Thread类来实现 class MyThread extends Thread{ @Override public void run() { System.out.println(&quo ...

  6. Java开发之使用websocket实现web客户端与服务器之间的实时通讯

    使用websocket实现web客户端与服务器之间的实时通讯.以下是个简单的demo. 前端页面 <%@ page language="java" contentType=& ...

  7. Docker异常：/lib/x86_64-linux-gnu/libnss_files.so.2: symbol __libc_readline_unlocked, version GLIBC_PRIVATE not defined in file libc.so.6 with link time reference

    当使用docker cp 将容器内数据拷贝至主机时,或是使用docker export 命令归档容器文件时,出现下述异常: Error response from daemon: error proc ...

  8. WebShell代码分析溯源(九)

    WebShell代码分析溯源(九) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];$arr = array($_POST['pass'] => '|.*|e', ...

  9. typeORM 多对多关系不同情况的处理

    本文以RBAC权限管理中的用户和角色举例,两个实体存在多对多的关系,一个用户拥有多个角色,一个角色属于多个用户.typeorm的中文文档没有对自定义中间表的说明,发现英文有相关说明,但示例代码貌似有问 ...

  10. Create a Report in Visual Studio 在Visual Studio中创建报表

    In this lesson, you will learn how to create reports in the integrated reporting system. This system ...