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 MySQL的root无法登录数据库ERROR 1045 (28000)

    Linux环境下,脚本自动安装完数据库,命令行用mysql -uroot -ppasswaord 登录却报了这么个错: ERROR 1045 (28000): Access denied for us ...

  2. React路由基本的使用（一）

    路由的基本使用 下载 npm i -D react-router react-router-dom APP.js ps==>NavLink 选中的时候 可以高亮 demo 是你自己添加的一个类哈 ...

  3. jQuery-验证码倒计时的实现

    点击发送验证码,通常需要加入倒计时功能,HTML如下: <center class='block captchaArea'> <input class="input pwd ...

  4. C# ThreadPool 线程池

    Thread与ThreadPool Thread: .NetFramework1.0  对线程对象的一个封装 Thread方法很多很强大,但是太过强大,而且没有限制 功能繁多,反而用不好--就像给4岁 ...

  5. Python——面向对象(类)的基础疑难点

    相信用Python写def函数大家都信手拈来了,但Python作为面向对象的编程语言,怎么能浪费呢? 那问题来了.什么是类呢?什么是实例?什么是对象?方法是什么??属性又是什么???继承?封装?多态? ...

  6. 关于独显A卡利用率一直是0不运行的问题

    情况: 独显一直是0,玩游戏时核显,也就是GPU-0快满了GPU-1也是0,跟没有一样,怀疑自己买电脑的时候是不是被骗了. 在高级电源选项中,有个可切换动态显卡->全局设置的选项,设置成最大化性 ...

  7. Spring Boot Request method DELETE not supported

    1: 开启HiddenHttpMethodFilter 最新版本的spring boot 默认不开启 restful 分割api @Bean @ConditionalOnMissingBean({Hi ...

  8. soapUI 之 测试文件上传 [6]

    在接口测试中会遇到需要上传文件的操作,比如头像修改等.那么soapui是怎么实现这部分测试的呢.以下以文件上传接口为例. 一.获取文件上传接口 可以通过开发直接提供的接口文档,或者自己抓包获取接口信息 ...

  9. sklearn集成支持向量机svm.SVC参数说明

    经常用到sklearn中的SVC函数,这里把文档中的参数翻译了一些,以备不时之需. 本身这个函数也是基于libsvm实现的,所以在参数设置上有很多相似的地方.(PS: libsvm中的二次规划问题的解 ...

  10. pycharm查看函数用法，参数信息的设置方法

    在编写python程序时,常常会遇到一些不太常见的函数,有时候又不想去百度,那么,使用pycharm设置快速显示函数的参数和用法,这个方法十分快捷方便. step1. file -> setti ...