一切皆节点

在 HTML DOM (文档对象模型)中,节点主要包括(括号中用数字表示节点类型):元素(1)、属性(2)、文本(3,其中换行符也是一个文本节点)、注释(8)、文档(9)

其中重要的方法应用主要是增、删、改、查。

1、增,在上一篇随笔已经详细介绍了两种方法。

2、删,即element.removeChild() 从元素中移除子节点。

语法:node.removeChild(node)

以 Node 对象返回被删除的节点,如果节点不存在则返回 null。

步骤:(1)获取父节点 (2)获取想要删除的节点 (3)删除节点

parent.removeChild(child);

3、改,即element.replaceChild() 替换元素中的子节点。

  语法:node.replaceChild(newnode,oldnode)

  新节点可以是文档中某个已存在的节点,或者您也可创建新的节点。

  旧节点会被删除

  步骤:(1)创建一个新节点或选择已有节点(2)获取父节点(3)获取想要被替换的节点 (4)替换节点

       parent.replaceChild(para,child);

4、查,查询节点,方法有很多,比如:

element.firstChild 返回元素的首个子。

element.firstChild 返回元素的首个子。

element.nextSibling 返回位于相同节点树层级的下一个节点。

element.nextSibling 返回位于相同节点树层级的下一个节点。

element.parentNode 返回元素的父节点。

element.parentNode 返回元素的父节点。

element.parentNode 返回元素的父节点。

												

HTML DOM 节点的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  3. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  6. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  7. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  8. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  9. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  10. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

随机推荐

  1. MFC-01-Chapter01:Hello,MFC---1.3 第一个MFC程序(05)

    1.3.4 绘制窗口 如何在屏幕上随心所欲的进行绘制?应用程序通过响应来自Windows的WM_PAINT消息进行绘制的,此消息通知它更新窗口. WM_PAINT消息如何发生:窗口位置改变:窗口大小改 ...

  2. app启动时间命令

    app启动: 冷启动和热启动 冷启动方式: adb shell am start -W -n package/activity 停止app命令: adb shell am force-stop pac ...

  3. Oracle存储过程中异常Exception的捕捉和处理

    Oracle存储过程中异常的捕捉和处理 CREATE OR REPLACE Procedure Proc_error_process ( v_IN in Varchar2, v_OUT Out Var ...

  4. [转] 从 C 到 Objective C 入门1

    转自: http://blog.liuhongwei.cn/iphone/objective-c/ 进军iPhone开发,最大的难点之一就是怪异的Objective C语法了.不过,了解之后才发现,原 ...

  5. Codeforces Round #323 (Div. 1) A. GCD Table

    A. GCD Table time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  6. HelloWorld Makefile Template

    DEPDIR = build_dep TARGET_NAME = helloworld CFLAGS = -Wall SRCS = main.c SRCS += foo.c OBJS = $(SRCS ...

  7. Jquery实现select左右栏的添加移除

    首先是效果展示, 兼容火狐,IE6+,谷歌没测试有

  8. NC台网震相走时获取及 HYPOINVERSE 格式读取

    HYPOINVERSE格式介绍:http://www.ncedc.org/ftp/pub/doc/man5/ncsn.phase.5 获取网站: http://www.ncedc.org/ncedc/ ...

  9. Bootstrap-datetimepicker年月日

    <div class="input-group date form_date" data-date="" data-date-format="y ...

  10. JS截取字符串常用方法详细整理

    使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png" ...