利用javascript操作页面节点

最新推荐文章于 2022-05-24 17:35:43 发布

Death_Spank

最新推荐文章于 2022-05-24 17:35:43 发布

阅读量8.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 文档 html 任务 c

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

1.访问节点：

a:getElementsByTagName():用于返回一个包含所有tanName（标签名）特性等于某个特定值的NodeList

如：var tagP=document.getElementsByTagName("p");

var tagImg=document.getElementsByTagName("img")

b:getElementsByName();用于获取name特性等于特定值的元素

c:getElementById();于上一个相似，用于获取id特性等于特定值的元素；HTML中id是唯一的，所以是getElementById()而不是getElementsById();无疑这是最快的获取元素的方式

2.创建节点，比较常用的几个是creatElement(),creatTextNode().appendChild()

假设有如下HTML页面：

现在想使用DOM来添加下列代码到上面这个页面中：

这里可以使用createElement() 和createTextNode() 来达到目的。下面是实现步骤：

首先，创建 元素：

var oP = document.createElement("p");

第二，创建文本节点：

下一步，把文本节点加入到元素中。可以用在本章前面简要提到的appendChild() 方法来完成这个任务。每种节点类型都有appendChild() 方法，它的用途是将给定的节点添加到某个节点的childNodes 列表的尾部。在这个例子中，应将文本节点追加到 元素中：

oP.appendChild(oText);

不过还没完成全部操作。已经创建了一个 元素和一个文本节点，并且将它们关联在一起了，但这个元素在文档中仍然没有一席之地。要实际可见，必须将这个元素附加到document.body 元素或者其中任意子节点上。然后，可以再次使用appendChild() 方法：

document.body.appendChild(oP);

要把这些代码放到可运行范例中，只要创建一个包含每一步的函数，并且使用onload 事件句柄在页面载入后调用这个函数

当运行这段代码时，"Hello World!" 的消息会自动显示，就好像它本来就是这个HTML文档的一部分。

3.删除节点；removeChild() 、replaceChild() 和insertBefore()

自然的，可以添加一个节点，当然也可以删除一个节点，这就是removeChild() 所要做的事。这个方法接受一个参数，要删除的节点，然后将这个节点作为函数的返回值返回。所以，例如，如果有个已经包含"Hello World!" 消息的页面，要把这个消息删除，可以使用类似下面方法：

这个页面载后，显示空白页面，因为在你能瞥到消息之前，它已经被删除了。尽管它能运行，最好还是使用节点的parentNode 特性来确保每次你都能访问到它真正的父节点：

但假如想将这个消息替换成新的内容，要怎么做呢？如果是这种情况，则可以使用replaceChild() 方法。

replaceChild() 方法有两个参数：被添加的节点和被替换的节点。这样，可以创建一个包含新消息的元素，并用它替换原来包含"Hello World!" 消息的 元素。

这个范例页面将消息"Hello World!" 替换成"Hello Universe!" 注意这段代码仍然使用parentNode 特性来确保使用了正确父节点来进行操作。

当然，可能想让两个消息同时出现。如果想让新消息出现在老消息之后，只要使用appendChild() 方法：

然而，如果想让新消息出现在旧消息之前，就使用insertBefore() 方法。这个方法接受两个参数：要添加的节点和插在哪个节点之前。在这个例子中，第二个参数是包含"Hello World!" 的 元素：

4. createDocumentFragment()

一旦把节点添加到document.body （或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，就像在前面的例子中那样。然而，当要向document 添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document 中。

假设你想创建十个新段落。若使用前面学到的方法，可能会写出这种代码：

这段代码运行良好，但问题是它调用了十次document.body.appendChild() ，每次都要产生一次页面刷新。这时，文档碎片就十分有用：

在这段代码中，每个新的 元素都被添加到文档碎片中。然后，这个碎片被作为参数传递给appendChild() 。这里对appendChild() 的调用实际上并不是把文档碎片节点本身追加到<body/> 元素中；而是仅仅追加碎片中的子节点。然后，可以看到很明显的性能提升：调用document.body.appendChild() 一次来替代十次，这意味着只需要进行一次屏幕刷新。