【面试系列】之四：关于原生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的事件