JavaScript操作HTML DOM节点的基础教程

前端之家收集整理的这篇文章主要介绍了JavaScript操作HTML DOM节点的基础教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE:下面提供的例子中的 element 均为元素节点。

获取节点

父子关系

兄弟关系

IoUsSibling/element.nextSibling element.prevIoUsElementSibling/element.nextElementSibling

通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。

通过节点直接的关系获取节点会导致代码维护性大大降低(节点之间的关系变化会直接影响到获取节点),而通过接口则可以有效的解决此问题。

<Meta charset="UTF-8"> ELEMENT_NODE & TEXT_NODE
    First
  • Second
  • Third
  • Fourth

Hello

NTOE:细心的人会发现,在节点遍历的例子中,body、ul、li、p节点之间是没有空格的,因为如果有空格,那么空格就会被当做一个TEXT节点,从而用ulNode.prevIoUsSibling获取到得就是一个空的文本节点,而不是

  • First
  • 节点了。即节点遍历的几个属性会得到所有的节点类型,而元素遍历只会得到相对应的元素节点。一般情况下,用得比较多得还是元素节点的遍历属性

    实现浏览器兼容版的element.children

    有一些低版本的浏览器并不支持 element.children 方法,但我们可以用下面的方式来实现兼容。

    <Meta charest="utf-8"> Compatible Children Method 123

    ppp

    h1

    在这段代码中,页面输出的结果和没有Javascript时是一样的,元素并没有被复制,由于元素本来就在最后一个位置,所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置,就可以在firbug中看到这两个div已经被调换了位置。 如果我们希望把id为a的元素复制一个,然后添加到文档中,那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方,而不影响被复制的元素。下面使用了cloneNode()方法,实现节点的深度复制,使用这种方法复制的节点会脱离文档流。当然,我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

    adscasdjk

    猜你在找的JavaScript相关文章