DOM 篇(复习巩固笔记)

DOM（Document Object Model，文档对象模型）可以用于完成HTML和XML文档的操作。JavaScript中利用DOM操作HTML元素和CSS样式是最常用的功能之一，例如，改变盒子的大小、标签栏的切换、购物车等。 附上：web前端初级.pdf

一、DOM对象简介

1.什么是DOM

DOM：Document Object Model，文档对象模型。
作用：是一套规范文档内容的通用型标准。

2.DOM HTML节点树

二、HTML元素操作

1.获取操作元素

在利用DOM操作HTML元素时，既可以利用document对象提供的方法和属性获取操作的元素，又可以利用Element对象提供的方法获取。

(1)document对象的方法
document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。

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

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

通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。
(3)Element对象的方法
在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

元素对象还提供了children属性用来获取指定元素的子元素。

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。HTMLCollection对象用于元素操作。
NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。NodeList对象用于节点操作。
提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

2.元素内容

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

元素内容的修改，只需要通过赋值运算符为指定元素的内容属性赋值即可。

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

3.元素属性

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

4.元素样式

三、DOM节点操作

1.获取节点

🔶childNodes属性与children属性的区别。
相同点：都可以获取某元素的子元素。
不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合。

2.节点追加

3.节点删除

开发中若需要删除某个HTML元素节点或属性节点，则可以利用removeChild()和removeAttributeNode()方法实现，它们的返回值是被移出的元素节点或属性节点。


上一篇 >>> BOM 篇
下一篇 >>> js事件 篇