我也来参与一下:
解与说明:
1. 添加类.
- 经典写法 `node.className = node.className + " bar"`
- 新式写法 (IE10+) `node.classList.add("bar")`
拓展:
`classList` 是一个只读属性,指向 `DOMTokenList`
还有如下方法: `add(String [,String])`, `remove(String[,String])`,`item(Number)`,`toggle(String[, force])`
2. 删除第 10 个 `<li>`
- 经典写法:
```js
var lilist = document.getElementsByTagName("li");
var li10 = lilist[9];
li10.parentNode.removeChild(li10);
```
- 新式写法:
```js
var li10 = document.querySelector("li:nth-of-type(10)");
li10.parentNode.removeChild(li10);
```
需要注意的是: nth 是以 1 based index. 而 数组是 0 based index.
3. 在第 500 个 <li> 后面增加一个 <li> , 其文字内容为 <
ex.noerr.eu.org />
```js
var v2exNode = document.createElement("li");
v2exNode.textContent = "<
V2EX.com />";
var li501 = document.getElementsByTagName("li")[500];
li501.parentNode.insertBefore(v2exNode,li501);
```
值得注意的是, DOM API 只有 insertBefore 没有 insertAfter 所以要先取到第 501 个.
4. 点击任意 <li> 弹窗显示其为当前列表中的第几项。
```js
var ul = document.getElementById("list");
ul.addEventListener("click",function(event){
var target = event.target;
if(target.nodeName === "LI"){
var parentUl = target.parentNode;
var children = parentUl.childNodes;
var count = 0;
for(var i = 0; i < children.length;i++){
var node = children[i];
if(node.nodeName === "LI"){
count += 1;
if(node === target){
alert("是当前第"+(count)+"项");
break;
}
}
}
}
});
```
我这里 给 `ul#list` 添加 click 方法然后判断 `target` 来实现的.
因为我不想添加太多的 eventListener.
值得注意的是: 需要通过 `childNodes` 来遍历. 因为 `li` 中还是可以再嵌套 `ul>li`
附: 生成测试 html 的脚本:
```py
# -*- coding: utf-8 -*-
import random
__author__ = 'banxi'
index = -1
def make_index():
global index
index += 1
if random.uniform(1, 10) > 8:
return '<span>#%d</span>' % index
else:
return "#%d" % index
def make_ul():
html = '<ul>'
for i in range(0, random.randint(1, 5)):
html += make_li()
html += '</ul>'
return html
def make_li():
if random.uniform(1, 10) < 1.5:
inner_html = make_ul()
else:
inner_html = make_index()
return "<li>%s</li>" % inner_html
if __name__ == '__main__':
import codecs
with codecs.open('ele.html', 'w', encoding='utf-8') as f:
html = '<ul id="list" class="foo">'
while index < 100000:
html += make_li()
html += "</ul>"
f.write(html)
```