JavaScript DOM操作(超详细)

最新推荐文章于 2024-09-18 08:30:33 发布

wu_ry

最新推荐文章于 2024-09-18 08:30:33 发布

阅读量2.6k

点赞数 56

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wu_ry/article/details/136707544

版权

1.通过getElement系列方法访问指定节点

1.JavaScript DOM操作

DOM是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个节点表示了一个HTML标签或标签内的文档项。

1.DOM操作分类

使用JavaScript操作DOM时分为三个方面；DOMcore(DOM核心操作)、HTML-DOM和CSS-DOM通过这些标准，开发者可以动态地增加、删除、修改数据，使交互更加便捷，可以使网页真正地动起来。

1.DOM core(DOM核心操作)

DOM core定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。

在前面章节中学习过的getElementById('main')可以获得页面中id为main的元素。

2.HTML-DOM

使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HTML-DOM属性。

HTMl-DOM出现的比DOMCore更早，它提供了一些更简单的标记描述各种HTML元素的属性，如document forms可以获取表单对象。

需要注意的是，获取DOM模型中的某些对象、属性、既可以使用DOMCore实现，也可以使用HTML-DOM实现。相对不超过DOMCore获取对象、属性而言，HTML-DOM的代码通常较为简短，只是它的应用范围没有DOMCore广泛，仅适用于处理HTML文档。

3.CSS-DOM

CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，即CSS属性。，通过改变style对象的各种属性，可以使网页出现各种不同的效果，如element.style.color="red"可以设置文本为红色。

2.节点和节点之间的关系

节点可以理解为HTML文档中每个标签或者元素。在DOM中节点是这样规定的;

整个文档是一个文档节点。
每个HTML标签是一个元素节点。
包含在HTML元素中的文本是文本节点。
每个HTML是一个属性节点。
注释属性注释节点。

一个HTMl文档是由各个不同的节点组成的，如下代码所示。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>DOM节点</title>
   </head>
   <body>
      <h1>标题</h1>
      <p>DOM应用</p>
      <ul>
         <li>列表1</li>
         <li>列表2</li>
      </ul>
    </body>
</html>

上面代码的文档<HTML>、<head>、<h1>、<p>、<ul>、<li>及文本节点构成，这些节点都存在层次关系。它们之间的关系如下图片示。

使用父节点(parent)、子节点(child)、兄弟节点(sibling)等术语来描述节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，它们的关系如下。

在DOM树中，顶部节点被称为根(root)、<html>节点。
每个节点都有父节点，除了根(它没有父节点),如<head>和<body>的父节点都是<html>节点，文本节点"DOM应用"的父节点是<title>节点。
一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<h1>、<p>和<ul>。
兄弟节点是拥有相同父元节点是<title>节点。
一个节点是拥有相同父元素的节点。例如，两个<li>就是兄弟节点，它们的父节点均为<ul>节点。JavaScript可以通过访问或改变节点的方式改变页面的内容，使用JavaScript操作节点主要是访问节点在文档中创建和增加节点、删除节点、替换节点、以及操作节点属性和样式等。

3.节点信息

每个节点都拥有包含节点某些信息的属性。这些属性是：

nodeName(节点名称)。
nodeValue(节点值)。
nodeType(节点类型)。

nodeName属性含有某个节点的名称。元素节点的nodeName是标签名称。属性节点的nodeName是属性名称。文本节点的nodeName永远是#text.文档节点的nodeName永远是#document。

对于文本节点，nodeValue属性包含文本。对于属性节点，nodeValue属性包含属性值。nodeValue属性对于文档节点和元素节点是不可用的。

nodeType属性可返回节点的类型。重要的节点类型如下表所示。

4.访问节点

访问HTMl文档的节点主要有两种方式：一种是通过getElement系列方法访问指定节点，另一种便是通过节点的层次关系访问节点。

1.通过getElement系列方法访问指定节点

在HTML文档中，访问节点的标准方法就是之前学习的getElement系列方法，即getElementByld()方法、getElementsByName()方法和getElementsByTagName()方法，只是它们查找的方法略有不同。

