Javascript可以通过操作HTML DOM来创建动态的HTML。
- Javascript可以改变页面中的所有HTML的元素和其属性
- Javascript可以改变页面中的所有CSS样式
- Javascript可以对页面中的所有事件做出反应
1、Javascript 通过操作HTML DOM 改变 HTML元素的内容。
1)改变HTML 的输出流。
在Javascript中,document.write()可用于直接向HTML中的输出流写内容。
<script>
document.write(Date()); <!--直接在HTML中输出时间-->
</script>
2)改变HTML的内容。
修改 HTML 内容的最简单的方法是使用innerHTML 属性。
<p id="info">bbbbbbeautiful!</p> <!--本应该直接输出其中的文本内容-->
<script>
document.getElementById("info").innerHTML="hhhhhhandsome!";
</script>
<!--这个时候就只会输出hhhhhhandsome!,标签的内容被修改-->
<!--模板:-->
document.getElementById(id).innerHTML="(新的内容)";
2、Javascript 通过操作HTML DOM 改变 HTML的样式(改变CSS)
1)改变HTML样式。
<p id="info1">bbbbbbeautiful!</p>
<p id="info2">bbbbbbeautiful!</p>
<script>
document.getElementById("info2").style.color="red";
document.getElementById("info2").style.fontSize="larger";<!--第二个字母大写-->
</script>
<!--模板:-->
document.getElementById(id).style.property="新的样式"
2)HTML DOM 允许我们通过触发事件来执行代码。
<p id="info">bbbbbbbeautiful!</p>
<button type="button" onclick="document.getElementById('info').style.color='red'">
点击一下</button>
<!--当用双引号括起来后,里面原来的双引号就得变成单引号-->
3、Javascript通过操作HTML DOM来对HTML 事件作出反应。
1)如果需要在点击某个元素的时候执行代码,就向一个HTML属性中添加Javascript的代码。
<p onclick="this.innerHTML='HHHHHandsome!'">点我看我属性</p>
如何让它连续点击?
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>连续点击</title>
<script>
var i=0;
function change(){
x=document.getElementById("info");
if(i==0)x.innerHTML="我想和你结婚";
else if(i==1) x.innerHTML="做炽热的亲吻";
else if(i==2) x.innerHTML="我想和你在这";
else if(i==3) x.innerHTML="开始私定终身";
else if(i==4) x.innerHTML="香槟塔前";
else if(i==5) x.innerHTML="许下的心愿";
i++;
}
</script>
</head>
<body>
<button onclick="change()">啦啦啦!</button>
<p id="info"></p>
</body>
</html>
这是通过button按钮来控制,当然也可以直接对标签进行控制。
<script>
var i=0;
function change(id){
if(i==0)id.innerHTML="我想和你结婚";
else if(i==1) id.innerHTML="做炽热的亲吻";
else if(i==2) id.innerHTML="我想和你在这";
else if(i==3) id.innerHTML="开始私定终身";
else if(i==4) id.innerHTML="香槟塔前";
else if(i==5) id.innerHTML="许下的心愿";
i++;
}
</script>
<p onclick="change(this)">啦啦啦!</p>
以上是直接点击文本来变化。