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);
}