javascript之DOM

一. HTML DOM树

文档节点（document对象）：代表整个文档

元素节点（element对象）：代表一个元素（标签）

文本节点（text对象）：代表元素（标签）中的文本

属性节点（attribute对象）：代表一个属性，元素（标签）才有属性

注释是注释节点（comment对象）

javascript可以通过DOM创建动态的HTML：

如：可以改变页面中的所有HTML元素；能够改变页面中的所有HTML属性；能够改变页面中的所有CSS样式；能够对页面中的所有事件作出反应。

二. 查找标签

1.直接查找

document.getElementById("id名")      　　根据ID获取一个标签

document.getElementsByClasssName("类名")   　　  根据class属性获取

document.getElementsByTagName("标签名")　　　　根据标签名获取标签集合

2. 间接查找

parentElement　　　　父节点标签元素

children　　　　　　　所有子标签

firstElementChild　　   第一个子标签元素

lastElementChild　　   最后一个子标签元素

nextElementSibling　　　　下一个兄弟标签元素

previousElementSibling　　上一个兄弟标签元素

三.节点操作

1.创建节点

createElement(标签名)

如： var imgEle = document.createElement("img");

2.添加节点

父节点.appendChild(newnode);     追加一个子节点（作为最后的子节点）

somenode.insertBefore(newnode,某个节点)；       把增加的节点放到某个节点的前边

3.删除节点

removeChild(要删除的节点) 　　　获得要删除的元素，通过父元素调用删除

4.替换节点

somenode.replaceChild(newnode,某个节点)       括号里第一个参数节点替换掉第二个参数节点

5.属性节点

获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="div内容"
divEle.innerHTML="<p>p内容</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

四. 获取值操作

 语法：元素节点.value  　　 (适用标签有：input　select    textarea)

五. class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

六.指定CSS操作

obj.style.backgroundColor="red";

javascript操作CSS的规律：

1.对于没有中横线的CSS属性一般直接使用 style.属性名  即可。如：obj.style.position

2.对于含有中横线的CSS属性，将中横线后面的第一个字母换成大写，采用驼峰式，如：obj.style.marginTop

七.事件

常用事件：

onclick  　　  点击事件

ondblclick　　双击事件

onfocus　　　元素获得焦点事件

onblur　　　　元素失去焦点事件

onchange　　元素内容改变触发事件