JS基本功系列-DOM记录04

setAttribute

<style>
  .running {
    color: green;
  }

  .warning {
    color: yellow;
  }

  .danger {
    color: red;
  }
</style>

<div class="running ">
  系统正常运行中...
</div>

  var div = document.getElementsByTagName('div')[0]

function setSystemStatus(status) {
  div.setAttribute('class', status);
  switch (status) {
    case 'running':
      div.innerHTML = '系统正常运行中';
      break;
    case 'warning':
      div.innerHTML = '系统有警告';
      break;
    case 'danger':
      div.innerHTML = '系统存在危险';
      break;
    default:
      div.innerHTML = '系统处于为知状态';

  }

}

data- 属性

<p data-name="linus" data-age="18">
  My name is Linus
</p>
<script type="text/javascript">
  //HTML5给元素增加了一个 data- * 属性
  var p = document.getElementsByTagName('p')[0];
  // p.dataset
  // DOMStringMap {name: 'linus', age: '18'}
  // age: "18"
  // name: "linus"
  // p.dataset.name
  // 'linus'
  // p.dataset.age
  // '18'
  // p.getAttribute('data-name')
  // 'linus'
  // p.getAttribute('data-age')
  // '18'
</script>

创建文档碎片

文档碎片:
是一个节点,但是它不存在于dom节点树里面,但是又可以接受li,最后又可以交给Ul; 它就是一个容器，可以保存li,最后保存好之后这些片段又可以交给ul(DOM结构); 在写列表的时候,都要先使用DocumentFragment保存列表的dom结构,保存完之后再交给外层容器!!!

<ul id="list"></ul>

// document.createDocumentFragment()
//创建文档碎片
//o开头的表示文档对象
var oUI = document.getElementById('list');

// for (let i = 0; i < 10000; i++) {
//   var oLi = document.createElement('li');
//   oLi.innerHTML = i+ ': 这是第' +  i + '个项目';
//   oLi.className = 'list-item';
//   oUI.appendChild(oLi)
// }
//上面这部分代码有个问题,每次 创建Li的时候都要回流一次(就是要测算某些元素直接的距离和几何关系,然后渲染)
//每调用一次appendChild就要计算一下几何数据
//下面看解决方法：
// var oDiv = document.createElement('div');
// for (let i = 0; i < 1000; i++) {
//   var oLi = document.createElement('li');
//   oLi.innerHTML = i + ': 这是第' + i + '个项目';
//   oLi.className = 'list-item';
//   // oUI.appendChild(oLi)
//   oDiv.appendChild(oLi)//注意:这里的oDiv不在节点树里面!!!
// }
// oUI.appendChild(oDiv)

//但是上面的代码仍然还有一个不足:
//多了个div节点,因为li就是要在ul里面，不需要div
//终极解决方案:
// createDocumentFragment()
var oFrag = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  var oLi = document.createElement('li');
  oLi.innerHTML = i + ': 这是第' + i + '个项目';
  oLi.className = 'list-item';
  // oUI.appendChild(oLi)
  oFrag.appendChild(oLi)//注意:这里的oFrag不在DOM节点树里面!!!
}
oUI.appendChild(oFrag);