JS学习笔记：DOM，节点的分类与定义，获取DOM元素节点的方式，获取所有子节点等函数

DOM基础

元素:节点，对象，标签。

DOM的核心就是操作DOM树中的元素。

DOM树下有很多标签(对象，元素)。

DOM树下有很多节点。

节点的分类:元素节点(html中的标签)、属性节点(每个标签中带的属性)、文本节点(标签中间的内容)。

节点包含标签，标签不包含节点。

要操作DOM模型下的内容，首先需要获取DOM中的节点。

获取DOM元素节点的四种方式，要么写在文档的最后，要么加上windom.onload（）:

document.getElementById(“ID称”):获取的内容只有一个，如果存在多个，获取的是第一个ID。

document.getElementsByTagName(“标签名称”):通过标签名称进行获取，它可以获取多个内容，获取到的内容是一个数组，可以通过数组的下标来区分是那个标签。

document.getElementsByName(“name名称”):

document.getElementsByClassName("类名称");

（元素节点大部分的节点都可以使用这四种方式去获取）

获取到节点之后就是操纵节点，

通过属性，内容，样式，事件来操纵节点。

nodeType(节点的类型)有:1代表元素节点， 2代表属性节点， 3代表文本节点（1,2,3用于判断节点类型，比如if(i.nodeType ==3){}等）。

nodeName(节点的名称)有:元素节点(大写标签名称) , 属性节点(小写名称)   ,文本节点(#text)。

nodeValue(节点的内容)有:元素节点(null) ， 属性节点(值)  ，文本节点(具体的内容)。

获取所有的子节点:

childNodes():得到所有子节点的数组，可以通过下标去访问,会连文本节点一同获取。

children():获取某标签下的所有元素节点,得到的也是一个数组，使用方式和childNodes是一样的。

attributes:获取某元素节点下的所有的属性节点，返回的也是一个数组，可以通过下标进行访问。

firstChild:获取某节点下的第一个子节点，包含文本节点。

firstElementChild:获取某节点下的第一个元素节点。

lastChild获取最后一个子节点。

使用lastElementChild获取最后一个子元素。

parentNodes:获取父节点。

previousSibling:获取上一个兄弟节点(包含文本节点)。

记得priviousElementSibling中的S要大写

priviousElementSibling:获取上一个兄弟元素(不包含文本节点)。

nextSibling:获取下一个兄弟节点(包含文本节点)。

nextElementSibling:下一个兄弟元素(不包含文本节点)。