㈠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

DOM 修改与DOM元素的更多相关文章

  1. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  2. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  3. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  4. DOM 之 document 查找元素方法

    DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...

  5. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  6. DOM修改

    ㈠DOM标准 核心DOM:                                                                               HTML DOM ...

  7. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  8. DOM扩展：DOM API的进一步增强[总结篇-下]

    本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...

  9. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

随机推荐

  1. Jira和confluence备份

    参考: https://www.cnblogs.com/kevingrace/p/8862531.html JIRA备份和还原:  #Jira默认会打开自动备份的功能,备份路径为: /data/atl ...

  2. Git_基础命令

    gitinit//初始化一个Git仓库" role="presentation">gitinit//初始化一个Git仓库gitinit//初始化一个Git仓库 gi ...

  3. Springboot实现上传文件接口，使用python的requests进行组装报文上传文件的方法

    记录瞬间 近段时间使用Springboot实现了文件的上传服务,但是在使用python的requests进行post上传时,总是报错. 比如: 1.Current request is not a m ...

  4. redis 学习（9）-- redis 客户端 -- redis-py

    redis 客户端 -- redis-py 简介 关于 redis 的各种客户端,我们可以在官网上寻找并使用,比如我这里的 python 客户端,可以在官网上找到:redis-client . 获取 ...

  5. mybaits 在test判断数字，或者数字型字符串时注意事项

    1.在test中判断传入值为0的Integer或者Long时,mybaits会将其视为null 解决方法: 把Integer/Long改为String类型. status!=null and stat ...

  6. php运行结果设置无缓存

    修改配置php.ini vim /usr/local/php/lib/php.ini opcache.enable= 重启php服务 service php-fpm restart done! 参考地 ...

  7. spring boot本地开发与docker容器化部署的差异

    spring boot本地开发与docker容器化部署的差异: 1. 文件路径及文件名区别大小写: 本地开发环境为windows操作系统,是忽略大小写的,但容器中区分大小写 2. docker中的容器 ...

  8. C# 如何判断指定文件是否正被其它程序使用

    C# 如何判断指定文件是否正被其它程序使用 起因:项目中发现在操作文件时,系统经常抛出异常,表示文件正被其它程序占用. 需求:为了事先判断,以确认指定的文件是否正被其它程序使用,需要方法进行判断. 思 ...

  9. nginx反向代理实现后端web的读写分离

    1.环境 角色 ip 主机名 负载均衡节点 10.0.0.11 nginx-lb01 可读写web01节点 10.0.0.12 nginx-web01 只读web02节点 10.0.0.13 ngin ...

  10. 31C3 CTF web关writeup

    0x00 背景 31c3 CTF 还是很人性化的,比赛结束了之后还可以玩.看题解做出了当时不会做的题目,写了一个writeup. 英文的题解可以看这:https://github.com/ctfs/w ...