
本文共 5908 字,大约阅读时间需要 19 分钟。
DOM ���������������������������
1. DOM ������������
1.1 ���������������������������
DOM ���������������������������������������������������������������������������������������������������������������������������������
// ������������console.log(div.nodeType); // 1 ������ Element������������������console.log(div.nodeName); // 'DIV' ������������console.log(div.nodeValue); // ������������������������������// ������������������console.log(div.nextSibling); // ���������������������console.log(div.previousSibling); // ���������������������// ������������������console.log(div.parentElement); // ������������console.log(div.parentNode); // ������������// ������������������console.log(div.children); // ������������������������������console.log(div(childNodes)); // ���������������������������������������������������������������// ���������������var li = document.querySelector('li');console.log(li.children[0]); // ������������������������������������������console.log(li.firstChild); // ���������������������������������������������������������������
1.2 ���������������������������������
���������������������������������������������������������������������������������������������
// ���������������var parent = document.querySelector('.parent');var child = document.createElement('div');child.textContent = '���������������������';parent.appendChild(child);// ���������������var insertingChild = document.createElement('div');insertingChild.style.backgroundColor = 'red';parent.insertBefore(insertingChild, parent.firstChild);// ���������������parent.removeChild(parent.firstChild);// ���������������var clonedChild = parent.firstChild.cloneNode();parent.appendChild(clonedChild);
1.3������������������
������������������������������������������������������������������������������������
// ���������������������������console.log(div.nextElementSibling); // ���������������������������console.log(div.next_sibling); // ������������������������������������������������������������// ���������������������������console.log(div.previousElementSibling); // ���������������������������console.log(div.previousSibling); // ������������������������������������������������������������// ���������������������������������function getNextElementSibling(element) { var el = element; while (true) { if (el.nextElementSibling) { return el.nextElementSibling; } else { el = el.nextElementSibling; } }}
2. ���������������������
���������������������������������������������������������������������������������������������
// ������������������var li = document.createElement('li');li.textContent = '���������������������';document.querySelector('ul').appendChild(li);// ������ innerHTML ������������var div = document.createElement('div');div.innerHTML = `
������
������
`;document.body.appendChild(div);// ������ document.write ���������������������������document.write('��������� document.write ���������������');3. ������������������
������������������������������������������������������������������������������������
// ������������var node = document.querySelector('.������������');node.parentNode.removeChild(node);// ������������������������������������while (node.hasChildNodes()) { node.removeChild(node.firstChild);}
4. ���������������������
������������������������ Properties ��� Structure������������������������������
// ���������������var clonedNode = sourceNode.cloneNode(true);// ���������������var shallowClonedNode = sourceNode.cloneNode();// ���������������������var������������ = sourceNode.cloneNode(true);������������.style.backgroundColor = 'red';sourceNode.appendChild(������������);
5. ������������������������������������������
���������������������������������������������������
var studentData = [ { name: '������', score: 95 }, { name: '������', score: 90 }, { name: '������', score: 88 }];var table = document.querySelector('table');var tbody = table.querySelector('tbody');// ������������var thead = document.createElement('thead');thead.innerHTML = ` ������ ������ `;table.appendChild(thead);// ������������studentData.forEach(function(student) { var tr = document.createElement('tr'); tr.innerHTML = ` ${student.name} ${student.score} `; tbody.appendChild(tr);});// ���������������var deleteBtns = document.querySelectorAll('td a');deleteBtns.forEach(deleteBtn => { deleteBtn.addEventListener('click', function() { this.parentElement.parentElement.removeChild(this.parentElement); });});
6. ���������������������������������
���������������������������������������������������������������������
// using document.createElementvar createDivs = [];for (var i = 0; i < 1000; i++) { var div = document.createElement('div'); div.style.width = '100px'; div.style.height = '100px'; document.body.appendChild(div);}// using innerHTMLvar divsByInner = [];for (var i = 0; i < 1000; i++) { divsByInner.innerHTML += ' ';}// using writedocument.write('
���������div');������������������������������������ innerHTML ��������������������������������������������� createElement ���������
7. ������������������������������������������������
���������������������������������������������
// ������������var nav = document.querySelector('.nav');// ������������������for (var i = 0; i < nav.children.length; i++) { var li = nav.children[i]; li.onmouseover = function() { this.children[1].style.display = 'block'; }; li.onmouseout = function() { this.children[1].style.display = 'none'; };}
������
DOM ������������������������������������������������������������������������������������������������������������������������������������������������������������������
发表评论
最新留言
关于作者
