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 元素的样式,请使用这个语法 ...
随机推荐
- Python类(五)-反射
反射即通过字符串映射或修改程序运行时的状态.属性.方法 有4个方法: hasattr(): hasattr(object,string):object为实例化的对象,string为字符串 判断对象ob ...
- FireMoneky 菜单
FireMoneky 菜单 TPopup是容器,里边摆放一排button也可. TPopup + ListBox 也可以用弹出窗体实现,form上放一排按钮,功效类似,但是form在fmx下不能半屏显 ...
- 部署和调优 1.8 samba 部署和优化-2
Samba 可以实现 Linux 和 Windows 机器相互共享文件,这对我们来说是非常实用的.下面做几个实践,来了解samba,注意:在实践之前,请先检测 Selinux 是否关闭,否则可能会实践 ...
- eclipse中的TODO和FIXME
最近使用eclipse开发代码时,公司要求按他们制定代码规范编写代码,其他都还好,因为基本都养成良好习惯了,但TODO和FIXME就有点陌生,查了一下资料,发现笔者寡闻了,果然学海无涯,好了,下边解释 ...
- Decorator模式 装饰器模式
Android 使用了装饰器模式 1. 概述 若你从事过面向对象开发,实现给一个类或对象增加行为,使用继承机制,这是所有面向对象语言的一个基本特性.如果已经存在的一个类缺少某些方法,或者须要给方法添加 ...
- java中的字符，字节和编码
1. 编码问题的由来,相关概念的理解 1.1 字符与编码的发展 从计算机对多国语言的支持角度看,大致可以分为三个阶段: 系统内码 说明 系统 阶段一 ASCII 计算机刚开始只支持英语,其它语言不 ...
- day70-oracle 12-触发器
查询是没有触发器的.trigger是一个数据库的对象.PL/SQL程序是在我插入之前执行还是在插入之后执行?触发器类似于java中的监听器. 监听插入操作,执行一段PLSQL程序. 禁止在非工作时间插 ...
- Linux 下安装redis
记录一下linux下的安装步骤,还是比较复杂的 1. 下载redis-2.8.19.tar.gz: ftp传到linux01上: 解压: tar –zxvf redis-2.8.19.tar.gz 2 ...
- ES02 变量、数组、对象、方法
1 变量 1.1 变量的声明 利用var关键字来声明变量,例如: var a = 100; <!DOCTYPE html> <html> <head> <me ...
- 算法Sedgewick第四版-第1章基础-016一list
import java.util.Iterator; import java.util.NoSuchElementException; public class List<Item> im ...