JS 的DOM 操作(Node节点获取及增删查改)

最新推荐文章于 2024-01-22 14:11:04 发布

unither

最新推荐文章于 2024-01-22 14:11:04 发布

阅读量475

点赞数 1

分类专栏： javascript 文章标签： js dom html5

本文链接：https://blog.youkuaiyun.com/qq_45324956/article/details/117338841

版权

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript中DOM操作的基本方法，包括使用getElementById、querySelector等选择器获取节点，以及appendChild、removeChild进行节点的增删，利用nextSibling和nextElementSibling查找相邻节点，以及setAttribute和removeAttribute修改节点属性。通过一个简单的练习题，展示了如何在不覆盖原有内容的情况下向网页追加新的DOM元素。

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

获取(太多了,有document.getElementById/ClassName/Name/TagName 等,或者 querySelector)

// example

// get Node

var element = document.querySelector('#test');

// 追加

element.appendChild(Node);

// 删除

element.removeChild(Node);

// 查找

element.nextSibling // 获取元素之后的兄弟节点 , 会拿到注释文本,空白符这些

element.nextElementSibling // 等同, 获取标签(不会拿到注释文本这些)

element.previousSibling // 和上面同理,往前找兄弟节点

element.previousElementSibling

// 改动,比如属性这些

element.setAttribute(name, value); // 增加属性

element.removeAttribute(attrName); //删除属性

// 来一个简易的练习题,随便一个网页追加插入一块DOM(非覆盖:不能 innerHTML);

/*

<div id="test">

<span>Hello, World</span>

</div>

*/

// 以上面的例子为例

var test = document.createElement('div'); // 创建一个块级元素

test.setAttribute("id","test"); // 设置其id 属性

var span = document.createElement('span'); // 创建一个 span

span.innerText = "Hello,world"; // 插入 span 的文本内容

test.appendChild(span); // 组合节点

element.appendChild(test); //追加到某个节点区域