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

  • 相关阅读:
    SharePoint Framework (SPFx) 开发入门教程
    SharePoint 2013 Designer 入门教程
    SharePoint 2013 开发教程
    SharePoint 2013 入门教程
    SharePoint Online 部署SPFx Web部件
    SharePoint Online SPFx Web部件绑定数据
    SharePoint Online 创建SPFx客户端Web部件
    SharePoint Online 配置框架(SPFx)开发环境
    SharePoint Online 创建应用程序目录
    SharePoint Online 启用 IRM
  • 原文地址:https://www.cnblogs.com/lingdublog/p/6483359.html
Copyright © 2011-2022 走看看