原生js操作dom的方法 - 推酷
原生js操作dom的方法
今天学习了原生js的dom节点的操作，就记录下来，仅供自己以后参考。
1)创建节点：除了可以使用createElement创建元素，也可以使用createTextNode创建文本节点.
document.body指向的是&body&元素;document.documentElement则指向&html&元素
createNode&=&document.createElement(&div&);
createTextNode&=&document.createTextNode(&hello&world&);
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);
2)插入节点：可以使用appendChild，insertBefore，insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面
createNode&=&document.createElement(&div&);
createTextNode&=&document.createTextNode(&hello&world&);
createNode.appendChild(createTextNode);
div1&=&document.getElementById(&div1&);
document.body.insertBefore(createNode,div1);
3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，因此调用者，需要包含子节点div1，不然调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
replaceChild&=&document.body.replaceChild(createNode,div1);
removeChild&=&document.body.removeChild(div1);
4)节点的属性：
firstChild:第一个子节点
lastChild:最后一个子节点
childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)
nextSibling:下一个兄弟节点
previousSibling：上一个兄弟节点
parentNode：父节点
ul&=&document.getElementById(&ul&);
firstChild&=&ul.firstC
console.log(firstChild.innerHTML);
lastChild&=&ul.lastC
console.log(lastChild.innerHTML);
length&=&ul.childNodes.
console.log(length);
secondChild&=&ul.childNodes.item(1);
console.log(secondChild.innerHTML);
forthChild&=&ul.childNodes.item(2).nextS
console.log(forthChild.innerHTML);
thridChild&=&forthChild.previousS
console.log(thridChild.innerHTML);
parentNode&=&forthChild.parentN
console.log(parentNode.innerHTML);
5) 文档片段，好处在于减少dom的渲染次数，可以优化性能。
fragment&=&document.createDocumentFragment();
ul&=&document.getElementById(&ul&);
i&=&4;&i&&=&0;&i--)&{
li&=&document.createElement(&li&);
li.appendChild(document.createTextNode(&item&&+i));
fragment.appendChild(li);
ul.appendChild(fragment);
6）克隆元素
someNode.cloneNode(true):深度克隆，会复制节点及整个子节点
someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点
clone&=&ul.cloneNode(
document.body.appendChild(clone);
1、childNodes.length存在跨浏览器的问题
可以看到有关列表的html片段没有用
这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childNodes.length的结果有差异：
在ie中，ul.childNodes.length不会计算li之间的换行空格，从而得到数值为4
在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childNodes.length为9
若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。
2、cloneNode存在跨浏览器的问题
在IE中，通过cloneNode方法复制的元素，会复制事件处理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。
在ff,chrome,safari中，通过cloneNode方法复制的元素，只会复制特性，其他一切都不会复制
因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致& & &JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。
& & &小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。
& & &首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。
DOM0事件模型
& & &事件模型在不断发展，早期的事件模型称为DOM0级别。
& & &DOM0事件模型，所有的浏览器都支持。
& & &直接在dom对象上注册事件名称，就是DOM0写法，比如：
1 document.getElementById("test").onclick = function(e){};
& & &意思就是注册一个onclick事件。当然，它和这种写法是一个意思：
1 document.getElementById("test")["onmousemove"] = function(e){};
& & &这没什么，只不过是两种访问js对象属性的方法，[]的形式主要是为了解决属性名不是合法的标识符，比如：object.123肯定报错，但是object["123"]就避免了这个问题，与此同时，[]的写法，也把js写活了，用字符串表示属性名称，可以在运行时动态绑定事件。
& & &言归正传，事件被触发时，会默认传入一个参数e，表示事件对象，通过e，我们可以获取很多有用的信息，比如点击的坐标、具体触发该事件的dom元素等等。
& & &基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。例如：
1 var btn = document.getElementById("test");
3 btn.onmousemove = function(e){
alert("ok");
7 btn["onmousemove"] = function(e){
alert("ok1");
& & &结果会输出ok1。
& & &接下来再说说this。事件触发时，this就是指该事件在哪个dom对象上触发。例如：
1 var btn = document.getElementById("test");
3 btn.onmousemove = function(e){
alert(this.id);
& & &结果输出test。因为事件就是在id为test的dom节点上注册的，事件触发时，this当然代表这个dom节点，可以理解为事件是被这个dom节点调用的。
& & &所以，想解除事件就相当简单了，只需要再注册一次事件，把值设成null，例如：
1 var btn = document.getElementById("test");
3 btn.onclick = function(e){
alert("ok");
7 btn.onclick = null;
& & &原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。
& & &事情还没结束，DOM0事件模型还涉及到直接写在html中的事件。例如：
1 &div id="test" class="test" onclick="exec();" &&/div&
& & &通过这种方式注册的事件，同样遵循覆盖原则，同样只能注册一个，最后一个生效。
& & &区别就是，这样注册的事件，相当于动态调用函数(有点eval的意思)，因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
DOM2事件模型
& & &DOM2事件模型相对于DOM0，小菜仅仅了解如下两点：
& & && & &&& DOM2支持同一dom元素注册多个同种事件。
& & && & &&& DOM2新增了捕获和冒泡的概念。
& & &DOM2事件通过addEventListener和removeEventListener管理，当然，这是标准。
& & &但IE8及其以下版本浏览器，自娱自乐，搞出了对应的attachEvent和detachEvent，由于小菜才疏学浅，本文不做讨论。
& & &addEventListener当然就是注册事件，她有三个参数，分别为："事件名称", "事件回调", "捕获/冒泡"。举个例子：
1 var btn = document.getElementById("test");
3 btn.addEventListener("click", function(e){
alert("ok");
5 }, false);
& & &事件名称就不用多说了，相比DOM0，去掉了前边的on而已。
& & &事件回调也很好理解，事件触发了总得通知你吧！回调时和DOM0一样，也会默认传入一个event参数，同时this是指触发该事件的dom节点。
& & &最后一个参数是布尔型，true代表捕获事件，false代表冒泡事件。其实很好理解，先来个示意图：
& & &意思就是说，某个元素触发了某个事件，最先得到通知的是window，然后是document，依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。接下来，事件会从目标元素开始起泡，再依次而出，直到window对象为止，这个过程就是冒泡。
& & &为什么要这样设计呢？这貌似是由于深厚的历史渊源，小菜也不怎么了解，就不乱说了。
& & &由此可以看出，捕获事件要比冒泡事件先触发。
& & &假设有这样的html结构：
1 &div id="test" class="test"&
&div id="testInner" class="test-inner"&&/div&
& & &然后我们在外层div上注册两个click事件，分别是捕获事件和冒泡事件，代码如下：
1 var btn = document.getElementById("test");
3 //捕获事件
4 btn.addEventListener("click", function(e){
alert("ok1");
6 }, true);
8 //冒泡事件
9 btn.addEventListener("click", function(e){
alert("ok");
11 }, false);
& & &最后，点击内层的div，先弹出ok1，后弹出ok。结合上边的原理图，外层div相当于图中的body，内层div相当于图中最下边的div，证明了捕获事件先执行，然后执行冒泡事件。
& & &为什么要强调点击内层的div呢？因为真正触发事件的dom元素，必须是内层的，外层dom元素才有机会模拟捕获事件和冒泡事件，从原理图上就看出了。
& & &如果在真正触发事件的dom元素上注册捕获事件和冒泡事件呢？
& & &html结构同上，js代码如下：
1 var btnInner = document.getElementById("testInner");
3 //冒泡事件
4 btnInner.addEventListener("click", function(e){
alert("ok");
6 }, false);
8 //捕获事件
9 btnInner.addEventListener("click", function(e){
alert("ok1");
11 }, true);
& & &当然还是点击内层div，结果是先弹出ok，再弹出ok1。理论上应该先触发捕获事件，也就是先弹出ok1，但是这里比较特殊，因为我们是在真正触发事件的dom元素上注册的事件，相当于在图中的div上注册，由图可以看出真正触发事件的dom元素，是捕获事件的终点，是冒泡事件的起点，所以这里就不区分事件了，哪个先注册，就先执行哪个。本例中，冒泡事件先注册，所以先执行。
& & &这个道理适用于多个同种事件，比如说一下子注册了3个冒泡事件，那么执行顺序就按照注册的顺序来，先注册先执行。例如：
1 var btnInner = document.getElementById("testInner");
3 btnInner.addEventListener("click", function(e){
alert("ok");
5 }, false);
7 btnInner.addEventListener("click", function(e){
alert("ok1");
9 }, false);
11 btnInner.addEventListener("click", function(e){
alert("ok2");
13 }, false);
& & &结果当然是依次弹出ok、ok1、ok2。
& & &为了进一步理解事件模型，还有一种场景，假如说外层div和内层div同时注册了捕获事件，那么点击内层div时，外层div的事件一定是先触发的，代码如下：
1 var btn = document.getElementById("test");
2 var btnInner = document.getElementById("testInner");
4 btnInner.addEventListener("click", function(e){
alert("ok");
6 }, true);
8 btn.addEventListener("click", function(e){
alert("ok1");
10 }, true);
& & &结果是先弹出ok1。
& & &假如外层div和内层div都是注册的冒泡事件，点击内层div时，一定是内层div事件先执行，原理相同。
& & &细心的读者会发现，对于div嵌套的情况，如果点击内层的div，外层的div也会触发事件，这貌似会有问题！
& & &点击的明明是内层div，但是外层div的事件也触发了，这的确是个问题。
& & &其实，事件触发时，会默认传入一个event对象，前边提过了，这个event对象上有一个方法：stopPropagation，通过此方法，可以阻止冒泡，这样外层div就接收不到事件了。代码如下：
1 var btn = document.getElementById("test");
2 var btnInner = document.getElementById("testInner");
4 btn.addEventListener("click", function(e){
alert("ok1");
6 }, false);
8 btnInner.addEventListener("click", function(e){
//阻止冒泡
10 e.stopPropagation();
alert("ok");
12 }, false);
& & &终于要说说怎么解除事件了。解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
& & &这和绑定事件的参数一样，详细说明下：
& & && & &&& 事件名称，就是说解除哪个事件呗。
& & && & &&& 事件回调，是一个函数，这个函数必须和注册事件的函数是同一个。
& & && & &&& 事件类型，布尔值，这个必须和注册事件时的类型一致。
& & &也就是说，名称、回调、类型，三者共同决定解除哪个事件，缺一不可。举个例子：
1 var btn = document.getElementById("test");
2 //将回调存储在变量中
3 var fn = function(e){
alert("ok");
7 btn.addEventListener("click", fn, false);
10 btn.removeEventListener("click", fn, false);
& & &要想注册过的事件能够被解除，必须将回调函数保存起来，否则无法解除。
DOM0与DOM2混用
& & &事情本来就很乱了，这又来个混合使用，还让不让人活了。。。
& & &别怕，混合使用完全没问题，DOM0模型和DOM2模型各自遵循自己的规则，互不影响。
& & &整体上来说，依然是哪个先注册，哪个先执行，其他就没什么了。
& & &至此，原生js事件已经讲的差不多了，小菜仅仅知道这些而已，欢迎读者补充其他知识点。
& & &在实际应用中，真正的行家不会傻傻的真的注册这么多事件，一般情况下，只需在最外层dom元素注册一次事件，然后通过捕获、冒泡机制去找到真正触发事件的dom元素，最后根据触发事件的dom元素提供的信息去调用回调。
& & &也就是说，行家会自己管理事件，而不依赖浏览器去管理，这样即可以提高效率，又保证了兼容性，JQuery不就是这么做的嘛~
& & &好了，教程到此结束，希望对读者有所帮助！
& & &手抽筋中。。。
阅读(...) 评论()JS原型与原型链终极详解
（仅支持单关键字）
JS原型与原型链终极详解
〖 作者：zhangjiahao8961 〗〖 发布日期： 〗
一. 普通对象与函数对象
&&JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object ，Function 是JS自带的函数对象。下面举例说明
&function f1(){};
&var f2 = function(){};
&var f3 = new Function('str','console.log(str)');
&var o3 = new f1();
&var o1 = {};
&var o2 =new Object();
&console.log(typeof
//function
&console.log(typeof
Function);
//function
&console.log(typeof o1);
&console.log(typeof o2);
&console.log(typeof o3);
&console.log(typeof
//function
&console.log(typeof
//function
&console.log(typeof
//function
&&在上面的例子中 o1
o3 为普通对象，f1
f3 为函数对象。怎么区分，其实很简单，凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。
二. 原型对象
&&&在JavaScript 中，每当定义一个对象（函数）时候，对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象 prototype。注：普通对象没有prototype,但有__proto__属性。
&&原型对象其实就是普通对象（Function.prototype除外,它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））。看下面的例子：
&console.log(f1.prototype) //f1{}
&console.log(typeof
f1. prototype) //Object
&console.log(typeof
Function.prototype) // Function，这个特殊
&console.log(typeof
Object.prototype) // Object
&console.log(typeof
Function.prototype.prototype) //undefined
&从这句console.log(f1.prototype) //f1 {} 的输出就结果可以看出，f1.prototype就是f1的一个实例对象。就是在f1创建的时候,创建了一个它的实例对象并赋值给它的prototype，基本过程如下：
&var temp = new f1();
&f1. prototype =
&&所以，Function.prototype为什么是函数对象就迎刃而解了，上文提到凡是new Function ()产生的对象都是函数对象，所以temp1是函数对象。
&var temp1 = new Function ();
&Function.prototype = temp1;
那原型对象是用来做什么的呢？主要作用是用于继承。举了例子：
function(name){
&&&this.name = name
&&person.prototype.getName = function(){
&&&&&return this.&
&&var zjh = new person(‘zhangjiahao’);
&&zjh.getName(); //zhangjiahao
&&&从这个例子可以看出，通过给person.prototype设置了一个函数对象的属性，那有person实例（例中：zjh）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。
三．原型链
&&&JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。以上面的例子为例：
& console.log(zjh.__proto__ === person.prototype) //true
同样，person.prototype对象也有__proto__属性，它指向创建它的函数对象（Object）的prototype
&&console.log(person.prototype.__proto__ === Object.prototype) //true
继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null
&&console.log(Object.prototype.__proto__) //null
我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链。如下图：
四．内存结构图
为了更加深入和直观的进行理解，下面我们画一下上面的内存结构图：
画图约定：
疑点解释：
1.Object.__proto__ === Function.prototype
&&Object是函数对象，是通过new Function()创建，所以Object.__proto__指向Function.prototype。
2.Function.__proto__ === Function.prototype
&&Function 也是对象函数，也是通过new Function()创建，所以Function.__proto__指向Function.prototype。
自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL生万物）
正如《道德经》里所说“无，名天地之始”。
3.Function.prototype.__proto__ === Object.prototype //true
其实这一点我也有点困惑，不过也可以试着解释一下。
Function.prototype是个函数对象，理论上他的__proto__应该指向 Function.prototype，就是他自己，自己指向自己，没有意义。
JS一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object.prototype。Object.prototype.__proto__ === null，保证原型链能够正常结束。
五．constructor
&&原型对象prototype中都有个预定义的constructor属性，用来引用它的函数对象。这是一种循环引用
&&person.prototype.constructor === person
&&Function.prototype.constructor === Function //true
&&Object.prototype.constructor === Object //true
完善下上面的内存结构图：
有两点需要注意：
（1）注意Object.constructor===Function；//true 本身Object就是Function函数构造出来的
（2）如何查找一个对象的constructor，就是在该对象的原型链上寻找碰到的第一个constructor属性所指向的对象
1.原型和原型链是JS实现继承的一种模型。
2.原型链的形成是真正是靠__proto__ 而非prototype
要深入理解这句话，我们再举个例子，看看前面你真的理解了吗？
& var animal = function(){};
&&var dog = function(){};
&&animal.price = 2000;//
&&dog.prototype =
&&var tidy = new dog();
&&console.log(dog.price)
//undefined
&&console.log(tidy.price)
为什么呢？画一下内存图：
&&这说明什么问题呢，执行dog.price的时候，发现没有price这个属性，虽然prototype指向的animal有这个属性，但它并没有去沿着这个“链”去寻找。同样，执行tidy.price的时候，也没有这个属性，但是__proto__指向了animal，它会沿着这个链去寻找，animal中有price属性，所以tidy.price输出2000。由此得出，原型链的真正形成是靠的__proro__，而不是prototype。
因此，如果在这样指定dog.__proto__ = animal。那dog.price = 2000。
最后打个比喻，虽然不是很确切，但可能对原型的理解有些帮助。
&&&父亲（函数对象），先生了一个大儿子（prototype），也就是你大哥，父亲给你大哥买了好多的玩具，当你出生的时候，你们之间的亲情纽带（__proto__）会让你自然而然的拥有了你大哥的玩具。同样，你也先生个大儿子，又给他买了好多的玩具，当你再生儿子的时候，你的小儿子会自然拥有你大儿子的所有玩具。至于他们会不会打架，这不是我们的事了。
所以说，你是从你大哥那继承的，印证了那句“长兄如父”啊！
来源：/blog/2070650
JavaScript探索者
Copyright@