<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

<script>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph.</p>");

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<h1>我的第一段JavaScript</h1>

<p>

JavaScript 能够对事件作出反应。比如对按钮的点击：

</p>

<button type="button" onclick="alert('hello world!')">点击这里</button>

</body>

</html>
<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body><h1>我的第二段 JavaScript</h1>

<p id="demo">JavaScript能改变html的内容</p>

<script>

function myFunction()

{x=document.getElementById("demo");//找到元素

 x.innerHTML="hello javascript";//改变内容

 }
//document.getElementById("demo").innerHTML="hello javascript";
; </script> 

<button type="button" onclick="myFunction()">点击这里</button>

 </body>

 </html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<script>

function changeimage()

{element=document.getElementById("myimage")

if(element.src.match("W020140820293362535623"))//匹配

{

    element.src="素材/fad4e632d27affc7d69ccf49bf08cf79.jpg";

}

else

{

element.src="素材/W020140820293362535623.jpg";

}

    }

    </script>

    <img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">

    <p>点击图片更改图片</p>

    <p>javascript能改变任意html元素的大多数属性，而不仅仅是图片</p>

</body>

</html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<h1>我的第三段 JavaScript</h1>

<script>

function myFunction()

{x=document.getElementById("demo") // 找到元素

if(x.style.color="#0C3")

{x.style.color="#03C";

    }

    else

    {

        x.style.color="#0C3";}        // 改变样式

    }

    </script>

    <p id="demo" onclick="myFunction()"  style="color:#0C3">

JavaScript 能改变 HTML 元素的样式。

</p>

<button type="button" onclick="myFunction()">点击这里</button>

<p>怎么不行呢？</p>

</body>

</html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">

<script type="text/javascript" src="myjavascript/改变图片.js"></script>
<p>调用外部JavaScript</p>
<p><b>提示：</b>外部脚本不能包含 <script> 标签。</p>
<p><b>注释：</b>changeimage保存在名为 "改变图片.js" 的外部文件中。</p>

</body>

</html>

JSdom操作内容，样式，属性的更多相关文章

  1. Jquery中animate可以操作css样式属性总结

    可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...

  2. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  3. jQuery-操作元素的内容，属性，样式

    1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...

  4. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

  5. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  6. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  7. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. PHP Jquery 代码操作 内容 属性 样式 事件 Json数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

随机推荐

  1. IntelliJ IDEA 2018破解方法

    1.下载idea:https://download.jetbrains.8686c.com/idea/ideaIU-2018.2.exe 2.安装idea 3.下载破解补丁:http://idea.l ...

  2. 数据仓库与ODS

    1. 引言 本篇主要讲述操作数据存储(ODS)系统产生的背景.定义.特点,以及它与数据仓库的区别.在前两篇,笔者介绍了什么是数据仓库?为什么需要数据仓库?数据仓库系统的体系结构是什么?因此可能在读者心 ...

  3. SCCM 2012 R2实战系列之八：OSD（上）--分发全新Windows7系统

    今天将跟大家一起分享SCCM 中最为重要的一个功能---操作系统分发(OSD),在此文章中会讨论到OSD的初始化配置.镜像的导入.任务序列的创建编辑.并解决大家经常遇到的分发windows7系统分区盘 ...

  4. Javascript-string-Array

    1.得到数组里重复的值 function getRepeat(ar){ //数组排序 var ary = ar.sort(); //创建装重复值的新数组 var newArr = new Array( ...

  5. CentOS7 安装kylin2.6.0集群

    1. 环境准备 zookeeper3.4.12 mysql5.7 hive2.3.4 hadoop2.7.3 JDK1.8 hbase1.3.3 2. 集群规划 ip地址 机器名 角色 192.168 ...

  6. C++ Templates编程(模板参数）

    //file max.hpp template <typename T> //template<class T> inline T const& max (T cons ...

  7. hbase 核心知识

    Hbase 负载均衡 Hbase全局计划 Hbase全局计划执行的流程--估算 Hbase随机分配计划 Hbase 批量启动分配计划 Hbase 通过shell控制负载均衡 何时使用HBase

  8. CentOS7.4安装部署openstack [Liberty版] （二）

    继上一篇博客CentOS7.4安装部署openstack [Liberty版] (一),本篇继续讲述后续部分的内容 一.添加块设备存储服务 1.服务简述: OpenStack块存储服务为实例提供块存储 ...

  9. 修改之前某次commit日志和内容

    如果需要撤销最近一次提交的代码 已经commit,没有submit状态:可以使用git reset --hard HEAD^ 比如之前已经提交了五个patch,但是需要修改第三个. 第一步: 将修改的 ...

  10. linux下mysql-5.6忘记root密码，重置root密码详细过程

      在linux平台下使用mysql过程中忘记了root密码,对于运维和DBA来讲都是一件头疼的事情,下面来讲解下怎么进行重置mysql数据库root 密码: 1.首先停止mysql服务进程: 1 s ...