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

2023-02-14 19:28:59

前言

　　时间过的真快，不知不觉就到年底了。问问自己，这一年你对自己的工作满意吗？评价标准是什么呢？当然是马云的那两条准则了：钱给到了吗？干的爽吗？如果答案都是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的关照下一路走来的。故本篇只记录一些浅层次的东西了。

码农公寓

前言

正题