DOM 修改与DOM元素
㈠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>
效果图:
DOM 修改与DOM元素的更多相关文章
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- DOM 之 document 查找元素方法
DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- DOM修改
㈠DOM标准 核心DOM: HTML DOM ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- DOM扩展:DOM API的进一步增强[总结篇-下]
本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
随机推荐
- Elasticsearch集群基本操作
检查集群的命令 $ curl http://172.16.101.55:9200/_cat =^.^= /_cat/allocation /_cat/shards /_cat/shards/{inde ...
- JavaScript Let 和 Const
来源:菜鸟教程:https://www.runoob.com/js/js-let-const.html JavaScript let 和 const ECMAScript 2015(ECMAScrip ...
- 109、Secret的使用场景 (Swarm16)
参考https://www.cnblogs.com/CloudMan6/p/8082429.html 我们可以用secret管理任何敏感数据.这些敏感数据是容器在运行时需要的.同时我们又不想把这些 ...
- 用js方式取得接口里面json数据的key和value值
大家在实际操作中难免遇到对接口的问题,想必对一些小白来说取得里面想要是数据也是很是头疼,那么接下来我会结合接口实际情况教大家怎么取得里面相应的数据 接口数据例如:(数据为 模拟数据,json格式) { ...
- k-means 非监督学习聚类算法
非监督学习 非监督学习没有历史样本数据和标签,直接对数据分析或得结果. k-means 使用 >>> from sklearn.cluster import KMeans >& ...
- 能ping通某网页,但无法访问网页的处理
cmd----->netsh winsock reset 用以重置Winsock目录,是网络环境初始化,解决一些奇怪的问题
- ISO/IEC 15444-12 MP4 封装格式标准摘录 2
目录 Track Media Structure Media Box Media Header Box Handler Reference Box Media Information Box Medi ...
- CentOS 7 安装 gcc 4.1.2
CentOS 7 安装 gcc 4.1.2 0. 参考 在centOS7.2上编译gcc4.1.2 1. 安装了编译所需 yum groupinstall "Development Tool ...
- 浅析Java泛型
什么是泛型? 泛型是JDK 1.5的一项新特性,它的本质是参数化类型(Parameterized Type)的应用,也就是说所操作的数据类型被指定为一个参数,在用到的时候在指定具体的类型.这种参数类型 ...
- Linux umask 档案预设权限/touch 建立空档案或修档案件时间
1 建立档案时,权限一般设为-rw-r--r-- 2 建立目录时,权限一般设为drwxr-xr-x 3 touch 选项与参数 -a : 仅修订access time -c :仅修改档案的时间,若该 ...