<div id="div1" style="height:100px;width:300px;border:1px solid black;">测试
<p>wjy</p>
</div>
parentNode--removeChild常被用来改变文档的结构
firstChild lastChild-.nodeValue访问某个元素的文本
var node = document.getElementsByTagName("div")[0];
//alert(node.innerHTML);
while (node.firstChild) { //循环输出子节点,没有第一个子节点时退出循环
var n = node.firstChild; //获取div第一个子节点
alert("第一个节点是:"+n.nodeValue);
n.parentNode.removeChild(n); //获取对应父节点并且删除他的子节点
alert("删除后"+n.nodeValue);
}
alert(node.nodeValue);//输出undefined
扩展:同样的道理,通过 jQuery也可以轻松地删除已有的 HTML 元素。
这里有两个jQuery 方法:
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
$("#div1").remove();
//将div节点删除,页面什么都不显示
$("#div1").empty();
//将div的子元素 测试 p 全部删除
分享到:
相关推荐
总的来说,2010版的"DOM文档对象模型"手册是Web开发者的宝贵资源,它详尽地解释了DOM的各个方面,无论你是新手还是经验丰富的开发者,都能从中受益匪浅。通过深入理解和熟练运用DOM,你可以更好地构建动态、交互性强...
**DOM文档对象模型** DOM(Document Object Model)是W3C组织制定的一种标准,它提供了一种结构化的表示XML或HTML文档的方式,并定义了访问和操作这些文档的标准接口。DOM模型将网页内容视为一个树形结构,每个节点...
通过深入学习并实践DOM文档对象中文手册中的内容,开发者可以更好地掌握网页动态交互的能力,实现诸如动态加载数据、响应用户操作、以及创建复杂的前端应用等功能。DOM是现代Web开发不可或缺的一部分,对于提升网页...
- **删除节点(Removing Nodes)** - `removeChild()`方法用于删除指定的子节点。 - **查找节点(Finding Nodes)** - `getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法用于根据ID...
- `removeChild`:删除已存在的子节点。 - `getAttribute`和`setAttribute`:读取或设置元素的属性值。 - `getElementsByTagName`:根据标签名查找所有匹配的元素。 - `getElementById`:根据ID查找唯一的元素。...
- 整个文档是一个文档节点(也称为根节点)。 - 每个标签是一个元素节点。 - 包含在标签中的文本是文本节点。 - 标签的每个属性是一个属性节点。 - 注释是注释节点。 #### DOM 接口及其属性和方法 DOM 把文档模拟...
- **删除节点**: `removeChild()`方法移除指定的子节点。 - **修改节点**: `nodeValue`属性可改变文本节点的值,`setAttribute()`和`removeAttribute()`用于修改或移除元素的属性。 3. **事件处理** - **事件...
DOM定义了一种树型结构来表示文档,每个部分都是一个节点,如元素、属性、文本等。在这个树中,每个节点都有其特定的关系和属性。 1. **DOM树中的元素节点** 在DOM树中,每个元素都是一个节点。例如,在描述中提到...
- 添加、删除和修改元素:Element对象提供了addElement、removeChild和setText等方法来实现这些操作。 - 查询元素:XPath API允许通过表达式快速找到文档中的特定元素,如`/root/element[@attr='value']`。 - ...
- `removeChild(childNode)`: 删除某个子节点。 - `replaceChild(newNode, oldNode)`: 替换某个子节点为新的节点。 4. 获取和设置节点属性: - `getAttribute(name)`: 获取指定元素上的指定属性值。 - `...
- `removeChild(node)`:从父节点中删除指定的子节点。 3. **属性和文本操作**: - `innerHTML`:获取或设置元素的HTML内容。 - `innerText` / `textContent`:获取或设置元素的纯文本内容。 - `getAttribute...
在本文中,我们将深入探讨XML文档对象模型(DOM)中的删除节点操作,这是XML应用开发中的一个重要技能。DOM允许我们以编程方式操作XML文档,包括添加、修改和删除节点。以下将详细介绍如何删除元素节点和属性节点。 ...
DOM 访问、创建、删除、修改文档节点及属性方法 DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,允许开发者使用脚本语言(如 JavaScript)来访问和操作文档的结构和内容。在这里,我们将详细介绍 DOM...
- 文档节点:整个文档的顶级节点。 4. **选择和访问节点** - `getElementById()`:根据ID获取唯一元素。 - `getElementsByClassName()`和`getElementsByTagName()`:分别通过类名和标签名获取元素集合。 - `...
- **用途**:作为 XML 文档操作的起点,包含其他所有节点,并提供了创建和操作这些节点的方法。 - **关键方法**: - `createAttribute(String)`:使用给定的名字创建一个 `Attr` 对象。 - `createElement(String)`...
- 文档节点(Document node):指的是整个HTML文档的根节点。 - 文档片段节点(DocumentFragment node):表示一组没有共同父节点的节点的集合。 在JavaScript中,可以通过nodeType属性来判断一个节点的类型。...
JavaScript中的节点知识是DOM(文档对象模型)编程的基础,DOM是一种标准,允许程序和脚本动态更新、添加、删除和改变HTML和XML文档的结构。DOMDocument对象在处理XML文档时尤其重要,它代表整个XML文档,而XMLHTTP...
- **XML文档操作**:轻松添加、删除、修改和查找XML元素,简化了XML文档的维护工作。 - **SAX支持**:除了DOM模型,DOM4J还支持SAX解析,适用于处理大型XML文件。 - **JAXB集成**:与Java对象绑定框架JAXB有良好...
- 删除节点:使用removeChild方法从DOM树中移除节点。 - 替换节点:使用replaceChild方法替换DOM树中的节点。 - 修改节点:可以修改节点的值,包括文本节点和元素节点的属性。 六、事件处理 JavaScript中的事件处理...