DOM(Document Object Model)文档对象模型
DOM是把HTML里面的数据都当作对象来操作的一种模型
DOM把所有的HTML都转换为节点,如:document,元素,元素属性,元素内容,注释,都是节点
获取节点
getElementById();//唯一的
getElementByName();//通过表单元素的name获取元素节点,表单元素都有name
getElementByTagName();//获取数组
getElementByClassName();//返回节点数组
null;//javascript是解释语言,是顺序执行的,若该元素节点定义语句在获取语句之后则无法获取该元素节点
attributes;//getElementById()获取元素节点再元素名.attributes返回其下所有属性节点(数组),通过for循环遍历查询每个节点的NodeName和NodeValue.如果要获取一个指定属性值,可以通过attributesArray["nodename"].nodeValue
childNodes();//document.getElementById()获取元素节点再通过childNodes()获取所有子节点,第一个子节点即为内容节点
节点属性
nodeName;//节点名称
nodeValue;//节点值
nodeType;//节点类型
innerHTML;//元素的文本内容
id/value/classname//元素上的属性id,value可以直接通过.访问,自定义属性通过如下两种方式来获取
getAttribute("test")
attributes["test"].nodeValue
样式
事件

event.png
节点关系
parentNode;//父节点关系
previousSibling;//同胞节点关系
nextSibling;//同胞节点关系,如果两节点之间有任何字符空白换行都会产生文本元素,返回#text
childNodes;//子节点关系childNodes和children都会获取一个元素节点的子节点,前者包含文本节点后者排除文本节点
创建/删除/替换/插入节点
createElement(标签名);//创建元素节点
createTextNode(文本内容);//创建文本节点
createElement创建元素节点,再创建文本节点,将文本节点加入到元素节点,将元素节点加入到父节点下
createAtrribute;//创建属性节点
要删除元素节点有两步:
1.先获取该元素的父节点
2.通过父节点调用removeChild删除该节点
要删除属性节点有两步
1.先获取该元素节点
2.元素节点调用removeAtrribute删除指定属性节点
要删除文本节点有两种方式
1.childNodes[0]获取文本节点removeChild删除该文本节点
2.通过innerHTML=""
替换节点replaceChild(保留的节点,被替换的节点)
1.获取父节点
2.创建子节点
3.获取被替换子节点
4.通过replaceChild进行替换
插入节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
insertBefore(新元素,位置)