前端第六次培训班

DOM部分的学习

文章目录

• • DOM部分的学习
• 一、DOM是什么？
• 二、JavaScript HTML DOM
• • JavaScript - HTML DOM 方法
  • • 2.1.1获取元素
    • 2.1.2 改变HTML元素
    • 2.1.3 添加和删除元素
    • 2.1.4 添加事件处理程序
    • 2.2 HTML DOM 文档
  • 事件基础
  • 操作元素
  • 节点操作

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM是什么？

DOM（Document Object Model——文档对象模型），是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
W3C DOM 标准被分为3个不同的部分：

• Core DOM - 所有文档类型的标准模型
• XML DOM - XML 文档的标准模型
• HTML DOM - HTML 文档的标准模型

二、JavaScript HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素
• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树:

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

---

JavaScript - HTML DOM 方法

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

DOM 编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）

实例：

在上述例子中，getElementById 是方法（用id="demo"查找到P元素），而 innerHTML是属性（改变了p元素的内容）。

2.1.1获取元素

根据ID获取元素
使用getElementByld()方法获取带有ID的元素对象

语法：

var element = document.getElementById(id);

参数：

• element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null。
• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。

返回值：

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

示例：

根据标签名获取元素
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

语法：

var elements = document.getElementsByTagName(name);

参数：

• element是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection。
• name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

返回值：

获取过来元素对象的集合，以伪数组的形式储存。

示例：

Hello World!
getElementsByTagName 方法

根据类名获取元素
使用getElementsByClassName方法可以根据类名获取元素对象。

语法：

var elements = document.getElementsByClassName(names);

参数：

• element是一个实时集合，包含了找到的所有元素。
• names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔。
• getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。

返回值：

返回一个包含了所有指定类名的子元素的类数组对象。

示例：

DOM
 getElementsByClassName 方法。

法2：使用querySelectorAll 方法可以按查询选择器查找 HTML 元素。（效果同上）
语法：

elementList = parentNode.querySelectorAll(selectors);

参数：

• 选择器需要加符号，例.box #nav
• 如果指定的 选择器 不合法，会抛出错误。如$(“##div”)

返回值：

返回指定选择器的所有元素对象集合。

示例：

DOM 
 querySelectorAll 方法。

通过CSS选择器查找HTML元素
如果需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用querySelectorAll()方法。

本例返回 class=“intro” 的所有 p元素列表：

按查询选择器查找 HTML 元素

Hello World!

DOM 很有用。

本例演示 querySelectorAll 方法。

获取body元素
document.body返回的是body对象。
获取html元素
document.documentLiement返回html元素对象

2.1.2 改变HTML元素

方法	描述
element.innerHTML = new html content	改变元素的内容
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

2.1.3 添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流(不能在文档加载后使用)

2.1.4 添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

2.2 HTML DOM 文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

HTML DOM Document 对象
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

查找 HTML 对象

---

事件基础

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

事件的三要素

• 事件源 事件被触发的对象

• 事件类型 事件触发机制（鼠标点击onclick/鼠标经过onmouseover/键盘按下onkeydown）

• 事件处理程序 通过一个函数赋值的方式完成

执行事件步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

事件	触发条件
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onclick	点击左键
onmouseover	鼠标经过
onmouseout	鼠标移开
onmousedown	鼠标按下
onmouseup	鼠标弹起

示例：

请点击这里！

---

操作元素

JavaScript 的DOM操作能改变网页内容、结构、样式。
DOM操作能改变元素中的内容、属性等。

改变元素内容
Element.innerText 属性(不识别html标签，去除空格和换行）

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerText = '2022-5-20'
}

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。（效果同上）

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function (){
    div.innerHTML = '2022-5-20'
}

常用元素属性操作

src、href、title、alt等

var ldh = document.getElementByld('ldh');
var zxy = document.getElementByld('zxy');
var img = document.querySelector('img');
zxy.onclick = function(){
    img.src = 'image/zxy.ipg';
}
ldh.onclick = function(){
    img.src = 'image/ldh.ipg';
}

表单元素属性操作

type、value、checked、selected、disabled

var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function (){
    input.value = '被点击了';
    btn.disabled = true;
}

样式属性操作
element.style 行内样式操作

var div = document.querySelector('div');
div.onclick = function (){
    this.style.backgroundColor = 'purple';
}

• 样式采用驼峰命名法
• 产生的是行内样式，CSS权重比较高

element.className 类名样式操作

var div = document.querySelector('div');
div.onclick = function (){
    this.className = 'change';
}

自定义属性操作

div.getAttribute('index'); //获取自定义属性

div.setAttribute('index',2);//设置自定义属性

div.removeAttribute('index');//移除自定义属性

//自定义属性命名

---

节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

一般地，节点至少有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性。

• 元素节点 nodeType为 1（主要）
• 属性节点 nodeType为 2
• 文字节点 nodeType为 3（文本节点包括文字、空格、换行等）

节点层级

1.父级节点（parentNode）

var div = document.querySelector('.div');
console.log(div.parentNode);

• 返回最近一个父节点，如果没有返回null

2.子节点（childNodes）

var ul = document.querySelector('ul');
console.log(ul.childNode);

• 返回值里包含了所有子节点包括元素节点，文本节点，parentNode.children只得到元素节点
• parentNode.firstchild获取第一个子元素（包括文本节点和元素节点）
• parentNode.lastchild获取最后一个子元素（包括文本节点和元素节点）
• parentNode.firstElementchild获取第一个子元素（只有元素节点）
• parentNode.lastElementchild获取最后一个子元素（只有元素节点）

3.兄弟节点

• node.nextSibling下一个兄弟关系的节点（包括文本和元素）
• node.previousSibling上一个兄弟关系的节点（包括文本和元素）
• node.nextElementSibling下一个兄弟关系的节点（只有元素节点）
• node.previousElementSibling上一个兄弟关系的节点（只有元素节点）

创建节点

document.createElement(‘tagName’);

添加节点(在后面）

node.appendChild(child);

添加节点(在前面）

node.insertBefore(child,指定元素)；

这是一段文字。
这是另一段文字。

删除节点

node.removeChild(child)

var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);

复制节点

node.cloneNode()

var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(ture);
ul.appendChild(lili);

• 括号参数为空或false，只复制标签，不复制里面的内容
• 括号参数为true，复制标签，复制里面的内容

---