通过HTML DOM,JavaScript可以访问HTML文档中的每一个元素。
改变HTML内容
改变元素内容最简单的方法就是使用innerHtml属性。
下面的例子更改< p>元素的HTML内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>段落通过脚本来修改内容。</p>
</body>
</html>
innerHTML属性设置或者返回表格行的开始和结束标签之间的HTML内容。
具体语法如下:
HTMLElementObject.innerHTML=text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function changeLink(){
document.getElementById('myAnchor').innerHTML="Baidu";
document.getElementById('myAnchor').href="//www.baidu.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="//www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="修改链接">
</body>
</html>
注意:用
document.getElementById("demo").innerHTML
输出时,当 + 两边的数据类型都为 Number,则这个 + 是一个运算符。
document.getElementById("demo").innerHTML = 1 + 9 + 8; // 输出为 18
但是如果+
两边的数据类型不同,则该运算符类似语句的和的意思:
document.getElementById("demo").innerHTML = 1 + 9 + "onlyA" + 8; // 输出 10onlyA8。
改变HTML样式
给出如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
使用事件
当HTML DOM元素有事情发生时,浏览器就会生成该事件:
- 元素上点击。
- 加载页面。
- 改变输入字段。
给出如下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">
</body>
</html>
也可以由函数实现执行相同的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
</body>
</html>
也可以实现点击< p>标签的元素的文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
<input type="button" onclick="ChangeText()" value="修改文本" />
</body>
</html>