节点

document

createElement

1. 创建元素

2. document.createElement

   var div = document.createElement('div');
   div.innerHTML = 123;
   document.body.appendChild(div);

   createTextNode

3. 创建文本节点

   var text = document.createTextNode('注释');
   document.body.appendChild(text);

   createComment

4. 创建注释节点

   var comment = document.createComment('注释');
   document.body.appendChild(comment);

   createDocumentFragment()

5. 创建文档碎片

6. document.createDocumentFragment();

   var oUl =  document.getElementById('list');
   for(var i = 0;i < 1000;i++){
     var oLi = document.createElement('li');
     oLi.innerHTML = i + `这是第+${i}个`
     oLi.className = 'list-item';
     oUl.appendChild(oLi);
   }

   创建一个div 节点来包含

   var oUl =  document.getElementById('list'),
     oDiv =   document.createElement('div');
   for(var i = 0;i < 1000;i++){
     var oLi = document.createElement('li');
     oLi.innerHTML = i + `这是第+${i}个`
     oLi.className = 'list-item';
     oDiv.appendChild(oLi);
   }
     oUl.appendChild(oDiv);//会多出一个div节点

   文档碎片

   var oUl =  document.getElementById('list'),
     oFrag = document.createDocumentFragment();//创建一个文档碎片
   for(var i = 0;i < 1000;i++){
     var oLi = document.createElement('li');
     oLi.innerHTML = i + `这是第+${i}个`
     oLi.className = 'list-item';
     oFrag.appendChild(oLi);
   }
   oUl.appendChild(oFrag);

   字符串拼接

   var oUl =  document.getElementById('list'),
     str = '';//创建一个文档碎片
   for(var i = 0;i < 1000;i++){
       str += '<li>这是第'+i+'个</li>'
     var oLi = document.createElement('li');
     oLi.innerHTML = i + `这是第+${i}个`
     oLi.className = 'list-item';
     oFrag.appendChild(oLi);
   }
   oUl.appendChild(oFrag);

   Node.prototype

   appendChild

   1. 增加子节点
      1. Node.prototype
      2. 在最后面增加

   2. 节点剪切功能

      c.insertBefore(a,b)

   3. 在父级c节点下的子节点b之前，插入a节点。

      父节点.removeChild（子节点）

   4. 返回被remove的节点 ```javascript DOM 对象 = 元素节点 节点: 元素节点，属性节点，注释节点，文本节点，documentFragment

元素 —> 构造函数实例化 —> 元素节点 div —> new HTMLDIVElement() removeChild(div) —> div DOM 对象 删除了节点 —> 存储在内存中

<a name="xzmCh"></a>
### c.replaceChild(a,b)
      1. 节点替换
      1. 把父级c的节点b替换成a; 
<a name="ChreM"></a>
##  element
   1. remove 
      1. 元素销毁
   2. innerHTML/innerText
      1. HTMLElement.prototype
      1. innerHTML还存在于Element.prototype
   3. innerText
      1. 获取的是文本
      1. 老版本火狐不支持。需要使用textContent
      1. textContent IE老版本也不支持
   4. setAttribute,getAttribute
      1. 获取和设置属性
<a name="CDiQ4"></a>
### 5. data-*
   1. 自定义属性
   1. HTML5内容
   1. IE9及以下都没有
<a name="hCjRw"></a>
### 6. dataset
   1. 管理自定义属性
```html
<p data-age="12" data-name="张三">我是段落标签</p>

b. 获取属性

c. 设置属性

div.getElementsByTagName('p')[0].setAttribute('data-age',11)