UI设计师-前端基础-JavaScript基础_JavaScript与AJAX.docxVIP

PAGE1

PAGE1

DOM操作：文档对象模型

1引言

文档对象模型（DocumentObjectModel，简称DOM）是JavaScript中用于描述和操作HTML文档的一种树型结构模型。通过DOM，我们可以获取、修改、添加或删除HTML元素，从而实现对网页内容和结构的动态控制。在现代Web开发中，DOM操作是不可或缺的技能，它让网页变得互动和动态。

2DOM的基本结构

DOM将HTML文档视为一棵树，其中每个HTML元素都是树上的一个节点。树的根节点通常是文档的html元素，所有其他的节点——如元素节点、文本节点、属性节点等——都是根节点的子节点或后代节点。这种树型结构使得我们可以通过JavaScript轻松地访问和操作这些节点。

3获取DOM元素

在JavaScript中，我们有多种方法可以获取DOM元素：

document.getElementById()：通过元素的ID获取元素节点。

document.getElementsByClassName()：通过元素的class名获取一个包含所有匹配元素的NodeList。

document.getElementsByTagName()：通过元素的标签名获取一个包含所有匹配元素的HTMLCollection。

document.querySelector()：返回文档中匹配指定CSS选择器的第一个元素。

document.querySelectorAll()：返回文档中匹配指定CSS选择器的所有元素的NodeList。

3.1示例代码

//获取ID为myDiv的元素

vardivElement=document.getElementById(myDiv);

divElement.style.color=red;//修改元素的文字颜色

//获取所有class为myClass的元素

varclassElements=document.getElementsByClassName(myClass);

for(vari=0;iclassElements.length;i++){

classElements[i].style.backgroundColor=blue;//修改所有元素的背景颜色

}

//获取所有div元素

vardivElements=document.getElementsByTagName(div);

for(vari=0;idivElements.length;i++){

divElements[i].style.border=1pxsolidblack;//添加边框

}

//使用CSS选择器获取元素

varpElement=document.querySelector(p);

pElement.style.fontWeight=bold;//修改p元素的字体粗细

//获取所有p元素

varpElements=document.querySelectorAll(p);

pElements.forEach(function(element){

element.style.fontStyle=italic;//将所有p元素的字体样式设置为斜体

});

4修改DOM元素

DOM元素可以被修改，包括它们的属性、样式和内容。

4.1示例代码

//修改元素的属性

varlink=document.getElementById(myLink);

link.href=/newurl;//修改链接地址

//修改元素的样式

link.style.color=green;//修改链接的颜色

//修改元素的内容

varparagraph=document.getElementById(myParagraph);

paragraph.innerHTML=这是新的段落内容;//更改段落内容

5添加DOM元素

我们可以通过以下方法在DOM中添加新的元素：

document.createElement()：创建一个新的HTML元素。

element.appendChild()：将一个子节点添加到指定元素的子节点列表的末尾。

element.insertBefore()：在指定子节点前插入一个新的子节点。

5.1示例代码

//创建一个新的div元素

varnewDiv=document.createElement(div);

newDiv.innerHTML=这是一个新创建的div元素;

//将新的div元素添加到页面中

varbody=