摘要：指向后一个同辈元素的元素版。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。生成结束秒钟后，将个颠倒过来，内容也就变成了。
之四：关于原生dom操作
下周被内推了百度糯米的面试，决定趁这个周末恶补下原生的js基础，感觉自己被jQuery惯坏了吧！
前两天听首页部同组的大牛师兄说：“其实还是js基础重要，不要盲目追求新技术，基础练好了就像把自己的内功修炼好，内功扎实才能修炼好武功秘籍！否则都是飘飘然”
说的好对！特别感谢同组的技术大牛师兄。今天我要说的是js原生的dom的操作！
关于原生的dom操作这一块，由于ie浏览器的各种不支持，所以，这部分的兼容性问题是非常多的！
用惯了jQuery的你是不是也像我一样，刚刚接触感觉有点懵呢！
childNodes //查找父元素的所有子元素（多层），返回一个类数组对象，支持到ie6 parentNode //查找子元素的父节点（一层），返回父元素对象，支持到ie6 previousSibling //查找前一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6 nextSibling //查找后一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6 firstChild //查找父元素下的第一个子元素，返回子元素对象，支持到ie6 lastChild //查找父元素下的最后一个子元素，返回子元素对象，支持到ie6
各项dom操作均支持到ie6，但是...有问题，什么问题？
举个栗子：
var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv.firstChild)
大家猜会输出什么，
答案是：IE9及其之前的浏览器会输出：,而其他标准浏览器会输出""
原因是：对于元素间的空格，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的事件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80117.html
摘要：是分发器，是数据与逻辑处理器，会在注册针对各个命令字的响应回调函数。当按如下方式触发回调时，回调函数具备事件的特性。 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇解释 Shadow Widget 在 MVC、MVVM、Flux 框架之间如何做选择。 showImg(https://segmentfault.com/img/bVOODj?w=380&h...
摘要：前端面试题及答案总结掘金技术征文金三银四，金九银十，用来形容求职最好的几个月。因为的存在，至少在被标准化的那一刻起，就支持异步编程了。然而异步编程真正发展壮大，的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文 金三银四，金九银十，用来形容求职最好的几个月...
摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...
摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...
阅读 3622·2021-11-19 09:40
阅读 3054·2019-08-30 15:54
阅读 2297·2019-08-30 15:44
阅读 3173·2019-08-29 15:35
阅读 3311·2019-08-29 12:22
阅读 2844·2019-08-28 18:01
阅读 3116·2019-08-26 13:54
阅读 882·2019-08-26 12:24
