`

dom文档节点操作-删除removeChild()

 
阅读更多
<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 全部删除

分享到:
评论

相关推荐

    Dom文档对象模型-2010版

    总的来说,2010版的"DOM文档对象模型"手册是Web开发者的宝贵资源,它详尽地解释了DOM的各个方面,无论你是新手还是经验丰富的开发者,都能从中受益匪浅。通过深入理解和熟练运用DOM,你可以更好地构建动态、交互性强...

    Dom文档对象模型-2010版chm

    **DOM文档对象模型** DOM(Document Object Model)是W3C组织制定的一种标准,它提供了一种结构化的表示XML或HTML文档的方式,并定义了访问和操作这些文档的标准接口。DOM模型将网页内容视为一个树形结构,每个节点...

    DOM文档对象中文手册.chm

    通过深入学习并实践DOM文档对象中文手册中的内容,开发者可以更好地掌握网页动态交互的能力,实现诸如动态加载数据、响应用户操作、以及创建复杂的前端应用等功能。DOM是现代Web开发不可或缺的一部分,对于提升网页...

    DOM文档对象中文手册

    - **删除节点(Removing Nodes)** - `removeChild()`方法用于删除指定的子节点。 - **查找节点(Finding Nodes)** - `getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法用于根据ID...

    XMLDOM对象方法中文手册chm

    - `removeChild`:删除已存在的子节点。 - `getAttribute`和`setAttribute`:读取或设置元素的属性值。 - `getElementsByTagName`:根据标签名查找所有匹配的元素。 - `getElementById`:根据ID查找唯一的元素。...

    JavaScript利用HTML DOM进行文档操作的方法_.docx

    - 整个文档是一个文档节点(也称为根节点)。 - 每个标签是一个元素节点。 - 包含在标签中的文本是文本节点。 - 标签的每个属性是一个属性节点。 - 注释是注释节点。 #### DOM 接口及其属性和方法 DOM 把文档模拟...

    DOM文档对象中文手册(chm).rar

    - **删除节点**: `removeChild()`方法移除指定的子节点。 - **修改节点**: `nodeValue`属性可改变文本节点的值,`setAttribute()`和`removeAttribute()`用于修改或移除元素的属性。 3. **事件处理** - **事件...

    DOM知识教程大全--讲述形象易理解

    DOM定义了一种树型结构来表示文档,每个部分都是一个节点,如元素、属性、文本等。在这个树中,每个节点都有其特定的关系和属性。 1. **DOM树中的元素节点** 在DOM树中,每个元素都是一个节点。例如,在描述中提到...

    dom4j--java框架技术

    - 添加、删除和修改元素:Element对象提供了addElement、removeChild和setText等方法来实现这些操作。 - 查询元素:XPath API允许通过表达式快速找到文档中的特定元素,如`/root/element[@attr='value']`。 - ...

    JS操作DOM元素属性和方法.pdf

    - `removeChild(childNode)`: 删除某个子节点。 - `replaceChild(newNode, oldNode)`: 替换某个子节点为新的节点。 4. 获取和设置节点属性: - `getAttribute(name)`: 获取指定元素上的指定属性值。 - `...

    js中DOM文档对象学习代码

    - `removeChild(node)`:从父节点中删除指定的子节点。 3. **属性和文本操作**: - `innerHTML`:获取或设置元素的HTML内容。 - `innerText` / `textContent`:获取或设置元素的纯文本内容。 - `getAttribute...

    XML应用开发(软件品牌)-1期 6.6 案例分析-XML DOM删除节点.doc

    在本文中,我们将深入探讨XML文档对象模型(DOM)中的删除节点操作,这是XML应用开发中的一个重要技能。DOM允许我们以编程方式操作XML文档,包括添加、修改和删除节点。以下将详细介绍如何删除元素节点和属性节点。 ...

    DOM访问/创建/删除/修改文档节点及属性方法

    DOM 访问、创建、删除、修改文档节点及属性方法 DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,允许开发者使用脚本语言(如 JavaScript)来访问和操作文档的结构和内容。在这里,我们将详细介绍 DOM...

    HTML DOM 文档

    - 文档节点:整个文档的顶级节点。 4. **选择和访问节点** - `getElementById()`:根据ID获取唯一元素。 - `getElementsByClassName()`和`getElementsByTagName()`:分别通过类名和标签名获取元素集合。 - `...

    文档对象模型(DOM)的帮助文档

    - **用途**:作为 XML 文档操作的起点,包含其他所有节点,并提供了创建和操作这些节点的方法。 - **关键方法**: - `createAttribute(String)`:使用给定的名字创建一个 `Attr` 对象。 - `createElement(String)`...

    DOM 节点操作 【微重点】【案例】.pdf

    - 文档节点(Document node):指的是整个HTML文档的根节点。 - 文档片段节点(DocumentFragment node):表示一组没有共同父节点的节点的集合。 在JavaScript中,可以通过nodeType属性来判断一个节点的类型。...

    详细讲解JS节点知识

    JavaScript中的节点知识是DOM(文档对象模型)编程的基础,DOM是一种标准,允许程序和脚本动态更新、添加、删除和改变HTML和XML文档的结构。DOMDocument对象在处理XML文档时尤其重要,它代表整个XML文档,而XMLHTTP...

    dom4j-1.6.1

    - **XML文档操作**:轻松添加、删除、修改和查找XML元素,简化了XML文档的维护工作。 - **SAX支持**:除了DOM模型,DOM4J还支持SAX解析,适用于处理大型XML文件。 - **JAXB集成**:与Java对象绑定框架JAXB有良好...

    在javascript中对于DOM的加强

    - 删除节点:使用removeChild方法从DOM树中移除节点。 - 替换节点:使用replaceChild方法替换DOM树中的节点。 - 修改节点:可以修改节点的值,包括文本节点和元素节点的属性。 六、事件处理 JavaScript中的事件处理...

Global site tag (gtag.js) - Google Analytics