JS——DOM

Pig Pig Cat

已于 2022-11-08 23:04:26 修改

阅读量682

点赞数

文章标签： javascript 前端 html

于 2022-11-01 00:21:55 首次发布

本文链接：https://blog.csdn.net/weixin_56941647/article/details/127624311

版权

学习目标

了解什么是DOM

掌握元素与样式的操作

掌握节点的操作

2.1.1.获取操作的元素——document对象的方法和属性

1.DOM对象简介

1.1.什么是DOM

DOM：Document Object Model，文档对象模型。

作用：是一套规范文档内容的通用型标准。

时间：1998年10月。
事件：DOM正式成为W3C的推荐标准。
名称：第1级DOM（DOM Level 1）。
作用：为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。
参考：初结合了Netscape及微软公司开发的DHTML（动态HTML）思想。

时间：2000年11月。
事件：发布了第2级DOM（DOM2）。
作用：在DOM1的基础上增加了样式表对象模型。

名称：第3级DOM（DOM3）。
作用：在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。
提示：直到目前为止，DOM几乎被所有浏览器所支持。

1.2.DOM HTML节点树

DOM HTML指DOM中为操作HTML文档提供的属性和方法。

文档（Document）表示HTML文件。
文档中的标签称为元素（Element）。
文档中的所有内容称为节点（Node）。

因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
  </head>
  <body>
    <a href="#">链接</a>
    <p>段落...</p>
  </body>
</html>

HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。

各节点之间的关系，又可分为以下几个方面：

根节点：<html>标签是整个文档的根节点，有且仅由一个。
子节点：指的是某一个节点的下级节点。
父节点：指的是某一个节点的上级节点。
兄弟节点：两个节点同属于一个父节点。

1.3.DOM对象的继承关系

在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，但是此方法的返回值类型是什么？下面通过代码进行查看。

<div id="test"></div>
<script>
  var test = document.getElementById('test');
  console.log(test);  	      // 输出结果：<div id="test"></div>
  console.log(test.__proto__);   // 输出结果：HTMLDivElement { …… }
</script>

总结

document和Element是两种不同类型的节点（Node）对象。
不仅能够使用Node对象的一系列属性和方法完成节点操作。
也可以使用特有的属性和方法完成不同类型节点的操作。

<div id="test"></div>
<script>
  var test = document.getElementById('test');
  console.log(test.nodeName);  // 通过节点方式获取节点名，输出结果：DIV
  console.log(test.tagName);     // 通过元素方式获取标签名，输出结果：DIV
  console.log(document.nodeName); // document属于节点，输出结果：#document
  console.log(document.tagName);    // document不属于元素，输出结果：undefined
</script>

除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。

Node.属性名	值	相应的对象	说明
ELEMEN_NODE	1	Element	元素节点
ATTRIBUTE_NODE	2	Attr	属性节点
TEXT_NODE	3	Text	文本节点
COMMENT_NODE	8	Comment	注释节点
DOCUMENT_NODE	9	Document	文档节点

2.HTML元素操作

2.1.获取操作的元素

document对象的方法和属性

Element对象的方法和属性

2.1.1.获取操作的元素——document对象的方法和属性

（1）document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。

方法	说明
document.getElementById()	返回对拥有指定id的第一个对象的引用
document.getElementsByName()	返回带有指定名称的对象集合
document.getElementsByTagName()	返回带有指定标签名的对象集合
document.getElementsByClassName()	返回带有指定类名的对象集合（不支持IE6~8）

<div id="test" class="test1" name="t"></div>
<script>
      var test = document.getElementById("test"); //1
      var test1 = document.getElementsByName("t")[0];
      var test2 = document.getElementsByTagName("div")[0];
      var test3 = document.getElementsByClassName("test1")[0];
      console.log(test);
      console.log(test1);
      console.log(test2);
      console.log(test3);
    </script>

除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。

（2）document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。

