修改页面内容
要求:
页面上有个空的无序列表节点,用 <ul></ul>
表示,要往列表中插入 3 个 <li>
,每个列表项的文本内容是列表项的插入顺序,取值 1, 2, 3,怎么用原生的 JS 实现这个需求?同时约定,为方便获取节点引用,可以根据需要为 <ul>
节点加上 id 或者 class 属性。
我的做法是
html
<ul id="list"></ul>
js
var ul = document.getElementById('list');
for(var i = 0; i < 3; i++) {
var li = document.createElement('li');
var text = document.createTextNode(i+1);
li.appendChild(text);
ul.appendChild(li);
}
我的解法正是该文章中的第一类解法,还有下面一种方式。
var ul = document.getElementById('list');
var lis = [];
for(var i = 0; i < 3; i++) {
var li = '<li>'+(i+1)+'</li>';
lis.push(li);
}
ul.innerHTML = lis.join('');
但这上面两个答案都不是最好的,对文章里提出的几点,进行改进。
//包含在声明即执行
{() => {
//给节点类变量加上‘nd’
var ndul = document.getElementById('list');
//对节点进行检查,提高容错性
if(!ndul) {
return;
}
for(var i = 0; i < 3; i++) {
var ndli = document.createElement('li');
var ndtext = document.createTextNode(i+1);
ndli.appendChild(ndtext);
ndul.appendChild(ndli);
}
})();
添加响应事件
要求:
现在页面上有了内容,接下来添加交互。问题:要当每个 <li>
被单击的时候 alert 里面的内容,该怎么做?
我的做法是:
var ul = document.getElementById('list');
for(var i = 0; i < 3; i++) {
var li = document.createElement('li');
var text = document.createTextNode(i+1);
li.appendChild(text);
//在此处添加一个监听事件
li.addEventListener('click', function(e){
alert(this.innerText);
})
ul.appendChild(li);
}
插入的数据量变大后
如果要插入的 <li>
是 100 个,该怎么解决?
我的做法是
var ul = document.getElementById('list');
for(var i = 0; i < 100; i++) {
var li = document.createElement('li');
var text = document.createTextNode(i+1);
li.appendChild(text);
//不要在此处设置li的监听函数了,这样将会监听100个类似的监听函数
ul.appendChild(li);
}
//使用事件委托机制,即将监听事件绑定在ul上,使用e.target确定点击目标
ul.addEventListener('click', function(e){
alert(e.target.innerText);
});
DOM树的遍历
深度优先搜索,使用递归即可
//deep_search
function deepSearch(node) {
print(node);
for(var i = 0; i < node.children.length; i++) {
deepSearch(node.children[i]);
}
}
function print(node) {
console.log(node.tagName, node.className);
}
deepSearch(document.querySelector('.root'));
广度优先搜索
//wide_search
function wideSearch(root) {
const queue = [root];
print(root);
while(queue.length != 0) {
var node = queue.shift();
if(node.children.length == 0) {
continue;
}
for(var i = 0; i < node.children.length; i++) {
queue.push(node.children[i]);
}
}
}
wideSearch(document.querySelector('.root'));