初识DOM
目录
前言:
1.初识DOM:
1.1DOM树:
1.2节点（Node）:
1.2.1元素节点：
1.2.2属性节点：
1.2.3文本节点：
1.3Document对象:
2.操作网页元素:
2.1找出元素：
2.1.1document.getElementById(id)：
2.1.2document.getElementsByClassName(className)：
2.1.3document.querySelector(selector)：
2.1.4document.querySelectorAll(selector)：
2.2操作元素：
2.2.1element.addEventListener(event, function)：
2.2.2element.setAttribute(name, value)：
2.2.3element.style.property：
2.2.4element.innerHTML：
3.DOM元素的选中方式:
4.DOM操作文本内容:
4.1innerText:
4.2innerHTML:
5.DOM操作元素属性
6.DOM操作元素样式
7.交互事件(event)
7.1.1获取事件对象：
结语:
前言:
今天我们来学习DOM是一个将HTML、CSS和JavaScript连接在一起的桥梁，允许开发者通过JavaScript来动态地修改网页内容和样式。
1.初识DOM:
DOM，全称 Document Object Model（文档对象模型），是一个跨平台和语言独立的接口，允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。简单来说，DOM 将网页文档转换为一个由对象组成的结构，这些对象可以通过编程方式进行访问和修改。
1.1DOM树:
当浏览器加载一个HTML文档时，它会解析文档并创建一个内部的表示，这个表示就是一个树形结构，称为DOM树。这个树由节点（nodes）组成，每个节点代表文档中的一个部分（例如，元素、属性、文本等）。
1.2节点（Node）:
1.2.1元素节点：
代表HTML元素，如<div>、<p>、<a>等。
1.2.2属性节点：
代表元素的属性，如class、id、src等。
1.2.3文本节点：
包含元素的文本内容。
每个节点都是一个对象，拥有属性和方法。例如，元素节点有一个innerHTML属性，可以用来获取或设置元素的HTML内容。
1.3Document对象:
代表整个HTML文档，并且是DOM树的根节点。它提供了许多方法和属性来访问和操作DOM树中的其他节点。
2.操作网页元素:
2.1找出元素：
使用各种选择器方法来定位页面上的元素。例如：
2.1.1document.getElementById(id)：
通过元素的ID选择元素。
2.1.2document.getElementsByClassName(className)：
通过类名选择元素。
2.1.3document.querySelector(selector)：
返回文档中匹配指定CSS选择器的第一个Element素。
2.1.4document.querySelectorAll(selector)：
返回文档中匹配指定CSS选择器的所有Element元素的NodeList（静态的）。
2.2操作元素：
一旦找到了元素，就可以使用JavaScript来改变它们的内容、样式或属性。例如：
2.2.1element.addEventListener(event, function)：
为元素添加事件监听器。
2.2.2element.setAttribute(name, value)：
设置元素的属性。
2.2.3element.style.property：
获取或设置元素的CSS样式属性。
2.2.4element.innerHTML：
获取或设置元素的HTML内容。
3.DOM元素的选中方式:
Element : 元素 语法采用的是小驼峰命名法(第一个词不变,第二个单词开始首字母全部大写)
3.1通过ID获取元素:
var element = document.getElementById('elementId');这将返回ID为'elementId'的单个DOM元素。ID应该在HTML文档中是唯一的，所以这个方法总是返回单个元素。
3.2通过类名获取元素:
var elements = document.getElementsByClassName('className');这将返回一个HTMLCollection，包含所有类名为'className'的DOM元素。由于可能有多个元素具有相同的类名，因此返回的是一个集合。
3.3通过标签名获取元素
var elements = document.getElementsByTagName('tagName');这将返回一个HTMLCollection，包含所有标签名为'tagName'的DOM元素。例如，如果你想获取所有的<p>标签，你可以使用getElementsByTagName('p')。
处理HTMLCollection
找到具有最大offsetTop属性的元素，你可以这样做：
var elements = document.getElementsByClassName('className');
var maxOffsetTopElement = null;
var maxOffsetTop = -Infinity; for (var i = 0; i < elements.length; i++) { if (elements[i].offsetTop > maxOffsetTop) { maxOffsetTop = elements[i].offsetTop; maxOffsetTopElement = elements[i]; }
} // maxOffsetTopElement 现在是具有最大 offsetTop 的元素4.DOM操作文本内容:
4.1innerText:
此属性用于获取或设置元素内部的文本内容，不包括任何HTML标签。当设置innerText时，所有HTML标签都将被视为普通文本。
var element = document.getElementById('myElement');
var textContent = element.innerText; // 获取文本内容
element.innerText = 'New text content'; // 设置文本内容4.2innerHTML:
此属性用于获取或设置元素内部的HTML内容。这意味着您可以插入HTML标签，并且浏览器会解析并呈现这些标签。
var element = document.getElementById('myElement');
var htmlContent = element.innerHTML; // 获取HTML内容
element.innerHTML = '<p>New HTML content</p>'; // 设置HTML内容5.DOM操作元素属性
您已经列出了如何获取和设置元素属性的基本方法。这些操作允许您直接修改HTML元素的属性，如src、class（通过className在JavaScript中访问）、href等。
var image = document.getElementById('myImage');
var imageSrc = image.src; // 获取图片的src属性
image.src = 'newImage.jpg'; // 设置图片的src属性 var link = document.getElementById('myLink');
var linkHref = link.href; // 获取链接的href属性
link.href = 'https://www.example.com'; // 设置链接的href属性6.DOM操作元素样式
通过style属性，您可以直接在JavaScript中修改元素的CSS样式。对于包含连字符的CSS属性（如background-color），在JavaScript中需要使用驼峰命名法（如backgroundColor）。
var element = document.getElementById('myElement');
element.style.width = '200px'; // 设置元素宽度
element.style.backgroundColor = 'blue'; // 设置背景颜色7.交互事件(event)
交互事件是用户与网页进行交互时触发的动作，比如键盘按键、鼠标点击、表单选中、文本输入等。JavaScript 允许我们监听这些事件，并在事件触发时执行特定的功能或代码。
7.1事件流程:
7.1.1获取事件对象：
首先，需要确定我们要监听哪种交互事件，是鼠标事件、键盘事件还是其他类型的事件。
7.1.2绑定监听器：
然后，我们需要给这个事件对象绑定一个监听器。当事件触发时，这个监听器会调用一个函数来执行相应的功能。
例如，如果我们有一个ID为"box"的HTML元素，并且我们想要在用户点击这个元素时执行某个功能，我们可以这样写：
var box = document.getElementById('box');
box.onclick = function() { // 在这里执行点击后要做的功能 console.log('Box was clicked!');
};在这个例子中，box 是事件对象，onclick 是我们要监听的事件，而 function() {...} 是事件触发时要执行的函数。
结语:
好了今天我们的关于DOM的学习就先讲到这里了,DOM 是前端开发中非常重要的一部分，它允许开发者通过JavaScript与网页进行交互，实现动态内容和丰富的用户体验。这些都还只是我个人的学习成果如果有所遗漏欢迎大家的指正。
