【面试必备】javascript操作DOM元素

  1. 云栖社区>
  2. 博客>
  3. 正文

【面试必备】javascript操作DOM元素

技术mix呢 2017-10-19 10:05:00 浏览1079
展开阅读全文

前言

  时间过的真快,不知不觉就到年底了。问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗?

  为了应对年后跳槽高峰的到来,从现在开始我要把基础过一遍了。从网上搜集的面试题入手,尽量全面的覆盖到前端的基础知识。为年后的面试提前热身~虽然本人也不是什么面霸,没有什么面试经验,但把基础打扎实是永远不会错的,所以不嫌麻烦不嫌重复劳动,我会收集一些简单基础的面试题,从中提炼出相关的前端知识,然后分析加以记录。大概算了算,只要勤快点,从现在开始一直积累到年后,应该也能小有收获~

  另外还想说一下我对原生js的看法,也是最近产生的。随着IE6、7、8的逐渐淘汰,ES5的普及,我们已经可以在ES5的标准上进行全面开发了。照这个潮流来看,jQuery似乎要被没落了,因为它的主要工作就是做低版本IE的兼容处理。我是jQuery的严重依赖者,如果哪天jQuery真的消失了,岂不连代码也不会写了。真令人担忧,所以今后要重视原生js了,能不用jq的地方就不用。随着这次总结基础知识,我也准备把原生js好好复习一遍,为未来早做打算。

正题

  说到面试题,你最怕什么样的呢?我最怕的是题目只有一句话的,越短越难,比如:如何用js操作DOM元素。

  这道题简单吗?,其实不然。DOM操作包括元素的创建、查找、添加、移动、复制、删除,每种操作又可以延伸出很多问题。如果你常年使用jq或其他框架,原生的写法可能早就忘了。所以,我需要用一篇文章来描述清楚这个问题。

创建新元素

  document.createElement(elemengTagName)用来创建一个元素,返回该新建元素的引用。需要注意参数是标签的名称。在jq中我们可以这样创建一个元素

var node = $('<div>');
var node2 = $('<span id="s"></span>');

  使用原生的我们必须传入元素的标签名称,不能像jq中那么灵活。如:

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

添加新元素

  有两个方法可以向DOM树中添加新元素,分别是appendChild(newElement)和insertBefore(newElement,beforeWhichElement)。

  appendChild向一个元素添加子节点,追加在尾部,如在body中追加一个元素:

var node = document.createElement('div');
node.innerHTML = '新添加的节点';
document.body.appendChild(node);

  insertBefore也是向一个元素添加子节点,不过可以指定添加在哪个子节点的前面,如果不指定第二个参数,会默认添加到最后,即与appendChild效果一样。使用方法如下:

复制代码
var node = document.createElement('div');
node.innerHTML = '新插入的节点';
var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.insertBefore(node,item1);
复制代码

  会在list的子元素item1前面插入新创建的元素node。原生js没有像jq的prepend那样可以从头部添加子节点的方法。

移动元素

  移动元素在DOM树中的位置还是比较常见的需求。完成元素的移动不需要新的方法,还是使用上面的appendChild和insertBefore,只不过操作的元素不是新创建的,而是从已有节点中选择你需要移动的。例如交换两个元素的位置:

var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
list.insertBefore(item2,item1);//把item2插入到item1前面

  使用appendChild也是同样的道理。如:

var item3 = document.getElementById('item3');
var s = document.getElementById('some');
item3.appendChild(s);//把id为some的元素移动到item3下

复制元素

  元素的复制使用cloneNode(cloneChildNodes)方法,参数为boolean类型,表示是否克隆子元素。与jq的clone方法不同的时,原生的无法克隆元素上绑定的事件监听器。使用方法如下:

var s = document.getElementById('some');
var sclone = s.cloneNode(true);

删除元素

  使用removeChild(element)方法来删除元素,需先找到父元素,然后删除其子元素,如下:

var list = document.getElementById('list');
var item1 = document.getElementById('item1');
list.removeChild(item1);

查找元素

  查找元素的内容稍多一点。jq提供了强大的选择器,这也是它的核心之一。离开了jq,我们还是要明白如何利用原生js来选择到你所需的元素。getElementById(id)不多说了,getElementsByTagName(tagName)返回符合元素的数组。除此之外,我们还需知道一个元素都有哪些指针可以访问到其他元素。概括一下,主要包括以下指针:

  • parentNode:指向父节点
  • childNodes:指向所有子节点,是一个数组
  • previousSibling:指向前一个兄弟节点
  • nextSibling:指向后一个兄弟节点
  • firstChild:指向第一个子节点
  • lastChild:指向最后一个子节点

  使用如下:

复制代码
var item2 = document.getElementById('item2');
var parentNode = item2.parentNode;
var childNodes = item2.childNodes;
var previousSibling = item2.previousSibling;
var nextSibling = item2.nextSibling;
var firstChild = item2.firstChild;
var lastChild = item2.lastChild;

console.log(parentNode,childNodes,previousSibling,nextSibling,firstChild,lastChild);
复制代码

  你可能觉得这比起jq的选择器简直差远了。告诉你一个好消息,现在可以有更强大的东西用了,那就是querySelector和querySelectorAll,这两个方法是ES5中新增的,他们的作用就想jq的选择器一样,你可以使用像css风格那样的描述来选择所需的元素,是不是很爽!比如:

document.querySelector('#list');//选择id为list的元素
document.querySelectorAll('.green');//选择class为green的元素,返回元素的数组

  两者的区别你可看出来了,querySelector只会返回一个元素,如果匹配到多个就返回第一个。而querySelectorAll会返回所有匹配的元素数组。有了这两个原生的js方法,你是不是觉得jQuery的没落不远了呢?

结束

  本篇的记录到此结束,当以后面试问到DOM操作时,就可以应付的过来了。不亲手敲一下原生的代码真是忘了不少呢。不过有一点是本篇没有涉及到的,那就是DOM操作的浏览器兼容性。说实话这块的知识我也没有真实遇到过,都是在jq的关照下一路走来的。故本篇只记录一些浅层次的东西了。


本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3493356.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术mix呢
+ 关注