DOM文档对象模型

DOM文档对象模式
顶级对象为document
1）DOM节点类型(元素和属性、文本)
DOM 的最小组成单位叫做节点（node），文档的树形结构（DOM 树），就是由各种不同类型的节点组成。
DOM的基本操作(查询、创建、添加，修改，删除)
2）DOM的基本操作(查询、创建、添加，修改，删除)
获取/查询
document.getElementById id
document.getElementsByTagName 标签 获得的是一组
document.getElementsByClassName 类名 伪数组
document.getElementsByName name属性 伪数组
document.querySelector 选择器 选取第一个
document.querySelectorAll 选择器 伪数组

创建
document.createElement 创建元素节点
document.createTextNode 文本节点
Element.innerHTML 用来设置某个节点的内容
增加节点（追加子节点）
.appendChild(oTxt) 追加子元素
document.body.appendChild()
修改节点
parseNode.replaceChild(newNode,childNode);
父节点.replaceChild（用谁，替换谁）
删除节点
.removeChild
Eg:document.body.removeChild()

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素

document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement(‘div’);

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括和元素。
如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

replaceChild(newNode,oldNode)
var el = document.getElementById(‘mydiv’);
el.remove();

Element.style
每个元素节点都有style用来读写该元素的行内样式信息

获取非行内样式（兼容问题）

Element.style
每个元素节点都有style用来读写该元素的行内样式信息
不过，连词号需要变成骆驼拼写法。
var divStyle = document.querySelector(‘div’).style;
divStyle.backgroundColor = ‘red’;
divStyle.border = ‘1px solid black’;
divStyle.width = ‘100px’;

divStyle.height = ‘100px’;divStyle.fontSize = ‘10em’;

divStyle.backgroundColor // reddivStyle.border // 1px solid black

divStyle.height // 100pxdivStyle.width // 100px

Element.style返回的只是行内样式，并不是该元素的全部样式。
通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。
元素的全部样式要通过window.getComputedStyle()得到。

childNodes和children的区别 childNodes获取的是子节点，children获取的是子元素

nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

这是我的笔记 ，能帮助大家的就到这里咯