前言

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. Qt多选框

    1.获取并显示复选框文本内容 ui->label->setText(ui->comboBox->currentText());

  2. Redis codis 搭建测试

    codis Codis 是一个分布式 Redis 解决方案, 对于上层的应用来说, 连接到 Codis Proxy 和连接原生的 Redis Server 没有明显的区别,有部分命令支持 Codis ...

  3. SignalR推送服务在Android的实现 SignalA

    SignalA是老外写的用于实现.net端推送消息至安卓端的实现,支持版本为android 2.3或以上,由于我的版本最低是2.2,所以只有把源码下下来自己改,如果你觉得太多了可自己编译成jar引用, ...

  4. [机器学习基础]矩阵基础和numpy

    矩阵定义:[摘自百度百科] 由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵,简称m × n矩阵.记作: 这m×n 个数称为矩阵A的元素,简称为元,数aij位于矩阵A的第i行第j列,称 ...

  5. AngularJS分层开发

    为了AngularJS的代码利于维护和复用,利用MVC的模式将代码分离,提高程序的灵活性及可维护性. 1,前端基础层 var app=angular.module('appName',['pagina ...

  6. day35-hibernate映射 04-Hibernate的一级缓存：一级缓存的存在

    数据源:文件和数据库.从内存中获取,不用去数据库发送SQL语句查询了.缓存技术是hibernate的一个优化的手段.Session结束了,一级缓存就没了,就销毁了.SeesionFactory没了,二 ...

  7. linux 监控内存介绍

    一:系统监控:1.对cpu的监测:查看进程占用内存情况 top pid user PRI NI size RSS share stat 进程号 进程所属用户 优先级 优先级 进程所占空间 使用物理内存 ...

  8. winform 对话框控件

    ColorDialog 可以调节颜色的控件,如果给一个按钮点击事件 ColorDialog.showdialog();就会弹出这个 返回值是个枚举类 然后定义一个这个类的变量 接收一下它的返回值 Di ...

  9. java的邮件系统实现

    想要java中邮件发送和接收邮件,首先需要支持SMTP- pop/pop3/IMAP协议,发送的话还需要配置文件,来对程序提供相应的接口,只需要这两个文件,就可以实现邮件的接收发送, 协议为jar包封 ...

  10. 创建Mat对象

    Mat 是一个非常优秀的图像类,它同时也是一个通用的矩阵类,可以用来创建和操作多维矩阵.有多种方法创建一个 Mat 对象. 1.构造函数方法 下面是一个使用构造函数创建对象的例子. 常用的构造函数 2 ...