Q1:面向对象？？
Q2：API??
Q3：element.children兼容中nodeType ??
Q4：getElementByClass兼容classNameStr = ' ' + element.className + ' ';中【‘ ’】什么意思？？
▪获取节点
▪创建节点
▪修改节点
▪插入节点
▪删除节点
▪innerHTML
一、获取节点
1、获取节点
为什么用DOM接口来获取节点而不是直接用这种方式？
节点关系联系很紧密，一些微小的变化都会导致节点关系的变化，可维护性很差。
通过接口获取节点
2、getElementById
3、getElementsByTagName
collection动态变化
获取所有后代元素
4、getElementsByClassName
兼容
Q1:如何兼容？？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<style>
html, body,h2, ul, li{margin: 0;padding: 0;}
body{font-family: arial;}
#users{margin: 30px;width: 210px;box-shadow: 0px 1px 2px #bbb;}
h2{height: 50px;line-height: 50px;padding-left: 20px;font-size: 18px;border-bottom: 1px solid #dfdfdf;}
ul{padding: 10px 0;overflow: hidden;}
.user{float: left;width: 50px;margin: 10px;list-style: none;}
.user a{color: #666;text-decoration: none;font-size: 12px;}
</style>
</head>
<body>
<div id="users">
<h2>8882人在学习该课程:</h2>
<ul>
<li class="user">
<a href="//www.greatytc.com/user/1">Satoshi</a>
</li>
<li class="user">
<a href="/user/2">春来草青</a>
</li>
<li class="user last">
<a href="/user/3">Kash</a>
</li>
</ul>
</div>
<script>
function getElementsByClassName(element, names) {
if (element.getElementsByClassName) {
return element.getElementsByClassName(names);
} else {
var elements = element.getElementsByTagName('*');
var result = [];
var element,
classNameStr,
flag;
names = names.split(' ');
for (var i = 0; element = elements[i]; i++) {
classNameStr = ' ' + element.className + ' ';
flag = true;
for (var j = 0, name; name = names[j]; j++) {
if (classNameStr.indexOf(' ' + name + '') == -1) {
flag = false;
break;
}
}
if (flag) {
result.push(element);
}
}
return result;
}
// }
var users = getElementsByClassName(document, 'user');
alert(users.length + ' users');
// var lastUser = getElementsByClassName(document, 'user last')[0];
// alert('last user is ' + lastUser.innerText);
</script>
</body>
</html>
5、querySelector/All
list不是动态的
Q2:如何兼容？？
小结
增加一个
需求拆解
二、创建节点
创建节点
创建节点
三、修改节点
下面常用，但不是W3C规范
这两者使用方法基本一致
element.textContent
修改节点内容
element.innerText 不规范，ff不支持。
兼容方案
四、插入节点
appendChild在后面插入
insertBefore制定元素子节点前插入
五、删除节点
removeChild
六、innerHTML
添加lifeng
用innerHTML可以提高效率
用innerHTML添加lifeng
innerHTML仅建议用于新节点
直接用ul.innerHTML会出现什么问题？？
内存泄漏、安全问题
