DOM属性节点

DOM属性节点

1.1对于标签天生自带的属性 我们可以通过标签元素.属性名来获取对应的属性值

document.getElementsByTagName(‘标签元素’)[0].属性名)如 id href等

document.getElementsByTagName(‘标签元素’)[0].属性名)属性名是自己添加的属性名如(opo = ‘a’)不能获取对应的属性值

1.2 用一个box来接收这个标签元素的

var box =document.getElementsByTagName(‘标签元素’)[0]

1.2.1 获取所有属性节点

box.attributes

1.2.1 访问第一个属性节点

box.attributes[0]

1.1 创建元素节点

document.createElement(‘div’) //创建一个元素 div 返回的类型是一个element

1.2 添加子节点

box.appendChilder(div) //给box添加一个子节点

1.3 删除子节点

box.removeChild(div)

1.4 替换子节点

box.replaceChild(a,b) 把b标签换成a标签

1.5创建文本节点

​ var text = document.createTextNode(‘hellow’)

​ p.appendChild(text) //将文本节点添加到p标签 从后面添加

1.7 insertBefore添加子节点到某个子节点前面 第一个你需要添加的节点 第二个是子节点

​ var hellow = document.createTextNode(‘XXXX’)

​ text.insertBefore(hellow,text)//将hello对应的节点添加到text节点之前 里面的俩个节点都会 存在于p这个节点中

1.6 克隆一个新的节点

​ text.cloneNode()

1.7 元素节点之间的关系 主要划分为父元素 子元素 兄弟元素（同胞元素）

​ var innerBox = document.getElementById(‘innerBox’)

1.8 父节点 parentNode （一个）

​ innerBox.parentNode //获取父节点 就是box 返回Node

​ innerBox.parentElement //获取父元素 返回element

1.9 子节点 children 获取子节点（获取的是多个）返回的是一个htmlCollection

​ innerBox.children //获取所有的子元素节点

​ innerBox.children[0]//获取第一个子元素

1.10 节点集合

​ innerBox.childNodes //返回所有的子节点（会包含元素节点 文本节点 属性节点）

​ innerBox.firstChild //获取第一个子节点（包含文本节点以及元素节点）

​ innerBox.lastChild //获取最后一个子节点（包含文本节点以及元素节点）

1.11 兄弟节点 处在同一级的标签元素

​ innerBox.nextSibling //下一个兄弟节点

​ innerBox.previousSibling //上一个兄弟节点

​ innerBox.previousElementSibling //上一个兄弟元素节点 没有返回null

​ innerBox.nextElementSibling //下一个兄弟元素节点 没有返回null