这篇文章很简短。
在学习web编程的前期，学习CSS把网页的每一项叫做标签，后来学习JS叫做元素，而本文讲的DOM叫做节点。其实不管是标签，还是元素，还是节点，其实都是不同阶段不同的叫法，本质是一样的。
Javascript子节点
子节点和节点类型
是Dom document的缩写。内容的本质是文档节点的操作和使用，“增删查”缺一不可。让我们在ul和li之间建立一个父子关系，如图，用childNodes获取子集的个数。可以看出为什么明明是两个子集，输出却是5。实际上，childNodes的输出节点不仅包含元素节点，还包含文本节点，也就是说空的白色部分可以视为文本节点。其实IE6-8版本不会有问题，那么这样的兼容性问题怎么解决呢？
在解决这个问题之前，我们先了解一下nodeType。以下是排序后的表格。当使用nodeType时，它输出一串数字。不同的数字意味着不同的事情。我们用这个性质来做判断。
上述childNodes需要区分文本节点和元素节点，非常繁琐。有什么方法可以直接找到元素节点？下面的子方法。
孩子们
我们尝试在IE6-8及更高版本的浏览器中运行web代码，可以发现孩子是兼容的。父Javascript节点
节点
我们用parentNode打印ul的ParentNode，可以发现节点是网页元素，这一点毋庸置疑。我们可以利用这个特性做一个【点击隐藏功能】。具体代码如下:
父元素
JS在父节点中也有一个offsetParent方法。此方法用于CSS定位中的父级。下面定义了两个盒子，盒子1和盒子2。他们在CSS定位层面上是父子关系。当我们用代码输出box2的父代时，会显示box1。
您还可以删除box1的position:relative并重新输出box2的父级，它将作为body输出。你自己试试。下面来说说兄弟节点。
Javascript同级节点
FirstChild lastChild第一个和最后一个子节点
为了说明类似的兼容性问题，将第一个和最后一个子节点以及同级节点汇总在一起。FirstChild和lastChild只支持IE6-8的版本，更高版本的浏览器使用firstElementChild和lastElementChild的方法。为了解决同时兼容所有浏览器的问题，使用了以下代码:
接下来，同样的，我直接用下表总结一下:
设置和获取的属性
上面提到的节点有三种。基于以上，我们来说说元素属性的设置和获取方法。设置元素属性有两种方式，一种是元素属性操作，一种是DOM。
本文先说DOM模式，再来一个，先说getAttribute。
获取getAttribute
首先，在网页中创建8个类，其中三个名为box。我们使用getAttribute方法再次获取类名。
设置setAttribute
SetAttribute用于设置元素的属性和值。具体参数如下:
移除removeAttribute
RemoveAttribute是删除添加的属性。具体参数如下:摘要
Javascript就是这样用DOM获取节点，添加操作属性的。学习编程最好的方法就是实践。感谢您的观看。下次见。
