什么是DOM
DOM: Document Object Model 文档对象模型
文档: html页面
文档对象: html页面中的元素
文档对象模型: DOM是JavaScript操作网页的接口。从本质上说，它将web 页面和脚本或编程语言连接起来了。
节点
DOM的最小组成单位叫做节点（node）。
Document：整个文档树的顶层节点
Element：网页的各种HTML标签（比如<body>、<a>等）
Text：标签之间或标签包含的文本
Attribute：网页元素的属性（比如class="right"）
DocumentType：doctype标签（比如<!DOCTYPE html>）
Comment：注释
DocumentFragment：文档的片段
节点间的关系
父节点关系（parentNode）：直接的上级节点
offsetParent:离当前元素最近的一个有定位属性(position: relative| absolute | fixed)的父节点,
如果没有定位父级，默认是body
子节点关系（childNodes）：直接的下级节点
firstChild:第一个子节点， firstElementChild;第一个子元素节点，
lastChild:最后一个子节点， lastElementChild;最后一个子元素节点，
同级节点关系（sibling）：拥有同一个父节点的节点;
nextSibling：下一个兄弟节点；包含文本
nextElementSibling:下一个兄弟元素节点，不包含文本
previousSibling：上一个兄弟节点；包含文本
previousElementSibling：上一个兄弟节点；不包含文本
children属性：当前元素的子元素节点
创建和插入元素
Document.createElement()
在一个HTML文档中, Document.createElement()方法用于创建指定的HTML元素
当指定未定义的元素时， 创建一个HTMLUnknownElement
var div=document.createElement('div');//创建一个div元素
document.body.appendChild(div);//插入body放在最后一个，成为最后一个子节点
//用appendChild()操作已经有的元素，如果将已有元素移动，原位置的会清除掉
插入元素
Node.insertBefore((newElement, referenceElement)// node：父元素
在当前节点的某个子节点之前再插入一个子节点
删除
element.remove();IE不支持；删除element元素
removeChild();删除子元素
ul.removeChild(li);只是移出HTML，依然存在内存中，有返回值，可以重新加入
网友评论