getElementByld()方法：返回按属性查找的第一个对象的引用。
getElementsByName()方法：返回按指定名称name查找对象的集合。由于一个文档中可能会有多个同名节点(如复选框、单选按钮)，所以返回的是元素数组。
getElementsByTagName()方法：返回指定标签名TagName查找的对象集合。由于一个文档中可能会有多人同类型的标签节点(如图片、文本输入框)，所以返回元素数组。

2.通过节点的层次关系访问节点

通过getElementById()、getElementsByName()和getElementsByTagName()这三种方法要查看HTML文档中的任何元素，但是这三种方法都会忽略文档的结构。因此，在HTML DOM中提供了如下表所示的一些节点属性，这些属性可遵循文档的结构，在文档的局部进行短距离元素查找。

通过输出的结果发现id为"desc"的div的子节点有五个，但是页面中看到的只有<h2>和<ul>两个。其他的三个text是因为换行造成的。那么如何解决这个问题呢？在JavaScript中提供了一组可以兼容不同浏览器的element属性，可以消除因为这种空行或者换行无法准确访问到节点的情况。element常用属性如下表所示。

需要获取不同的节点时使用节点属性和element属性的写法如下所示，oParent表示当前节点。

oFirst=oParent.firstElementChild || oParent.firstChild //获取第一个子节点
oLast=oParent.lastElementChild || oParent.nextsibling //获取最后一个子节点
oNext=oParent.nextElementSibling || oParent.nextsibling //获取下一个节点
oPre=oParent.previousElementSibling || oParent.previousSibling //获取上一个节点

例如，获得id为"desc"的div最后一个节点,代码如下

//兼容写法
var oDescLastChild=oDesc.lastElementChild || oDesc.lastChild;
console.log(oDescLastChild)

2.设置元素样式

1.style属性设置样式

在HTMLDOM中，style是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问style对象，使用style对象设置样式的语法格式如下。

HTML元素.style.样式属性="值";

在页面中有一个id为main的div,要改变div中的字体颜色为红色，字体大小为13px,代码如下所示。

document.getElementById("mein").style.color="#ff0000";
document.getElementById("main").style.fontSize="25px";

看到上面的代码，可能会有疑问，字体大小的属性不是font-size吗？在JavaScript中使用CSS样式与在HTML中使用CSS稍有不同。在JavaScript中，"-"表示减号，如果样式属性名称中带有"-"号，则要省去"-",并且"-"后的首字母要大写，因此font-size对应的style对象的属性名称应为fontSize.

在style对象中有许多样式属性，但是常用的样式属性主要是文本、背景、边框等，如下表所示。

使用这些事件，可以实现鼠标指针在移至元素上、移出元素时动态地改变页面的样式，下面就使用onmouseover和onmouseout事件如上表所示的效果。

2.className属性设置样式

在HTMLDOM中，className属性可设置或返回元素的class样式。

HTML元素，className="样式名称"

3.获取元素的样式

使用style属性和className属性设置元素的样式，想要获取某个元素的属性值，应该如何实现呢？在JavaScript中可以使用style属性获取样式的属性值，语法如下所示。

alert(document.getElementById("cartList").style.display);

1.getComputedStyle()

DOM提供了一个getComputedStyle()方法，这个方法接收两个参数，需要获取样式的属性值，语法格式如下。

adcument.defaultView.getComputedStyle(元素,null).属性;

修改代码alert(document.getElementById("cartList").style.display);，如下所示。

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display;

2.currentStyle对象

微软公司为每个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，currentStyle对象与style对象的使用方式一样，语法格式如下所示。

HTML元素.currentStyle.样式属性；

添加alert(document.getElementById("cartList").currentStyle.display).在IE浏览器中运行代码，弹出一个提示窗口，说明使用currentStyle正确地获取了样式表中的属性的值。但是currentStyle对象的特性是只读的，如果要给样式属性赋值，则必须使用前面学习过的style对象。