JavaScript之DOM HTML
前言
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的更多相关文章
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
随机推荐
- 分治思想的应用：C++实现快速排序和随机化的快速排序
分治思想的应用:C++实现快速排序和随机化的快速排序 原创 2014年09月08日 14:04:49 标签: 快速排序 / 随机化快速排序 / 排序算法 / 数据结构 947 1. 快速排序时冒泡排序 ...
- C Primer Plus学习笔记（七）- 字符输入/输出和输入验证
单字符 I/O:getchar() 和 putchar() getchar() 和 putchar() 每次只处理一个字符 getchar() 和 putchar() 都不是真正的函数,它们被定义为供 ...
- DataGridView风格设置
http://blog.csdn.net/wangzhen209/article/details/51744518 http://www.cnblogs.com/hanpanpan
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 如何选择RDBMS关系型数据库和Nosql非关系型数据库？
RDBMS关系型数据库和Nosql非关系型数据库区别: 一.RDBMS是关系型数据库模式: 1.二维模式,由行列组成. 2.非常强调事务原子性,例如用户提出一个请求,DB完整的去执行,如果报错就全部回 ...
- Python_pip_01_pip的相关操作
>Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...
- Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目
搭建angular开发环境 一.下载并安装node 官网地址:点击前往 二.利用npm安装cnpm 安装好node后就可以使用npm命令啦 查看版本:npm -v 安装cnpm:npm install ...
- Django框架 之 模板语言
Django框架 之 模板语言 浏览目录 标签 过滤器 一.标签 Tags 1.普通变量 普通变量用{{ }} 变量名由数字.字母.下划线组成 点.在模板语言中用来获取对象相应的属性值 示例: 1 2 ...
- Netty中的Future
先看下Future的整个继承体系,还有一个ChannelFuture不在里面: 在并发编程中,我们通常会用到一组非阻塞的模型:Promise,Future 和 Callback.其中的 Fut ...
- 高效配置Linux代理服务器 Squid介绍
作为一种免费的网络操作系统,Linux越来越受到广大网络爱好者的欢迎,目前Internet上运行的主机有相当一部分采用的就是Linux,而且中国已经把Linux作为政府上网的指定网络操作系统.种种迹象 ...