JavaScript DOM——修改 HTML 内容

最新推荐文章于 2022-11-03 13:04:27 发布

mac_05185

最新推荐文章于 2022-11-03 13:04:27 发布

阅读量638

点赞数

分类专栏：前端HTMLCss JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_42544728/article/details/127029425

版权

前端HTMLCss 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

通过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>