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节点,深度克隆,克隆节点以及节点下面的子内容。

 

 

相关文章
|
10天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
26天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
21 0
|
3天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
9 0
|
3天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
9 4
|
10天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
15天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
|
16天前
|
JavaScript 前端开发 开发者
DOM节点类型
DOM节点类型
|
17天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
17 4
N..
|
24天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
13 1
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
155 0