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

 

 

相关文章
|
3天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件&quot;books.xml&quot;,然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
6天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
13 0
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,允许遍历和处理节点。例如,加载&quot;books.xml&quot;到`xmlDoc`,通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点,然后使用循环输出每个&lt;title&gt;元素的文本内容。
|
2天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
3天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
4天前
|
XML Web App开发 JavaScript
XML DOM - 导航节点
在XML DOM中,导航节点涉及利用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling属性来遍历节点树。不同浏览器对空文本节点处理不一致,可能导致导航问题。为解决此问题,可以使用get_nextSibling函数,它检查并跳过非元素类型的空文本节点,确保在IE和Firefox等浏览器中得到一致的结果。该函数循环遍历直到找到下一个元素节点。
|
5天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
该示例展示了如何遍历XML文档的节点树。通过DOMParser解析XML字符串得到xmlDoc,然后遍历根节点的子节点,显示每个节点的名称及其文本值。输出结果为:&quot;title: Everyday Italian&quot;, &quot;author: Giada De Laurentiis&quot;, &quot;year: 2005&quot;。代码使用JavaScript实现,循环遍历并更新HTML元素`&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;`的内容。
|
5天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`方法获取&quot;category&quot;属性的值并显示属性数量。输出为&quot;cooking&quot;和&quot;1&quot;。
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0