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

目录(?)[+]


 #

1.DOM 方法

 #

一些 DOM 对象方法 #

这里提供一些您将在本教程中学到的常用方法：

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

 

2.DOM属性

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

 

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

 

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值
复制代码
<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>
复制代码

 #

nodeType 属性 #

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

 

 

3.DOM - 元素

 

创建新的 HTML 元素 - appendChild()

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

复制代码
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>
复制代码

例子解释 #

这段代码创建了一个新的 <p> 元素： 

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

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

var node=document.createTextNode("This is a new paragraph.");

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

para.appendChild(node);

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

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

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

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

element.appendChild(para);

 

创建新的 HTML 元素 - insertBefore() #

复制代码
语法
node.insertBefore(newnode,existingnode)

参数 #

参数 类型 描述
newnode Node 对象 必需。需要插入的节点对象。
existingnode Node object 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

返回值 #

类型 描述
Node 对象。 您插入的节点。
复制代码

 

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

实例 #

复制代码
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
复制代码

亲自试一试

 

删除已有的 HTML 元素  – removeChild( )#

定义和用法

removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

如需删除 HTML 元素，您必须清楚该元素的父元素：

实例 #

复制代码
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
复制代码

亲自试一试

例子解释 #

这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素： 

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

查找 id="div1" 的元素： 

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

查找 id="p1" 的 <p> 元素： 

var child=document.getElementById("p1");

从父元素中删除子元素： 

parent.removeChild(child);

提示：能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素： 

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

 

替换 HTML 元素 - replaceChild( )

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法： 

 
复制代码

node.replaceChild(newnode,oldnode)#

参数 #

参数 类型 描述
newnode Node object 必需。您希望插入的节点对象。
oldnode Node object 必需。您希望删除的节点对象。
复制代码
 

实例

复制代码
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
复制代码

亲自试一试

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/p/5006788.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(338)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2010-11-30 【1】CSS-块状元素与内联元素
2010-11-30 CSS页面模块的常用命名
2010-11-30 CSS【通用选择器】与【选择器的嵌套】
2010-11-30 学习CSS的背景图像属性background
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示
AI IDE Trae