HTML DOM--元素

最新推荐文章于 2021-10-12 15:29:23 发布
最新推荐文章于 2021-10-12 15:29:23 发布
阅读量204 收藏
点赞数
分类专栏： HTML DOM 文章标签： HTML DOM 元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80279721
版权

创建新的 HTML 元素--createElement()

如需向HTML DOM添加元素，您首先必须创建该元素，然后把它追加到已有的元素上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.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 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.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.yuque.com/docs/share/52bd5ac2-ee7d-4293-9070-4c74ccdf98d4

冷月醉雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom-to-pdf:为HTML DOM元素提供优化的PDF输出
03-13
总结来说，DOM-to-PDF是一个基于JavaScript的解决方案，用于将HTML页面或元素转换为PDF，它利用HTML2Canvas和jsPDF的技术实现这一目标。虽然存在图像质量损失的问题，但仍然是将网页内容导出为PDF的理想选择，尤其...
JavaScript 给HTML DOM 添加新元素
AirZilong的博客
12-26 2695
学习RN之前，对JS的储备知识：给HTML DOM 添加新元素，所以要添加标签，记录学习过程 这是一个段落。 这是另一个段落。 var para=document.createElement("p"); var node=document.createTextNode("添加一个airzilong"); para.appendChild(node); var element=d
HTML DOM元素
Charles的博客
10-12 180
HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。 HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。 getElementById() 方法 getElementById() 方法返回带有指定 ID 的元素： 实例 var element=document.getElementById("intro"); 一些常用的 HTML DOM 方法： getElementById(id) - 获取带有指定 id 的节点（元素） appendChild(node) - 插
JavaScript的Polymer框架中dom-repeat与VM的相关操作
10-23
本文主要介绍在Polymer框架中如何使用dom-repeat指令来重复DOM中的元素，并且介绍了与ViewModel（VM）相关的一些操作。 首先，dom-repeat是一个基于template标签的指令，用于在DOM中重复显示数据集。在Polymer中，...
dom-align:灵活地对齐DOM节点
04-29
对齐灵活地将源html元素与目标html元素对齐。截屏安装特征支持IE9 + Chrome Firefox浏览器支持对齐点和偏移支持根据可见区域自动调整在线演示用法import domAlign from 'dom-align' ;// use domAlign// sourceNode's...
jsdom-devtools-formatter:使jsdom元素看起来像Chrome Devtools控制台中的真实DOM元素
05-17
…让我们像检查它们一样，将它们视作真正HTML元素： 典型的用例是一些在Node.js环境中利用脚本/测试，例如 。 如何使用 npm install jsdom-devtools-formatter // in some file.js const jsdomDevtoolsFormatter...
038HTML-DOM对象.doc
01-07
HTML DOM（Document Object Model）是用于处理HTML和XML文档的标准编程接口。DOM将网页解析成一个结构化的对象树，使得我们可以使用JavaScript或其他脚本语言来动态地操纵网页内容。在这个文档中，主要讨论了HTML ...
HTML DOM 导航
冷月醉雪的博客
05-16 1670
HTML DOM 节点列表    getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World!
HTML DOM 节点
冷月醉雪的博客
05-15 1315
   在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。 DOM 节点    根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：   ·整个文档是一个文档节点   ·每个 HTML 元素是元素节点   ·HTML 元素内的文本是文本节点   ·每个 HTML 属性是属性节点   ·注释是注释节点 HTML DOM 节点树    H...
HTML DOM 修改 HTML 内容
冷月醉雪的博客
05-15 530
改变HTML 内容    改变元素内容的最简单的方法是使用 innerHTML 属性。    下面的例子更改 &lt;p&gt;元素的HTML 内容： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &
HTML DOM 参考手册
冷月醉雪的博客
05-16 406
HTML DOM 参考手册 参考手册描述了 HTML DOM 的属性和方法，并提供在线实例。 HTML Document HTML Element HTML Attributes HTML Events HTML DOM 元素对象参考手册 参考手册描述了每个对象的属性和方法，并提供了在线实例。 Anchor 对象 Area 对象 Base 对象 Body 对象 Button ...
Document 对象
冷月醉雪的博客
05-16 285
使用document.write()输出文本 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;/head&gt; &lt;body
HTML DOM 简介
冷月醉雪的博客
05-14 233
什么是DOM     DOM 是 W3C（万维网联盟）的标准。     DOM 定义了访问 HTML 和 XML 文档的标准：     "W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"     W3C DOM 标准被分为 3 个不同的部分：         核心 DOM - 针对任何结构化文档的标准模型      ...
HTML DOM - 修改
冷月醉雪的博客
05-15 216
   修改 HTML == 修改元素、属性、样式和事件 修改HTML元素    修改 HTML DOM 意味着许多不同的方面：    ·改变 HTML 内容；    ·改变 CSS 样式；    ·改变 HTML 属性；    ·创建新的 HTML 元素    ·删除已有的 HTML 元素；    ·改变事件(处理程序)   创建 HTML 内容    改变元素内容的最简单的...
HTML DOM 属性
冷月醉雪的博客
05-15 213
属性是节点(HTML 元素)的值，您能够获取或设置。 编程接口 可通过 JavaScript (以及其他编程语言)对HTML DOM进行访问。 所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。 方法是您能够执行的动作(比如添加或修改元素) 属性是您能够获取或设置的值(比如节点的名称或内容)。 innerHTML 属性 获取元素内容的最简单方法是使用 innerHT...
HTML DOM 方法
冷月醉雪的博客
05-15 185
   HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。    HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。   编程接口    可通过 JavaScript (以及其他编程语言) 对HTML DOM进行访问。    所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性。    方法是您能够执行的动作(比如添加或修改元素)  ...
HTML DOM 访问
冷月醉雪的博客
05-15 183
访问 HTML 元素(节点)     访问 HTML 元素 等同于访问节点     您能够以不同的方式来访问HTML元素：     ·通过使用getElementById()方法；     ·通过使用getElementsByTagName()方法；     ·通过使用getElementsByClassName()方法；   getElementById()方法    getEl...
HTML DOM 事件
冷月醉雪的博客
05-16 153
对事件反应    当事件发生时，可以执行 JavaScript，比如用户点击一个 HTML 元素时。    如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：   onclick=JavaScript    HTML 事件的例子：      当用户点击鼠标时；当网页已加载时；      当图片已加载时；当鼠标移动到元素上时；      ...
DOM-XSS漏洞挖掘与攻击面全面解析
DOM-XSS挖掘与利用的关键在于识别和利用那些设计上可能允许用户输入并被浏览器解析的HTML元素。常见的DOM-XSS漏洞位置包括： 1. URL代入页面: 在页面加载时，某些用户输入字段可能导致URL被恶意注入，如搜索框、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值