阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript DOM创建元素,添加元素,移动元素,复制节点,删除,替换元素,查找节点的方法?

      问题

      DOM创建元素,添加元素,移动元素,复制节点,删除,替换元素,查找节点的方法?

      答案

      创建元素

      document.createElement('tagName');
      

      添加元素

      parent.appendChild(childNode);
      

      注:父元素调用该方法

      移动元素

      由于DOM对象属于引用类型,所以在操作appendChild和insertBefore方法时,

      控制的节点如果是文档中存在的节点,那么将把这个节点移到目标处。

      复制节点

      oLi.cloneNode(true);
      

      注:参数true表示深度克隆(深拷贝),false 表示浅度克隆(浅拷贝),深拷贝也就是复制节点及整个节点数;浅拷贝复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,整个节点副本就成为一个‘孤儿’:

      <ul id='oUl'>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      <ul>
      
      <script>
      var myList = document.getElementById("oUl");
      var deepList = myList.cloneNode(true);
      console.log(deepList.childNodes.length);//3  (IE<9) 或7 (其它浏览器)
      
      var shallowList = myList.cloneNode(false);
      console.log(shallowList.childNodes.length);//0
      </script>
      

      以上代码注意childNode包含文本节点。

      cloneNode()方法不会复制添加DOM节点的JS属性,例如事件处理程序等。这个方法只复制特性,其他一切都不会复制。

      删除节点

      parentNode.removeChild(childNode);
      

      注:父元素调用该方法,返回值为被删除的节点

      替换元素

      parentNode.replaceChild(newNode,oldNode);
      

      注:oldNode节点必须是parentNode的子节点。

      插入元素

      parentNode.insertBefore(newEle, oldNode);
      

      注:父元素调用该方法

      查找节点的总结

      • childNodes—返回节点到子节点的节点列表
      • firstChild—返回节点的首个子节点;
      • lastChild—返回节点的最后一个子节点;
      • nextSibling—返回节点之后紧跟的同级节点;
      • nodeName—返回节点的名字,根据其类型;
      • nodeType—返回节点的类型;
      • nodeValue—设置或返回节点的值,根据其类型;
      • ownerDocument—返回节点的根元素(document对象);
      • parentNode—返回节点的父节点;
      • previousSibling—返回节点之前紧跟的同级节点;
      • text—返回节点及其后代的文本(IE独有);
      • xml—返回节点及其后代的XML(IE独有);

      节点对象的方法

      • appendChild()—向节点的子节点列表的结尾添加新的子节点;
      • cloneNode()—复制节点;
      • hasChildNodes()—判断当前节点是否拥有子节点;
      • insertBefore()—在指定的子节点前插入新的子节点;
      • normalize()—合并相邻的Text节点并删除空的Text节点;
      • removeChild()—删除(并返回)当前节点的指定子节点;
      • replaceChild()—用新节点替换一个子节点;

      IE6独有方法

      • selectNodes()—用一个XPath表达式查询选择节点;
      • selectSingleNode()—查找和XPath查询匹配的一个节点;
      • transformNode()—使用XSLT把一个节点转换为一个字符串。transformNodeToObject()—使用XSLT把一个节点转换成为一个文档。

      经典的问题解析

      创建新节点

      • createDocumentFragment() //创建一个DOM片段
      • createElement() //创建一个具体的元素
      • createTextNode() //创建一个文本节点

      添加、移除、替换、插入

      • appendChild()
      • removeChild()
      • replaceChild()
      • insertBefore() //在已有的子节点前插入一个新的子节点

      查找

      • getElementsByTagName() //通过标签名称
      • getElementsByName() //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
      • getElementById() //通过元素Id,唯一性

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录