初识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与网页进行交互，实现动态内容和丰富的用户体验。这些都还只是我个人的学习成果如果有所遗漏欢迎大家的指正。