<!-- DOM(Document Object Model)，即文档对象模型，
是一种用于表示HTML和XML文档的结构，并提供了一种使程序和脚本能够访问、更新文档内容、结构和样式的标准方法。
DOM将网页中的每个部分（标签、属性、文本等）都视为一个节点，形成一个节点树，使得开发者可以通过编程方式动态地查询、修改页面内容或结构。
以下是关于DOM的一些关键概念和操作：
节点(Node)：DOM中最基本的单位，每个HTML元素、属性、文本等都是一个节点。主要有以下几种类型：
元素节点（Element Node）
文本节点（Text Node）
属性节点（Attribute Node）
文档节点（Document Node）
文档类型节点（Document Type Node）
节点关系：节点之间存在父子、兄弟等关系，可以通过属性访问这些关系：
parentNode：返回当前节点的父节点。
childNodes：返回一个NodeList对象，包含当前节点的所有子节点。
firstChild 和 lastChild：分别返回第一个和最后一个子节点。
nextSibling 和 previousSibling：分别返回下一个和上一个同级节点。
选择节点：有多种方法可以用来选择文档中的节点，以便进行操作：
getElementById(id)：根据ID选择元素。
getElementsByClassName(className)：根据类名选择元素集合。
getElementsByTagName(tagName)：根据标签名选择元素集合。
querySelector(selector)：返回文档中匹配指定CSS选择器的第一个元素。
querySelectorAll(selector)：返回文档中匹配指定CSS选择器的所有元素集合。
修改节点：
添加节点：可以使用appendChild(), insertBefore()等方法向文档树中添加新节点。
删除节点：使用removeChild()方法从其父节点中删除一个子节点。
修改属性和内容：可以直接修改节点的属性值，如element.setAttribute('attributeName', 'value')，或者修改文本内容，如textContent或innerText属性。
事件处理：DOM允许为文档中的元素绑定事件监听器，以便在特定事件发生时执行JavaScript代码，如addEventListener()和removeEventListener()方法。
通过DOM，开发者可以非常灵活地操控网页内容，实现动态效果、数据交互等复杂功能。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="div1" style="background-color: aqua;width: 200px;height: 200px;">这是div1块</div>
<button class="button1" οnclick="add()">点击添加一个div块</button>
<div id="div2">
<p class="p1">这是p1</p>
<p class="p2">这是p2</p>
<p class="p3">这是p3</p>
</div>
<span class="p4" style="font-size: 28px; color: aquamarine;">这是一个p标签</span>
</div>
</body>
</html>
<script>
// 操作一个DOM节点实际上就是这么几个操作：
// 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
// document.getElementById('div1').innerHTML = '这是div1块，更新了内容';//取消注释这条就会更新
// 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
var div1 = document.getElementById('div1');
var p=document.getElementsByTagName('p');
for(var i=0;i<p.length;i++){
var a=p[i].innerHTML+","
console.log(a)
}
// 这是p1,
// 这是p2,
// 这是p3,
// 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
function add(){
var newDiv=document.createElement('div');
newDiv.style.backgroundColor = 'aqua';
newDiv.style.width = '200px';
newDiv.style.height = '200px';
newDiv.textContent = '这是一个新div块';
// 将新div添加到body中
newDiv.style.margin="40px"
document.body.appendChild(newDiv);
}
// 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
var element=document.querySelector('.p4')//element变量现在就指向了页面中第一个拥有类名p4的DOM元素。
// 注意getElementsByClassName返回的是一个集合
// element.parentNode.removeChild(element);取消注释这条就会删除类名为p4的段落
</script>
扫一扫
3961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
