浅谈DOM之六：处理节点(2)

roych · 发表于 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代码：

<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
</head>
<body>
【beforeBegin】<div>【afterBegin】这是容器【beforeEnd】</div> 【afterEnd】
</body>
</html>

复制代码

   如上所示，以div作为一个参考，那么可以插入的位置就有这4个：
   【beforeBegin】：标签开启前
   【afterBegin】：标签开启后
   【beforeEnd】：标签结束前
   【afterEnd】：标签结束后
   理解了这几个位置之后，我们就可以根据实际需求在任意位置插入节点了。另外需要注意的一点是，这个方法只能插入HTML代码，因此，如果创建的是IHTMLElement，则需要将它转换为InnerHTML或者outerHTML再处理：

Private Sub cmdinsertAdjacentHTML_Click()
Dim wb As WebBrowser
Dim doc As HTMLDocument
Set wb = Me.WebBrowser0.Object
Set doc = wb.Document
'插入
doc.querySelector("div").insertAdjacentHTML "beforeBegin", "<p>Hi，我是Roych</p>"
doc.querySelector("div").insertAdjacentHTML "beforeEnd", "<p>DOM好玩吗？</p>"
doc.querySelector("div").insertAdjacentHTML "afterBegin", "<p>我们继续学习好不好？</p>"
doc.querySelector("div").insertAdjacentHTML "afterEnd", "<p>Roych，你能不能别牛掰啊？^_^</p>"
'显示插入后的父节点HTML代码
lblHTML.Caption = "插入后，body的代码如下：" & doc.querySelector("div").parentNode.innerHTML
End Sub

复制代码

   从表面上看，在【beforeBegin】和【afterBegin】位置插入的文本都是放在当前文本的前面。类似地，【beforeEnd】和【afterEnd】是放在当前文本的后面。但实际上，这并非一回事。【beforeBegin】和【afterEnd】创建的是一个兄弟节点，即与当前节点是处于同一级别的。而【afterBegin】和【beforeEnd】创建的则是当前节点的子节点，即处于当前节点的内部。
   在DOM4里，还有append、prepend、after和before等等方法。不过在Access里并没有测试成功。
   ——如果你学过jQuery，就会发现jQuery里就有这几个方法。当然，作为JavaScript框架，它显然使用了不少DOM的方法和属性，并对此进行了改造。例如，选择器。——不过这里并不想讨论jQuery。
   至此，节点的插入讲解完毕。后面继续讲解节点的其它操作。
   上一节下一节

盗梦 · 发表于 2015-7-7 12:03:13

【beforeBegin】<div>【afterBegin】这是容器【beforeEnd】</div> 【afterEnd】
这样说，一目了然，哈哈~

tmtony · 发表于 2015-7-7 12:06:01

高产啊！加分了

风中漫步 · 发表于 2015-7-7 16:40:08

烦请给看下WebBrowser都引用了哪些库,谢谢.

roych · 发表于 2015-7-7 18:01:23

风中漫步发表于 2015-7-7 16:40
烦请给看下WebBrowser都引用了哪些库,谢谢.

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

帐号		自动登录	找回密码
密码			注册

群介绍
Access培训群 (792054000)
Access免费培训2群 (163530137)
Access免费培训群 (833510950)
Access免费培训群2 (792054000)
Access交流总群 (5004108)

主题相关群

地区相关群[您还没设置居住地]

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

本帖子中包含更多资源

评分

点评

群介绍
主题无相 (随机显示版	同地区群块其他地区)