属性	说明
document.body	返回文档的body元素
document.documentElement	返回文档的html元素
document.forms	返回对文档中所有Form对象引用
document.images	返回对文档中所有Image对象引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/15test.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="test" class="test1" name="t"></div>
    <form action=""></form>
    <img src="" alt="" />
    <script>
      var test = document.getElementById("test"); //1
      var test1 = document.getElementsByName("t")[0];
      var test2 = document.getElementsByTagName("div")[0];
      var test3 = document.getElementsByClassName("test1")[0]; //2
      //   console.log(test); // 输出结果：<div id="test"></div>
      //   console.log(test.__proto__); // 输出结果：HTMLDivElement { …… }

      //   console.log(test.nodeName); // 通过节点方式获取节点名，输出结果：DIV
      //   console.log(test.tagName); // 通过元素方式获取标签名，输出结果：DIV
      //   console.log(document.nodeName); // document属于节点，输出结果：#document
      //   console.log(document.tagName); // document不属于元素，输出结果：undefined
      //   console.log(Element.tagName);
      //   console.log(test);
      //   console.log(test1);
      //   console.log(test2);
      //   console.log(test3);
      console.log(document.body);
      console.log(document.documentURI);
      console.log(document.forms);
      console.log(document.images);
    </script>
  </body>
</html>

document对象的body属性用于返回body元素。
document对象的documentElement属性用于返回HTML文档的根节点html元素。

值得一提:

通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。

多学一招：

HTML5新增的document对象方法

HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

pquerySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
pquerySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

由于这两个方法的使用方式相同，下面以document.querySelector()方法为例演示。

console.log(document.querySelector('div'));        // 获取匹配到的第1个div
console.log(document.querySelector('#box'));    // 获取id为box的第1个div
console.log(document.querySelector('.bar'));      // 获取class为bar的第1个div
console.log(document.querySelector('div[name]'));// 获取含有name属性的第1个div
console.log(document.querySelector('div.bar'));// 获取文档中class为bar的第1个div
console.log(document.querySelector('div#box'));// 获取文档中id为box的第1个div

在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

<ul id="ul">
  <li>PHP</li><li>JavaScript</li>
  <ul><li>jQuery</li><ul>
</ul>
<script>
  var lis = document.getElementById('ul').getElementsByTagName('li');
  console.log(lis);// 输出结果：(3) [li, li, li]
</script>

除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。

var lis = document.getElementById('ul').children;
console.log(lis);		// 输出结果：(3) [li, li, ul]

元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。
另外，document对象中也有children属性，它的第一个子元素通常是html元素。

多学一招：HTMLCollection对象

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

HTMLCollection与NodeList对象的区别：

HTMLCollection对象用于元素操作。
NodeList对象用于节点操作。

提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

<li id="test" name="test">test</li>
<script>
   var lis1 = document.getElementsByTagName('li'); // 获取标签名为li的对象集合
  var test = document.getElementById('test');           // 获取id为test的li元素对象
  lis1.test === test;   			            // 比较结果：true
  var lis2 = document.getElementsByName('test');   // 获取name名为test的对象集合
  lis1.test === lis2[0];   			           // 比较结果：true
</script>

2.2.元素内容

（1）JavaScript中，若要对获取的元素的内容进行操作，则可以利用DOM提供的属性和方法实现。

分类	名称	说明
属性	innerHTML	设置或返回元素开始和结束标签之间的HTML
	innerText	设置或返回元素中去除所有标签的内容
	textContent	设置或者返回指定节点的文本内容
方法	document.write()	向文档写入指定的内容
方法	document.writeln()	向文档写入指定的内容后并换行

属性属于Element对象，方法属于document对象。
innerHTML在使用时会保持编写的格式以及标签样式。
innerText则是去掉所有格式以及标签的纯文本内容。
textContent属性在去掉标签后会保留文本格式。

注意

innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在

开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，读者在开发中要根据实际的需要选择合适的实现方式

2.3.【案例】改变盒子大小

代码实现思路：

① 编写HTML，设置div的大小。

② 根据用户的点击次数完成盒子大小的改变。

③ 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。

2.4.元素属性

（1）在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。

分类	名称	说明
属性	attributes	返回一个元素的属性集合
方法	setAttribute(name, value)	设置或者改变指定属性的值
	getAttribute(name)	返回指定元素的属性值
	removeAttribute(name)	从元素中删除指定的属性

