Dom基本操作

页面加载时，浏览器创建页面的文档对象模型(Document Object Model)。对象模型的可编程性，使得javascript通过增删改等方式可以创建动态的html。
查找HTML元素

• 通过id查找HTML元素。用方法：document.getElementById(id_name);
• 通过标签名查找HTML元素。用方法：getElementsByTagName(tag_name);
• 通过类名查找 HTML 元素getElementsByClassName(class_name)

获取子元素&兄弟元素&父元素

• element.childNodes: 获取指定元素的子节点,包括文本节点、元素节点等
• element.children: 获取指定元素的子元素,只会获取元素节点。
• element.nextSibling: 获取指定元素的下一个兄弟节点
• element.nextElementSibling: 获取指定元素的下一个兄弟元素
• element.previousSibling: 获取指定元素的上一个兄弟节点
• element.previousElementSibling: 获取指定元素的上一个兄弟元素
• element.parentNode: 获取元素的父节点,父节点肯定是一个元素

获取第一&最后一个子元素

• element.firstChild: 获取指定元素下面的第一个子节点
• element.firstElementChild: 获取指定元素下面的第一个子元素
• element.lastChild: 获取指定元素下面的最后一个子节点
• element.lastElementChild: 获取指定元素下面的最后一个子元素

节点操作

• 克隆节点 - cloneNode()
  
  • 参数:布尔值,
  • true代表深层克隆,把当前节点和内部所有节点都复制一份
  • false代表浅层克隆,只复制当前节点
• 添加节点 - appendChild()
  
  • father.appendChild(son)
• 插入节点 - insertBefore()
  
  • father.inserBefore(son1_new,son2_old): 将son1插入到father节点下的son2前面
• 移除节点 - removeChild()
  
  • father.removeChild(son): 将father下的son节点移除

创建结构

• document.write()
  
  • 特点:只能被document调用,而且会覆盖页面上原有内容
• element.innerHtml
  
  • 特点:往页面添加html标签,可以限定范围
• document.createElement()
  
  • 特点:动态创建标签,添加到页面需要配合appendChild使用

标签的自定义属性操作

• 设置标签属性: setAttribute()
  
  • box.setAttribute("id","aaa");// 有规定的属性可以设置
box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置
• 获取标签属性:getAttribute()
  
  • box.getAttribute("id");// 有规定的可以获取
box.getAttribute("aaa"); // 没有规定的也可以获取
• 移除标签属性:removeAttribute()
  
  • box.removeAttribute("id"); // 有规定的可以删除
box.removeAttribute("aaa"); // 没有规定的也可以删除

事件

“`
var box = document.getElementById(“box”);

box.onclick = function(){
// 鼠标单击事件
}

box.dblclick = function(){
// 鼠标双击事件
}

box.onmouseover = function(){
// 鼠标移入事件
}

box.onmouseout = function(){
// 鼠标移出事件
}

box.onfocus = function(){
// 聚焦事件
}

box.onblur = function(){
// 失去焦点事件
}

box.onkeyup = function(){
// 按键弹起事件
}

box.onkeydown = function(){
// 按键按下事件
}
“`

其中的一些方法需有兼容方法，我会在下篇文章列出。