JavaScript-DOM基础学习

1、DOM描述

• DOM（Document Object Model），文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。
  ————————引用自官网

---

2、DOM节点树

• js操作网页，会把整个网页变成节点树，通过dom操作节点树，从而实现对网页的操作，节点树分类如下：

类型	描述	节点值（NodeValue）	节点名称（NodeName）	节点类型（NodeType）
文档节点	Document //整个文档	Null	#document	9
元素节点	Element //html标签	Null	HTML	1
文本节点	Text //文本	文本内容(空格和换行也算文本内容)	#Text	3
注释节点	Comment //注释	N/A	N/A	N/A
属性节点	Attr //属性	属性值	属性名	2

（1）节点对象属性

1）节点属性

属性	描述
parentNode	返回当前节点的父节点
childNodes	返回当前节点的所有子节点
children	返回当前节点的所有元素子节点
firstChild	返回当前节点的第一个子节点
firstElementChild	返回当前节点的第一个元素子节点
lastChild	返回当前节点的最后一个子节点
lastElementChild	返回当前节点的最后一个元素子节点
nextSibling	返回当前节点的下一个节点
nextElementSibling	返回当前节点的下一个元素节点
prevSibling	返回当前节点的上一个节点
prevElementSibling	返回当前节点的上一个元素节点
document.body	定位到body标签

（2）获取节点元素

1）根据ID获取

示例	描述	取值方式
document.getElementById(“ID名称”)	返回一个节点对象，可以通过对象取值方式获取内容	document.getElementById(“ID名称”).键名

2）根据Name获取

示例	描述	取值方式
document.getElementByName(“名称”)	返回一个节点列表，可以通过数组下标方式获取内容	document.getElementsByName(“名称”)[下标]

3）根据ClassName获取

示例	描述	取值方式
document.getElementsByClassName(“类名”)	返回一个节点列表，可以通过数组下标方式获取内容	document.getElementsByClassName(“类名”) [下标]

4）根据tagName获取

示例	描述	取值方式
document.getElementsByTagName(“标签名”)	返回一个节点列表，可以通过数组下标方式获取内容	document.getElementsByTagName(“标签名”) [下标]

注意

• 以上是老版本，使用时注意兼容性

5）根据选择器获取

示例	描述	取值方式
document.querySelector(“标签名”)	返回一个dom节点对象，没有返回Null	document.querySelector(“标签名”).键名
document.querySelectorAll(“标签名”)	返回一个数组，没有返回空数组	document.querySelectorAll(“标签名”) [下标]

document.getElement… & document.querySelector… 区别

• document.getElement：//获取的元素是静态的，不随文档的变化而变化
• document.querySelector：//获取的元素是动态的

（3）创建节点

示例	描述
creatTextNode	创建文本节点
creatElement	创建元素节点

（4）添加节点

示例	描述
父节点.appendChild(“子节点”)	添加子节点 （如果添加的子节点已经存在，添加相当于移动）

（5）删除节点

示例	描述
父节点.removeChild(“子节点”)	删除子节点

更多DOM学习，请参考官网文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction