zoukankan      html  css  js  c++  java
  • DOM节点的创建、插入、删除、查找、替换

    在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。

    一、创建DOM节点

    使用的命令是

    var oDiv = document.createElement('div');

    这样就创建了一个div标签。

    二、插入DOM节点

    移动DOM节点也就是把这个节点插入到html文档中的某个地方,这里js给了我们两个方法:

    1.appendChild():把节点插入到父节点的末尾。

    document.body.appendChild(oDiv);   //把div插入到body中,并且位于末尾

    2.insertBefore():把节点插入到父节点的某个兄弟节点的前面。

    var oP = createElement('p');  //创建一个p节点
    document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面

    三.删除DOM节点

    删除DOM节点的方法是removeChild()。

    document.body.removeChild(oP);  //删除p节点

    四.查找DOM节点

    查找DOM节点的方法很多,常用的有:

    getElementById()    //通过元素Id,唯一性

    如html文档如下:

    <body>
        <div id='box'></div>
    </body>

    这是可以使用getElementById()获取到id为box的div。

    var oDiv = document.getElementById('box');

    2.getElementsByTagName()   //通过元素的标签名来选择元素

    var aDiv = getElementsByTagName('div');

    要注意的是,getElementsByTagName()获取的是一组元素,所以如果想取得上面那个id为box的div要在后面加上[0];

    var oDiv = getElementsByTagName('div')[0];

    五、替换DOM节点

    替换DOM节点的方法是replaceChild()。

    var oSpan = document.createElement('span'); //创建一个span标签
    document.body.replaceChild(oSpan,oBox); //用span标签替换div标签

    最常用的DOM操作就是这些了,其他还有很多的方法,就目前而言,各浏览器兼容性不太好,所以还是推荐大家暂时只使用上述这些方法。

  • 相关阅读:
    learnyou 相关网站
    hdu 3038 How Many Answers Are Wrong
    hdu 3047 Zjnu Stadium 并查集高级应用
    poj 1703 Find them, Catch them
    poj 1182 食物链 (带关系的并查集)
    hdu 1233 还是畅通工程
    hdu 1325 Is It A Tree?
    hdu 1856 More is better
    hdu 1272 小希的迷宫
    POJ – 2524 Ubiquitous Religions
  • 原文地址:https://www.cnblogs.com/lingdublog/p/6483359.html
Copyright © 2011-2022 走看看