㈠HTML DOM - 修改
修改 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>
效果图:
②改变 HTML 样式
通过 HTML DOM,能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 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="skyblue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
效果图:
③创建新的 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
效果图:
㈡HTML DOM - 修改 HTML 内容
通过 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>
效果图:
⑵使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素"有事情发生"时,浏览器就会生成事件:
▪ 在元素上点击
▪ 加载页面
▪ 改变输入字段
★下面两个例子在按钮被点击时改变 <body> 元素的背景色:
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">
</body>
</html>
效果图:
示例2:在本例中,由函数执行相同的代码:
<!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>
效果图:
由: 变:
㈢HTML DOM - 元素
添加、删除和替换 HTML 元素。
⑴创建新的 HTML 元素 - createElement()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
效果图:
上面的实例解析:
▪ 这段代码创建了一个新的 <p> 元素:
▪ 如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
▪ 然后您必须向 <p> 元素追加文本节点:
▪ 最后,您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素:
▪ 这段代码向这个已存在的元素追加新元素:
⑵创建新的 HTML 元素 - insertBefore()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
</body>
</html>
效果图:
⑶删除已有的 HTML 元素
示例:如需删除 HTML 元素,必须清楚该元素的父元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
效果图:
上面实例解析:
▪ 这个 HTML 文档包含一个带有两个子节点(两个 <p> 元素)的 <div> 元素:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
▪ 查找 id="div1" 的元素:
var parent=document.getElementById("div1");
▪ 查找 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
▪ 从父元素中删除子元素:
parent.removeChild(child);
▪ 这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
⑷替换 HTML 元素
示例:需替换 HTML DOM 中的元素,使用 replaceChild() 方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("这是一个新的段落。"); para.appendChild(node); parent.replaceChild(para,child); </script> </body> </html>
效果图: