前言

JavaScript这门语言在一定程度上让我们html之间耦合度降低了，为什么这样说呢？JavaScript语言一样可以可以随意写入html页面一些东西，比如：JavaScript的DOM可以改变html的输出、内容、属性，下面通过几个例子加以说明。

内容

DOM改变 HTML输出

语法：

<script>

document.write();

</script>

例子：（输出时间）

<!DOCTYPE html>

<html>

<body>

<script>

document.write("zhoulitong");

</script>

</body>

</html>

DOM改变 HTML内容

语法：

document.getElementById(id).innerHTML=new HTML

例子：（改变标题内容）

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello JavaScript!</p>

<script>

document.getElementById("p1").innerHTML="YES!";

</script>

<p>宝宝刚才的内容被残忍的修改了···</p>

</body>

</html>

DOM改变 HTML属性

语法：

document.getElementById(id).attribute=new value

例子：（点击按钮改变图片属性）

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>

<html>

<body>

<img id="img" src="/i/shanghai_lupu_bridge.jpg" />

<button type="button" onclick="myfunction()" >点我

</button>

<script>

function myfunction()

{

document.getElementById("img").src="/i/eg_tulip.jpg";

}

</script>

</body>

</html></span>

JavaScript之DOM HTML的更多相关文章

  1. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  2. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  3. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  4. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  5. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  6. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  7. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  8. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  10. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

随机推荐

  1. Angular学习笔记-问题列表（2016.4.7）

    1.控制器中注入服务时,出问题,当前pageInit这个页面无法加载,页面无报错信息. var homepage = angular.module('homepage'); homepage.cont ...

  2. PostgreSQL recovery.conf恢复配置

    PostgreSQL recovery.conf恢复配置 这一章描述recovery.conf 文件中可用的设置.它们只应用于恢复期.对于你希望执行的任意后续恢复, 它们必须被重置.一旦恢复已经开始, ...

  3. Oracle RMAN 学习：恢复

    Oracle RMAN 学习:恢复 6 rman恢复 Rman中的恢复对应restore,recover Restore,数据修复,利用备份集的数据文件来替换已损坏的数据文件或将其恢复到另外一个位置, ...

  4. Redis 复制技术和高可用sentinel（哨兵模式）

    redis的复制技术和高可用(哨兵模式) 1 复制 为什么要复制 实现数据的多副本存储,从而可以实现服务的高可用 提供更好的读性能复制技术的关键点及难点 如何指定被复制对象 增量还是全量以及如何实现增 ...

  5. SUSE eth0 No such device

    删除 etc/udev/rules.d/70-persistent-net.rules 文件  之后重启让系统重新生成eth0配置文件 rm -f etc/udev/rules.d/70-persis ...

  6. UML在需求分析阶段的应用

    转自:https://www.cnblogs.com/fuhaots2009/p/3430666.html 上一篇博客写了uml在软件开发过程中的应用,这以篇要详细介绍一下UML在需求分析过程中的应用 ...

  7. 【知识碎片】Net项目经验积累

    后台传JSON到js报错 MVC控制器传json到前端JS"变为" 导致JS报错 重点是一定要在@ViewBag.typeJson两边加双引号,并且后台用 编码前台解码 ViewB ...

  8. css垂直居中方法（二）

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

  9. 认识RESTFul

    背景1. 概念提出者:Fielding2. 全写:Representational State Transfer,(资源的)表现层状态转化?3. http://www.ruanyifeng.com/b ...

  10. jQuery-图片的放大镜显示效果(不需要大小图)

    问题:当页面高度很大时,放大图片的图层不会跟随着 1.demo.html ;display:none;}          #tip s   {position:absolute;top:40px;l ...