Q1:面向?qū)ο螅浚?br>
Q2：API??
Q3：element.children兼容中nodeType ??
Q4：getElementByClass兼容classNameStr = ' ' + element.className + ' ';中【‘ ’】什么意思？？
?獲取節(jié)點(diǎn)
?創(chuàng)建節(jié)點(diǎn)
?修改節(jié)點(diǎn)
?插入節(jié)點(diǎn)
?刪除節(jié)點(diǎn)
?innerHTML
一、獲取節(jié)點(diǎn)
1、獲取節(jié)點(diǎn)
為什么用DOM接口來獲取節(jié)點(diǎn)而不是直接用這種方式？
節(jié)點(diǎn)關(guān)系聯(lián)系很緊密，一些微小的變化都會(huì)導(dǎo)致節(jié)點(diǎn)關(guān)系的變化，可維護(hù)性很差。
通過接口獲取節(jié)點(diǎn)
2、getElementById
3、getElementsByTagName
collection動(dòng)態(tài)變化
獲取所有后代元素
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人在學(xué)習(xí)該課程:</h2>
<ul>
<li class="user">
<a href="/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不是動(dòng)態(tài)的
Q2:如何兼容？？
小結(jié)
增加一個(gè)
需求拆解
二、創(chuàng)建節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
三、修改節(jié)點(diǎn)
下面常用，但不是W3C規(guī)范
這兩者使用方法基本一致
element.textContent
修改節(jié)點(diǎn)內(nèi)容
element.innerText 不規(guī)范，ff不支持。
兼容方案
四、插入節(jié)點(diǎn)
appendChild在后面插入
insertBefore制定元素子節(jié)點(diǎn)前插入
五、刪除節(jié)點(diǎn)
removeChild
六、innerHTML
添加lifeng
用innerHTML可以提高效率
用innerHTML添加lifeng
innerHTML僅建議用于新節(jié)點(diǎn)
直接用ul.innerHTML會(huì)出現(xiàn)什么問題？？
內(nèi)存泄漏、安全問題
