1、什么是DOM
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
文档:一个页面就是一个文档,DOM中使用doucument来表示
元素:页面中的所有标签都是元素,DOM中使用 element 表示
节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示
DOM 把以上内容都看做是对象。
元素节点 属性节点 文本节点
nodeName节点名称/tagName标签名称
nodeType(节点类型)返回1 元素节点
nodeValue 返回null 节点值
元素节点
属性节点
文本节点
节点类型:元素节点 1、属性节点 2、文本节点 3
通过父节点对象查找子节点对象方法:
父节点对象:
firstChild第一个子节点 可能有文本节点 换行
lastChild、最后一个子节点 可能有文本节点 换行
childNodes(多个)
通过父节点对象查找子元素节点对象:
firstElementChild第一个元素节点
lastElementChild最后一个元素节点
children多个 所有子元素节点
子节点查找父节点
子节点对象.parentNode 通过子节点查找父节点
子节点对象.parentElement 通过子节点查找父元素
节点对象.getAttribute("属性名")根据属性名获取属性值
节点对象.setAttribute("属性名","属性值")根据属性名设置属性值
节点对象.removeAttribute("属性名")删除对应的这对属性
document.createElement("元素名称")创建元素对象
document.appendChild(子节点)追加
兄弟之间查找
console.log(oLi.nextSibling); //查找下一个兄弟节点 可能为文本
console.log(oLi.nextElementSibling); //查找下一个元素兄弟节点
console.log(oLi.nextSibling.nodeValue);
console.log(oLi.previousSibling); //查找上一个兄弟节点 可能为文本
// console.log(oLi.previousSibling.previousSibling);
console.log(oLi.previousElementSibling); //查找上一个元素兄弟节点
创建元素对象
document.createElement("元素名称");
追加元素对象到父元素内部最后
父元素节点.appendChild(子节点);