JavaScript学习笔记(4)
发布日期:2021-05-10 09:16:52 浏览次数:22 分类:精选文章

本文共 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.createElement
var 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 innerHTML
var divsByInner = [];
for (var i = 0; i < 1000; i++) {
divsByInner.innerHTML += '
';
}
// using write
document.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 ������������������������������������������������������������������������������������������������������������������������������������������������������������������

上一篇:网页同步交互和异步交互的区别?
下一篇:JavaScript学习笔记(3)

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年04月20日 23时48分38秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章