前言

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. POJ2230(打印欧拉回路)

    Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 7473   Accepted: 3270   Specia ...

  2. Spring Boot发布和调用RESTful web service

    Spring Boot可以非常简单的发布和调用RESTful web service,下面参考官方指导体验一下 1.首先访问 http://start.spring.io/ 生成Spring Boot ...

  3. mysql高可用集群——MHA架构

    目录1.下载2.搭建mha 2.1 系统配置 2.2 架构 2.3 添加ssh公钥信任 2.4 安装mha节点 2.5 manager配置文件 2.6 检查 2.7 启动manager进程 2.8 碰 ...

  4. vector向量容器元素排序与查找

    1.利用标准库函数sort()对vector进行排序 参考源码: #include <algorithm> #include <vector> vector<int> ...

  5. 重新认识synchronized（上）

    synchronized在JDK5之前一直被称为重量级锁,是一个较为鸡肋的设计,而在JDK6对synchronized内在机制进行了大量显著的优化,加入了CAS,轻量级锁和偏向锁的功能,性能上已经跟R ...

  6. 2014.12.22 几个有用的oracle正则表达式

    SELECT REGEXP_REPLACE('LSS12345', '[^0-9]') FROM DUAL 结果:12345 '[^0-9]'中的^表示‘非’上述表达式的含义是“将LSS12345中的 ...

  7. 第八章 JVM内存管理（待续）

    物理内存与虚拟内存 内核空间与用户空间 在Java中哪些组件需要使用内存 JVM内存结构 JVM内存分配策略 JVM内存回收策略 内存问题分析

  8. 问题：oracle case when；结果：Oracle CASE WHEN 用法介绍

    Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ...

  9. 【Android 多媒体应用】使用MediaCodec解码使用SurfaceView显示视频

    1.MainActivity.java import android.app.Activity; import android.os.Bundle; import android.os.Environ ...

  10. Android CTS(frome google)

    Compatibility Test Suite How does the CTS work? The Compatibility Test Suite (CTS) is a free, commer ...