JavaScript DOM——修改 HTML 内容

通过HTML DOM,JavaScript可以访问HTML文档中的每一个元素。

修改HTML元素内容

  • 改变HTML内容
  • 改变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>

你可能感兴趣的:(前端HTMLCss,JavaScript,javascript,html,前端)