Element对象 - [: '玩转Javascript DOM接口' |cut:tmp.cut_limit :]

参考答案

1.1

var a = document.getElementById('a');
console.log(a.children);

1.2

var a = document.getElementById('a');
var children = a.children;
var i;
for (i = 0; i < children.length; i++) {
  var item = children[i];
  console.log(item.tagName);
}

1.3

解法1

var a = document.getElementById('a');
/*只要a中还有元素*/
while (a.children.length) {
  /*删除最后一个元素*/
  a.removeChild(a.lastChild);
}

解法2

var a = document.getElementById('a');
/*只要a中有最后一个元素*/
while (a.lastChild) {
  /*删除最后一个元素*/
  a.removeChild(a.lastChild);
}

解法3

var a = document.getElementById('a');
a.innerHTML = '';

1.4

var a = document.getElementById('a');
var children = a.childNodes;
var i;

for (i = 0; i < children.length; i++) {
  var item = children[i];
  /*如果当前节点不是<div>*/
  if (item.nodeName !== 'DIV') {
    /*删除当前节点，注意此时children的长度已经变了，
    相对应的，后面所有元素的索引都会减一*/
    a.removeChild(item);
    /*为了防止下次迭代跳过当前这个索引，给索引减一*/
    i--;
  }
}

2.1

var a = document.getElementById('a');
console.log(a.childElementCount);

2.2

var a = document.getElementById('a');
console.log(a.classList);

2.3

var a = document.getElementById('a');
a.classList.add('d');
/*
* 需要加多个类可以将类名分别传进去
* a.classList.add('e', 'f');
* */

2.4

var a = document.getElementById('a');
a.classList.remove('c');
/*
* 需要加多个类可以将类名分别传进去
* a.classList.remove('c', 'b');
* */

练习