【面试系列】之四：关于原生dom操做

之四：关于原生dom操做

下周被内推了百度糯米的面试，决定趁这个周末恶补下原生的js基础，感受本身被jQuery惯坏了吧！
前两天听首页部同组的大牛师兄说：“其实仍是js基础重要，不要盲目追求新技术，基础练好了就像把本身的内功修炼好，内功扎实才能修炼好武功秘籍！不然都是飘飘然”

说的好对！特别感谢同组的技术大牛师兄。今天我要说的是js原生的dom的操做！

关于原生的dom操做这一块，因为ie浏览器的各类不支持，因此，这部分的兼容性问题是很是多的！
用惯了jQuery的你是否是也像我同样，刚刚接触感受有点懵呢！

1. 关于查找

1.1 经过父子兄弟关系查找

childNodes  //查找父元素的全部子元素（多层），返回一个类数组对象，支持到ie6
parentNode  //查找子元素的父节点（一层），返回父元素对象，支持到ie6
previousSibling //查找前一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6
nextSibling     //查找后一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6
firstChild  //查找父元素下的第一个子元素，返回子元素对象，支持到ie6
lastChild   //查找父元素下的最后一个子元素，返回子元素对象，支持到ie6

各项dom操做均支持到ie6，可是...有问题，什么问题？
举个栗子：

<div>
    <button>click</button>
    <button>单击</button>
</div>

var oDiv = document.getElementsByTagName('div')[0];
console.log(oDiv.firstChild)

你们猜会输出什么，
答案是：IE9及其以前的浏览器会输出：<button>click<button>,而其余标准浏览器会输出''
缘由是：对于元素间的空格，IE9 及以前版本不会返回文本节点，而其余全部浏览器都会返回文本节点
也就是说：除了IE9及以前的浏览器，会输出标签之间的空格的空文本，由于他们也是一个文本元素！

解决方案是，在其余浏览器下，除了ie9及其以前的浏览器，使用以下查找node节点的方法，能够忽略第一个文本节点，直接寻到html元素节点

childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild 的元素版。
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

1.2 经过元素自身属性查找

getElementById('')  //经过元素的id进行查找，兼容到IE6
getElementsByTagName('')    //经过元素的标签名进行查找，兼容到ie6
getElementsByName('')   //经过元素的name属性查找，兼容到IE8
getElementsByClass('') //经过元素的class属性去查找，html5新出的。兼容性你懂的。

此外还有一个，选择器：

querySelector() //接收一个CSS 选择符，返回与该模式匹配的第一个元素，兼容到Ie8+
querySelectorAll()  //接收一个CSS 选择符，返回与该模式匹配的第一数组

2. 建立元素

document.createElement()   //建立HTML元素节点
document.createTextNode()   //建立文本元素节点

3. 插入、替换、删除、克隆元素

appendChild()   //向父元素的最后一个子元素处插入
insertBefore()  //两个参数，要插入的节点和做为参照的节点
replaceChild()  //两个参数，要插入的节点和要替换的节点
removeChild()   //要移除的对象

特别注意：前面介绍的四个方法操做的都是某个节点的子节点，也就是说，这都是父元素对子元素的操做

cloneNode()
// cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true
// 的状况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false 的状况下，执行浅复制，
// 即只复制节点自己。复制后返回的节点副本属于文档全部，但并无为它指定父节点。所以，这个节点
// 副本就成为了一个“孤儿”，除非经过appendChild()、insertBefore()或replaceChild()将它添加到文档中

既然说了这么多，我们学以至用一下，分享一道腾讯的笔试题，前两天个人小伙伴刚刚作完这个题
题目：在网页中生成一个ul，里面有100个li，每一个li的内容从上到下内容从1-100。生成结束1秒钟后，将100个li颠倒过来，内容也就变成了100-1。
要求：不准使用了innerHTML以及innerText这两个方法，兼容性到IE8+

po上个人解题代码：

var oUl = document.createElement('ul');
document.body.appendChild(oUl);

for (var i=0;i<100;i++) {
    var oLi = document.createElement('li');
    oLi.appendChild(document.createTextNode(i + 1));
    oUl.appendChild(oLi);
}

setTimeout(function () {
    for (var i=0;i<100;i++) {
        var oSpecialLi = document.createElement('li');
        oUl.insertBefore(oSpecialLi, findElementByPos(i));
        oUl.replaceChild(oUl.lastElementChild, oSpecialLi);
    }
}, 1000);

// 封装了一个函数，用于返回须要位置的元素
function findElementByPos(pos) {
    var oLiChange = oUl.firstElementChild;
    for (var j=0;j<(pos-0);j++) {
        oLiChange = oLiChange.nextElementSibling;
    }
    return oLiChange;
}

4. 其余

4.1 操做html元素下的属性

getAttribute()  // 传入一个参数，获取相应属性的值
setAttribute()  // 两个参数，第一个：属性名称，第二个：属性的值
removeAttribute()   // 删除属性，输入要删除的属性名称

4.2 焦点管理

document.activeElement  // 没有兼容性问题，这个属性始终会引用DOM 中当前得到了焦点的元素

4.3 获取内容

innerHTML   // 属性返回与调用元素的全部子节点（包括元素、注释和文本节点），固然也能够写入父元素下的子元素
innerText   // 功能和上一条相似，可是只对操做元素下的文本元素有影响

5. 最后

以上就是关于原生dom的所有内容，但愿下周的糯米面试成功，么么哒

下一次准备和你们聊聊事件那些事，关于js的事件