之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或者库好多都是公司内部自己构建的,所以说到头来还是要原生JavaScript,这里总结了一些原生js常用的dom操作函数。
一:节点关系
//元素的子元素都可以通过someNode下的childNodes对象来访问
var firstChild = someNode.firstChild; //获得第一个子元素
var lastChild = someNode.lastChild; //获得最后一个子元素
var secondChild = someNode.childNodes[1]; //获得第二个子元素
var secondChild = someNode.childNodes.item(1) //获得第二个子元素
var count = someNode.childNodes.length; //获得子元素个数
var parentNode = someNode.parentNode; //获得父元素
var prevNode = someNode.previousSibling; //获得前一个同胞元素,如果没有则为null
var nextNode = someNode.nextSibling; //获得后一个同胞元素,如果没有则为null
var isHave = someNode.hasChildNodes(); //节点包含一个或多个子节点返回true
var owner = someNode.ownerDocument; //指向表示整个文档的文档节点
二:操作节点
appendChild(newNode): 在节点子元素列表最后插入一个新节点,返回新增节点,如果节点本来就是文档的一部分,那就是将节点从原来的位置移到新位置。
var returnedNode = someNode.appendChild(newNode);
insertBefore(newNode, 参照节点): 在指定节点之前插入一个新的节点。
var returnedNode = someNode.insertBefore(newNode, null) //参照物为null,则插入子节点列表最后
var returnedNode = someNode.insertBefore(newNode, someNode.fisrtChild) //以第一个子节点为参照物,相当于新节点变成了第一个子节点
replaceChild(newNode,参照节点): 用新的节点替换旧节点,返回被替换的节点,被替换的节点依然属于文档,只是没有了位置。
var returnedChild = someNode.replaceChild(newNode, someNode.firstChild) //新节点替换第一个子元素
removeChild(): 移除一个子节点,并且作为返回值返回,被移除的节点依然属于文档,只是没有了位置。
var formerFirstChild= someNode.removeChild(someNode.firstChild); //移除第一个子节点
cloneNode(布尔值):复制一个节点,当参数为false时只复制节点本身,当参数为true是复制节点和他的所有子节点树。该函数不会复制事件处理程序,但是ie存在一个bug会复制处理程序,所以复制前最好先移除事件处理程序。
有这样的html代码:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
假设我们已经将<ul>元素的引用保存在了myList中。
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3(IE < 9) 或 7(其他浏览器)
var deepList = myList.cloneNode(false);
alert(deepList.childNodes.length); //0