利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。

<div id="test" name="test" style="background-color: red">你好</div>
<script>
      document.getElementById("test").setAttribute("style", "background-color:black");
      console.log(document.getElementById("test").attributes);
      console.log(document.getElementById("test").getAttribute("style"));
      console.log(document.getElementById("test").removeAttribute("name"));
      console.log(document.getElementById("test").attributes);
</script>

2.5.元素样式

回顾：通过元素属性的操作修改样式。

元素样式语法：style.属性名称。

要求：需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。

举例：设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。

名称	说明
background	设置或返回元素的背景属性
backgroundColor	设置或返回元素的背景色
display	设置或返回元素的显示类型
height	设置或返回元素的高度
left	设置或返回定位元素的左部位置
listStyleType	设置或返回列表项标记的类型
overflow	设置或返回如何处理呈现在元素框外面的内容
textAlign	设置或返回文本的水平对齐方式
textDecoration	设置或返回文本的修饰
textIndent	设置或返回文本第一行的缩进
transform	向元素应用2D或3D转换

<div id="box"></div>
<script>
  var ele = document.getElementById('box'); // 获取元素对象
  ele.style.width = '100px';
  ele.style.height = '100px';
  ele.style.backgroundColor = 'red';
  ele.style.transform = 'rotate(7deg)';
</script>


div{width: 100px; height: 100px; background-color: red; transform: rotate(7deg);}

注意:

CSS中的float样式与JavaScript的保留字冲突，在解决方案上不同的浏览器存在分歧。例如IE9~11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari浏览器使用“float”，IE6~8使用“styleFloat”

问题：

问题：一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？

原来的解决方案：利用元素对象的className属性获取，获取的结果是字符型，然后再根据实际情况对字符串进行处理。

HTML5提供的办法：新增的classList（只读）元素的类选择器列表。

举例：若一个div元素的class值为“box header navlist title”，如何删除header？

HTML5解决方案：div元素对象.classList.toggle("header");

除此之外，classList属性还提供了许多其他操作的方法和属性。

分类	名称	说明
属性	length	可以获取元素类名的个数
方法	add()	可以给元素添加类名，一次只能添加一个
	remove()	可以将元素的类名删除，一次只能删除一个
	toggle()	切换元素的样式，若元素之前没有指定名称的样式则添加，如果有则移除
	item()	根据接收的数字索引参数，获取元素的类名
	contains	判断元素是否包含指定名称的样式，若包含则返回true，否则返回false

2.6.【案例】标签栏切换效果

代码实现思路：

① 编写HTML，实现标签栏的结构与样式的设计，其中class等于current表示当前显示的标签，默认是第一个标签。

② 获取所有的标签与标签对应的显示内容。

③ 遍历并为每个标签添加鼠标滑过事件，在事件的处理函数中，遍历标签对应的所有显示内容，当鼠标滑过标签时，通过classList的add()方法添加current，否则通过remove()方法移出current。

3.DOM节点操作

3.1.获取节点

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

属性	说明
firstChild	访问当前节点的首个子节点
lastChild	访问当前节点的最后一个子节点
nodeName	访问当前节点名称
nodeValue	访问当前节点的值
nextSibiling	返回同一树层级中指定节点之后紧跟的节点
previousSibling	返回同一树层级中指定节点的前一个节点
parentNode	访问当前元素节点的父节点
childNodes	访问当前元素节点的所有子节点的集合

childNodes属性与前面学习过的children属性的区别。

相同点：都可以获取某元素的子元素。

不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合。

注意:

childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。

此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

// 访问document节点的第1个子节点
document.firstChild;		// 访问结果：<!DOCTYPE html>
// 访问document节点的第2个子节点
document.firstChild.nextSibling;	// 访问结果：<html>……</html>

3.2.节点追加

在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。

方法	说明
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.createAttribute()	创建属性节点
appendChild()	在指定元素的子节点列表的末尾添加一个节点
insertBefore()	为当前节点增加一个子节点（插入到指定子节点之前）
getAttributeNode()	返回指定名称的属性节点
setAttributeNode()	设置或者改变指定名称的属性节点