节点操作

页面上所有节点都可以看做对象，标签节点又叫做元素

文本节点标签节点注释节点属性节点等等

节点查找

孩子节点

//childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点） //children:获取所有的子元素（用途很广泛） //firstChild //第一个子节点 //firstElementChild //第一个子元素 //lastChild //最后一个节点 //lastElementChild //最后一个子元素

兄弟节点

//1. nextSibling:下一个兄弟节点 //2. nextElementSibling:下一个兄弟元素 //3. previousSibling//上一个兄弟节点 //4. previousElementSibling //上一个兄弟元素

父节点

//1. parentNode:父节点

onkeydown与onkeyup事件

1. onkeydown: 当键盘按下时触发的事件 2. onkeyup: 键盘弹起时触发的事件 注意：如果给文本框注册的是onkeydown事件，获取的value值是上一次的。

添加节点

appendChild

语法：parent.appendChild(child)

parent: 调用者，父节点来调用

child:需要添加的那个孩子。

作用：把child添加到parent的孩子的最后面。

如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。

var demo = document.getElementById("demo"); var box = document.getElementById("box"); box.appendChild(demo);

insertBefore

语法：parent.insertBefore(child, refChild);

parent:必须要父节点来调用

child：需要添加的那个节点

refChild:添加到哪一个节点的前面。

var ul = document.getElementById("list"); var li = document.createElement("li"); li.innerHTML = "骥骥"; //就是添加到子节点的最前面。 ul.insertBefore(li, ul.children[0]);

克隆节点

语法：var newNode = node.cloneNode(deep)

功能：在内存中克隆一份节点

参数：deep

false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。true:深度复制，会复制标签，还会复制标签的所有内容 — 常用 克隆出来的节点跟原来的节点没有关系了，修改了也不会相互影响。如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突

删除节点

语法：parent.removeChild(child);

功能：由父盒子调用，删除里面的一个子元素。

创建节点（3种方式）

document.write（基本不用）

可以生成新的节点，但是不推荐使用。如果页面已经加载完成了，你还是用document.write写内容的话，会把之前的页面给覆盖掉

原理：页面从上往下加载的时候，会开启一个文档流，当页面加载完，文档流就会关闭。

document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西

如果页面加载完成了，还是用document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。

innerHTML

innerHTML也可以创建节点

innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。

慎用：很容易出现性能效率问题。一般用与配合template渲染后台返回来的数据

createElement

语法：var element = document.createElement(“tagName”);

作用：在内存里面创建了一个节点

返回：一个元素。 用途非常的广泛。