JS操作DOM节点大全

简介: 1.Javascript删除节点在Javascript中,只提供了一种删除节点的方法:removeChild()。removeChild() 方法用来删除父节点的一个子节点。语法:parent.removeChild(thisNode)例子1var list=document.

1.Javascript删除节点

在Javascript中,只提供了一种删除节点的方法:removeChild()。

removeChild() 方法用来删除父节点的一个子节点。

语法:parent.removeChild(thisNode)

例子1

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

 

例子2

var thisNode=document.getElementById("demo");

thisNode.parentNode.removeNode(thisNode);

 

2.Javascript创建节点

createElement()用来创建一个元素节点,即 nodeType=1 的节点。

语法:document.createElement(tagName)

其中,tagName 为HTML标签的名称,并将返回一个节点对象。

例如,创建<div>标签和<p>标签的语句如下:

var ele_div=document.createElement("div");

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

 

3.JavaScript:获取父节点

获取已知节点的父节点请使用 parentNode 。

语法:nodeObject.parentNode

其中,nodeObject 为节点对象(元素节点)。

例如,获取 id="demo"的节点的父节点:

document.getElementById("demo").parentNode;

 

4.Javascript插入节点

JavaScript insertBefore():插入子节点

insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点

语法:parentNode.insertBefore(newItem,existingItem);

newItem为待插入的节点,existingItem为已存在的节点

例如:移动某个列表项到另一个列表项:

var node=document.getElementById("myList2").lastChild;

var list=document.getElementById("myList1");

list.insertBefore(node,list.childNodes[0]);

 

5.JavaScript 添加最后一个子节点

appendChild() 方法向节点添加最后一个子节点。

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

语法:parentNode.appendChild(newListItem);

newListItem为待插入的节点

 

例如:转移某个列表项到另外一个列表项:

var node=document.getElementById("myList2").lastChild;

document.getElementById("myList1").appendChild(node);

 

6.Javascript获取子节点

语法:nodeObject.children

其中,nodeObject 为节点对象(元素节点),返回值为所有子节点的集合(数组)

例如,获取 id="demo" 的节点的所有子节点:

document.getElementById("demo").children;

 

7.Javascript获取兄弟节点

在Javascript中,通过 previousSibling 来获取上一个节点。

语法:nodeObject.previousSibling

其中,nodeObject 为节点对象(元素节点)。

实例

返回某节点之前紧跟的节点:

document.getElementById("item2").previousSibling;

 

8.Javascript 克隆(复制)节点

在JavaScript中,可以通过 cloneNode() 方法来克隆(复制)节点。

 

语法:nodeObject.cloneNode(boolean)

nodeObject 节点对象,即要克隆的节点

boolean  布尔值,是否完全克隆。

true:完全克隆。完全克隆一个节点,就是克隆它的一切,包括它的子节点,文本节点,凡是有的,一律克隆;

false:只克隆当前节点,不克隆任何子节点,也不克隆它所包裹的文本 。

实例:

var p = document.getElementsByTagName("p")[0]; 

var cP = p.cloneNode();//克隆p节点 

var cP = p.cloneNode(true);//克隆p节点,深度克隆,克隆节点以及节点下面的子内容。

 

 

相关文章
|
18天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
4天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
5天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
17天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
17天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
27天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
26天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
25天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
27天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
32 0
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树