DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。 (面向对象的角度看html的标签)
节点概念
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
获取节点
| document.getElementById | 通过id获取元素节点 |
| getElementsByTagName | 通过标签名称获取元素节点 |
| getElementsByClassName | 通过类名获取元素节点 |
| getElementsByName | 通过表单元素的name获取元素节点 |
| attributes | 获取属性节点 |
| childNodes | 获取内容节点 |
注:获取节点为null,可能是在执行到 document.getElementById的时候，div标签还没有加载，所以无法获取。因为javascript是解释语言，是顺序执行的。
节点的属性
| nodeName | 节点名称 |
| nodeValue | 节点值 |
| nodeType | 节点类型 |
| innerHTML | 元素的文本内容 |
| id value className |
元素上的属性 |
样式
一个元素节点的style属性即对应的css
通过给元素的style.backgroundColor 赋值，修改样式
你也许注意到了style.backgroundColor 这里的backgroundColor和css中的背景色background-color是有所不同的
换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式：
d1.css("background-color","green");
这样就仅仅需要使用CSS原本的属性名即可了。
Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案
事件
| onfocus onblur |
焦点事件 |
| onmousedown onmouseup onmousemove onmouseout |
鼠标事件 |
| onkeydown onkeypress onkeyup |
键盘事件 |
| onclick ondbclick |
点击事件 |
| onchange | 变化事件 |
| onsubmit | 提交事件 |
| onload | 加载事件 |
| this | 当前组件 |
| return false | 阻止事件的发生 |
节点关系
| parentNode | 父节点关系 |
| previousSibling nextSibling |
同胞节点关系 |
| childNodes | 子节点关系 |
| childNodes children |
childNodes和children的区别: childNodes和children都可以获取一个元素节点的子节点 |
创建节点
| createElement | 创建元素节点 |
| createTextNode | 创建文本节点 |
| createAttribute | 创建属性节点 |
例:
/*定义 函数,创建标签*/
function createTag(tagName,tagVal){
var tag=document.createElement(tagName);
tag.className=tagVal;
return tag;
}
/*根据id或class 查找标签*/
function $(selector){
return document.querySelector(selector);
}