前言

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. htmlunit 自动化提交/获取网页数据，自动化测试

    开源组件: https://sourceforge.net/projects/htmlunit/ demo public void post() { try { WebClient client = ...

  2. play 学习 四： 关于play跨域

    默认, 在满足下面三个条件的情况下,Play框架会做一CSRF(跨站点请求伪造) 的检查: 请求方法不是GET, HEAD 或 OPTIONS. 情求包含Cookie或者Authorization头. ...

  3. C# Lambda快速深度拷贝

    背景:今天上班在班车上和一个同事讨论有关C#拷贝效率的问题,聊到了多种深度拷贝方法,其中就提到了一种Lambda表达式拷贝的方法,这位同事说这种深度拷贝快是快但是如果对象里面再嵌入对象就不能深度拷贝了 ...

  4. springmvc----demo2---a->b--bai

    1.jsp 2.jsp 3.jsp LianxiAction: package com.etc.controller; import javax.servlet.http.HttpSession; i ...

  5. Py修行路 Pandas 模块基本用法

    pandas 安装方法:pip3 install pandas pandas是一个强大的Python数据分析的工具包,它是基于NumPy构建的模块. pandas的主要功能: 具备对其功能的数据结构D ...

  6. 2015.3.5 VS2005调用VC6 dll 时结构参数的传递

    结构只能以地址方式进行传递,dll只能传递结构不能传递类 VS端: [DllImport(@"D:\程序\VC程序\MfcDllspace\Debug\space.dll")] p ...

  7. 12-18Windows窗体应用小程序之记事本(1)

    一.记事本制作(1) C#结合窗体制作小程序,相比较之前的控制台应用程序可能要改善了好多,最起码界面看起来可以高仿一下了,但是最重要的还是要看其里面的功能是否实现.所以,要以实现其实用功能为主.今天利 ...

  8. 12-01Js表单验证和JsWindow

    一.表单验证form 1.创建一个新的表单: <form id="id是唯一的,不可重复" name=“可重复”,method="post/get",ac ...

  9. ajax跨域请求-jsonp

    1. 同源策略 ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫“同源”或者“同域”呢?——协议.域名.端口号都必须相同 ...

  10. apache server和tomcat集群配置三：水平集群下的tomcat集群配置

    在jsp文件中加入以下代码,用来测试是否共享session: SessionID: <%= session.getId() %> 之前尝试在linux中,但是因为模拟环境是虚拟机,虚拟机只 ...