1. 文档对象模型(DOM): 表示HTML文档的树状结构,通过DOM可以访问和修改文档的内容和结构。
2. 节点(Node): DOM树的基本构建块,可以是元素、属性、文本等。
3. 元素节点: 表示HTML文档中的标签,如<div>、<p>等。
4. 属性节点: 表示HTML元素的属性,如id、class等。
5. 文本节点: 表示HTML文档中的文本内容,通常是在元素节点中的文本。
6. 父节点、子节点、兄弟节点: 描述节点之间的关系,一个节点可以有父节点、子节点和兄弟节点。
7. 获取元素: 可以使用JavaScript通过ID、标签名、类名等方式获取HTML元素。
// 通过ID获取元素
var elementById = document.getElementById('myElement');
// 通过标签名获取元素
var elementsByTagName = document.getElementsByTagName('div');
// 通过类名获取元素
var elementsByClassName = document.getElementsByClassName('myClass');
8. 操作元素: 可以通过DOM操作来修改元素的内容、属性等。
// 修改元素内容
elementById.innerHTML = '新的内容';
// 修改元素属性
elementById.setAttribute('class', 'newClass');
9. 事件处理: 可以通过DOM为元素添加事件监听器,实现与用户交互的响应。
// 添加点击事件监听器
elementById.addEventListener('click', function() {
alert('点击事件触发了!');
});
10. 创建和插入元素: 可以使用DOM动态创建新的元素,并将其插入到文档中。
// 创建新的元素
var newElement = document.createElement('div');
// 将新元素插入到父元素中
elementById.appendChild(newElement);
这些是HTML DOM的一些基本概念和操作,通过了解和使用这些概念,你可以更好地操作和交互HTML文档。
转载请注明出处:http://www.zyzy.cn/article/detail/4356/HTML