码迷,mamicode.com
首页 > Web开发 > 详细

HTML DOM 的相关知识Ⅱ

时间:2019-08-28 22:42:46      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:tran   alt   修改   查找   remove   fonts   input   访问   知识   

㈠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> 元素:

var para=document.createElement("p");

? 如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:

var node=document.createTextNode("这是一个新段落。");

? 然后您必须向 <p> 元素追加文本节点:

para.appendChild(node);

? 最后,您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素:

var element=document.getElementById("div1");

? 这段代码向这个已存在的元素追加新元素:

element.appendChild(para);

 

⑵创建新的 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>

 

效果图:

技术图片

 

参考:https://www.runoob.com

HTML DOM 的相关知识Ⅱ

标签:tran   alt   修改   查找   remove   fonts   input   访问   知识   

原文地址:https://www.cnblogs.com/shihaiying/p/11426245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!