节点关系
childNodes
每个节点都有一个childNodes属性,保存着一个NodeList对象,是一种类数组对象,保存着一组子节点,并且length属性,特点是可以基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中
注意:节点的childNodes包含了节点内的所有节点类型(不包括属性节点),而且标签内的换行和空格都会被当成一个文本包含在childNodes属性中
parentNode
每个节点都有一个parentNode属性,该属性指向文档树种的父节点,因此,包含在childNodes列表中的所有节点都有相同的父节点,他们的parentNode属性都指向同一个节点
previousSibling 和nextSibling属性
childNodes列表中的每个父节点相互之间都是同胞节点,可以通过每个节点的previousSibling和nextSibling属性访问同一列表的其他节点
firstChild 和lastChild属性
在父节点下使用这两个属性可以分别获取childNodes列表下的第一个和最后一个节点.为部分需求操作提供的极大的便利
操作节点
appendChild(新增的节点)
接收一个新增节点作为参数 ,用于向childNodes列表的末尾添加一个节点,并返回新增的节点
insertBefore(要插入的节点,作为参照的节点)
插入节点后,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回,如果参照节点是null,那么insertBefore()和appendChild()是等同的
replaceChild(要插入的节点,要替换的节点)
要替换的节点将由这个方法返回并从文档树种移除,同时由要插入的节点占据其位置
removeChild(要删除的子节点)
这个方法接收一个参数,即要移除的节点,并且被方法返回
前面介绍的四个操作方法操作的都是某个节点的子节点,要使用必须先取得父节点, 在父节点上调用这些方法,否则会导致错误.
HTML元素
getAttribute
可以取得节点的默认特性也可以取得自定义特性,返回对应特性值
注意:传入style特性后返回的是包含的CSS文本,而通过属性来访问style则返回一个对象,因为一系列的问题原因,平时开发只使用对象的属性来获取特性,而只有在取得自定义特性值的情况下,才会使用getAttribute()方法
setAttribute(特性名称,特性值)
如果特性存在,则用特性值进行修改,若不存在,则新建特性并赋予特性值,该方法不仅可以操作HTML特性也可以操作自定义特性,而使用对象属性设置的自定义特性则不会自动成为元素的特性
removeAttribute(要删除的特性名称)
这个方法用于彻底删除元素的特性,不仅清除特性的值也会从元素中完全删除特性
attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型,elment.attributes实质是该元素节点的所有属性节点的结合,称为NamedNodeMap,并且拥有它自己的特殊方法:
getNamedItem(name) 返回nodeName属性等于name的节点,即返回属性名对应的属性节点
removeNamedItem(name):删除该属性节点
setNamedItem(node) :向列表中添加属性节点,以nodeName为索引
item(po): 返回位于数字Pos位置处的节点
