DOM可以说是把文档当成一种树状结构,这种结构被称为节点树,JavaScript脚本可以通过节点树访问所有节点,可是执行修改或者是删除它们的内容,同时也可以创建新的节点。
节点之间的关系是有上下级别的父子关系和相邻之间的兄弟关系。
1、在节点树中,最顶端的节点为根节点。
2、除了根节点外,所有的节点都有一个父节点。
3、节点可以包含数量的子节点。
4、而作为树的最末端叶子是没有子节点的。
5、同级之间的兄弟节点是拥有相同的父节点的。
如下来分析一下节点之间的关系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>你好,树形节点</p> <ul> <li>兄弟关系一</li> <li>兄弟关系二</li> </ul> </body> </html>
在上面的HTML中,先是!DOCTYPE文档类型声明,之后就是html元素了。html元素既没有父辈元素也没有兄弟元素,所以html被称为整个文档的根元素,可以代表整个文档。由html元素派生下的head元素和body元素是html的子元素,它们是属于同级关系的,所以被称之为兄弟元素,并且它们拥有相同的父元素html。与此同时它们又是其他元素的父元素,如meta元素、title元素的父元素是head元素,而作为叶子的meat元素和title元素是没有子元素的。