设为首页收藏本站Access中国

Office中国论坛/Access中国论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

返回列表 发新帖
查看: 2445|回复: 5

[多媒体] 浅谈DOM之六:处理节点(2)

[复制链接]
发表于 2015-7-7 12:01:15 | 显示全部楼层 |阅读模式
本帖最后由 roych 于 2015-7-8 11:18 编辑

       除了appendChild之外,我们还可以通过insertBefore来插入节点。语法结构如下:父节点.insertBefore(新节点,被插入的节点位置)。例如,上一节的第一个例子,可以改成:doc.querySelector("div").insertBefore p(i), doc.querySelector("div").lastChild【见附件】。       有人可能会问,这些节点的插入好像都是按一定顺序的,能不能在任意位置插入呢?
       答案是:当然可以。下面我们就来看看神奇的insertAdjacentHTML。在讲这个方法之前,我们需要先来看看这段HTML代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>这是标题</title>
  5. </head>
  6. <body>
  7. 【beforeBegin】<div>【afterBegin】这是容器【beforeEnd】</div> 【afterEnd】
  8. </body>
  9. </html>
复制代码

       如上所示,以div作为一个参考,那么可以插入的位置就有这4个:
       【beforeBegin】:标签开启前
       【afterBegin】:标签开启后
       【beforeEnd】:标签结束前
       【afterEnd】:标签结束后
       理解了这几个位置之后,我们就可以根据实际需求在任意位置插入节点了。另外需要注意的一点是,这个方法只能插入HTML代码,因此,如果创建的是IHTMLElement,则需要将它转换为InnerHTML或者outerHTML再处理:
  1. Private Sub cmdinsertAdjacentHTML_Click()
  2. Dim wb As WebBrowser
  3. Dim doc As HTMLDocument
  4. Set wb = Me.WebBrowser0.Object
  5. Set doc = wb.Document
  6. '插入
  7. doc.querySelector("div").insertAdjacentHTML "beforeBegin", "<p>Hi,我是Roych</p>"
  8. doc.querySelector("div").insertAdjacentHTML "beforeEnd", "<p>DOM好玩吗?</p>"
  9. doc.querySelector("div").insertAdjacentHTML "afterBegin", "<p>我们继续学习好不好?</p>"
  10. doc.querySelector("div").insertAdjacentHTML "afterEnd", "<p>Roych,你能不能别牛掰啊?^_^</p>"
  11. '显示插入后的父节点HTML代码
  12. lblHTML.Caption = "插入后,body的代码如下:" & doc.querySelector("div").parentNode.innerHTML
  13. End Sub
复制代码
      从表面上看,在【beforeBegin】和【afterBegin】位置插入的文本都是放在当前文本的前面。类似地,【beforeEnd】和【afterEnd】是放在当前文本的后面。但实际上,这并非一回事。【beforeBegin】和【afterEnd】创建的是一个兄弟节点,即与当前节点是处于同一级别的。而【afterBegin】和【beforeEnd】创建的则是当前节点的子节点,即处于当前节点的内部。
       在DOM4里,还有append、prepend、after和before等等方法。不过在Access里并没有测试成功。
       ——如果你学过jQuery,就会发现jQuery里就有这几个方法。当然,作为JavaScript框架,它显然使用了不少DOM的方法和属性,并对此进行了改造。例如,选择器。——不过这里并不想讨论jQuery。
       至此,节点的插入讲解完毕。后面继续讲解节点的其它操作。
       上一节 下一节

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

评分

参与人数 1经验 +12 收起 理由
tmtony + 12 优秀源创

查看全部评分

点击这里给我发消息

发表于 2015-7-7 12:03:13 | 显示全部楼层
【beforeBegin】<div>【afterBegin】这是容器【beforeEnd】</div> 【afterEnd】
这样说,一目了然,哈哈~

点击这里给我发消息

发表于 2015-7-7 12:06:01 | 显示全部楼层
高产啊!加分了
发表于 2015-7-7 16:40:08 | 显示全部楼层
烦请给看下WebBrowser都引用了哪些库,谢谢.
 楼主| 发表于 2015-7-7 18:01:23 | 显示全部楼层
风中漫步 发表于 2015-7-7 16:40
烦请给看下WebBrowser都引用了哪些库,谢谢.

就Microsoft HTML object library库跟Microsoft Internet Control Library。

点评

3Q  发表于 2015-7-8 07:34
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|站长邮箱|小黑屋|手机版|Office中国/Access中国 ( 粤ICP备10043721号-1 )  

GMT+8, 2024-3-29 22:29 , Processed in 0.099026 second(s), 35 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表