<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. Kubernetes报错Failed to get system container stats for "/system.slice/kubelet.service"

    tail -f /var/log/message Nov 14 07:12:51 image kubelet: E1114 07:12:51.627782    3007 summary.go:92] ...

  2. linux删除文件夹下除了某一个文件之外的所有文件及find用法

    原文: https://www.jb51.net/article/99319.htm 比如一个目录下有1,2,3,4,5这五个文件,现在我需要删除除了2以外的所有文件,那么我可以使用 find . ! ...

  3. mongodb json序列化时间格式

    利用bson解决 type error 报错问题. # 序列化 from bson import json_util import json aa = json.dumps(anObject, def ...

  4. sas 经验小结（1）

    1.重要的事情说三遍:在SAS中,对数据集操作要在OPTIONS中使用Compress=yes 能有效的降低文件的大小. 在SAS运行LOG中,可以看如下提示: NOTE: 压缩的数据集 T.PHON ...

  5. servlet的执行过程简介（从tomcat服务器和web应用的角度）

    该链接详解htttp请求和响应 http://www.cnblogs.com/goxcheer/p/8424175.html 1.web应用工程发布到tomcat服务器 2.客户端访问某个web资源, ...

  6. cocos源码分析--用Sprite加载自定义着色器

    本文写一个使用动态更新属性变量的自定义着色器.在这个例子中,小图标的位置根据手指的触摸而移动,以屏幕重点为参照物,屏幕中向下的部分根据手指的点击乘以一个绿色的颜色值,向上的部分乘以一个红色的颜色值. ...

  7. hbase启动后子节点的regionserver不能启动

    启动hbase后,主节点的进程正常,但是子节点的regionserver进程会自动挂掉 然后我们看看子节点的情况 可以看到挂掉了 我们这样解决问题,先把hadoop目录下的这个两个文件放到hbase的 ...

  8. CS229 7.1应用机器学习中的一些技巧

    本文所讲述的是怎么样去在实践中更好的应用机器学习算法,比如如下经验风险最小化问题: 当求解最优的  后,发现他的预测误差非常之大,接下来如何处理来使得当前的误差尽可能的小呢?这里给出以下几个选项,下面 ...

  9. Android Activity传递数据使用getIntent()接收不到，揭秘Intent传递数据与Activity启动模式singleTask的关系。

    activity通过intent传递数据的时候,如果activity未启动,那么在这个刚启动的activity里通过getIntent()会获取到这个intent的数据.. 如果要启动的activit ...

  10. 【Selenium-WebDriver自学】WebDriver交互代码（十一）

    ==================================================================================================== ...