JavaScript中对DOM对象进行操作

最新推荐文章于 2025-07-07 19:35:11 发布

落花流水6

最新推荐文章于 2025-07-07 19:35:11 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/hero_cheng/article/details/54020465

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了DOM对象的概念及其在HTML文档中的应用，包括如何通过不同方法访问、修改和操作DOM节点，以及如何添加、删除DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是DOM对象

DOM对象是文档对象模型，是基于浏览器编程一套API接口，通过它，我们可以访问HTML文档对象属性、方法、事件，还可以对其进行操作。

二、DOM节点树

在HTML中所有的事物都有节点，DOM将HTML文档视作节点树，通过DOM，节点树中的是所有节点都可以通过JavaScript进行访问，所有的HTML元素都可以被修改、创建、删除。

三、DOM对象方法

1.访问DOM中的元素，主要通过getElementById(),getElementsByTagName(),getElementsByClassName()方法获取，如下：

创建文本框：

UserName：<input type="text" name="uname" class="u">

通过js获取文本框内容：

/通过id获取文本框内容
document.getElementById("name").value;
//通过标签名文本框内容
document.getElementsByTagName("input")[0].value;
//通过name获取文本框内容
document.getElementsByName("uname")[0].value;
//通过class获取文本框内容
document.getElementsByClassName("u")[0].value

2.给DOM中元素添加属性

创建文本框：

<input type="text" name="uname" class="u">

通过js代码给input元素添加id属性

document.getElementsByTagName("input")[0].id="name";

3.在DOM元素中插入内容

div：

<div id="context">Hello,2017</div>

在js中使用innerHTML属性插入内容，使用getAttribute()获取标签中的属性值

//将内容插入到指定的元素中并替换元素中已有的内容
document.getElementById("context").innerHTML="节日快乐";

//获取元素中属性值
document.getElementById("context").getAttribute("id");

4.在DOM中添加、删除元素

div:

<div id="context">
   <font color="red">Hello,2017</font>
</div>

1)在js中使用appendChild()在dom中追加元素

//DOM中创建button新元素
var btn=document.createElement("button");
//文本内容
var Context=document.createTextNode("摆渡人，你值得看！");
//将内容追加到button标签中
btn.appendChild(Context);
//在html中指定的元素中追加新元素
document.getElementById("div1").appendChild(btn);

2)在js中使用removeChild()在dom中删除元素

 //获取父节点
var pare=document.getElementById("context");
//获取子节点
var p=document.getElementsByTagName("font")[0];
//删除父节点下面的子节点，如果不获取父节点直接来删除子节点就无法删除
pare.removeChild(p)