前端——JavaScript之操作dom

什么叫DOM?

DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。

DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找元素

1. 直接查找

方法名	描述
getElementById(id) (document)	获取有指定惟一ID属性值文档中的元素
getElementsByTagName_r(name)	返回当前元素中有指定标记名的子元素的数组
document.getElementsByClassName	根据属性获取标签集合
getAttribute(name)	返回元素的属性值，属性由name指定

2. 间接查找

属性名	描述
childNodes	返回当前元素所有子元素的数组
childNodes	返回当前元素的所有子元素
firstChild	返回当前元素的第一个下级子元素
lastChild	返回当前元素的最后一个子元素
nextSibling	返回紧跟在当前元素后面的元素
previousSibling	返回紧跟在当前元素前面的元素
parentElement	返回其父节点标签元素
children	返回其所有子标签
firstElementChild	返回第一个子标签元素
lastElementChild	返回最后一个子标签元素
nextElementtSibling	返回下一个兄弟标签元素
previousElementSibling	返回上一个兄弟标签元素

利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

操作元素

1. 动态创建内容时所用的W3C DOM属性和方法。

属性/方法
document.createElement_x(tagName)	文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素
document.createTextNode(text)	文档对象的createTextNode方法会创建一个包含静态文本的节点
< element>.appendChild(childNode)	appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。
< element>.setAttribute(name, value)	这些方法分别获得和设置元素中name属性的值
< element>.insertBefore(newNode, targetNode)	将节点newNode作为当前元素的子节点插到targetNode元素前面
< element>.removeAttribute(name)	这个方法从元素中删除属性name
< element>.removeChild(childNode)	这个方法从元素中删除子元素childNode
< element>.replaceChild(newNode, oldNode)	这个方法将节点oldNode替换为节点newNode
< element>.hasChildnodes()	这个方法返回一个布尔值，指示元素是否有子元素

2. 标签内容
   innerText 获取标签文本内容
   innerHTML 获取HTML内容
   value 获取值，即form提交表单的值

3. 属性
   attributes // 获取所有标签属
   setAttribute(key,value) // 设置标签属性
   getAttribute(key) // 获取指定标签属性

4. class操作
   className // 获取所有类名
   classList.remove(cls) // 删除指定类
   classList.add(cls) // 添加类

5. 标签操作

var zhang = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",zhang);
xxx.insertAdjacentElement('afterBegin',document.createElement('a'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('div')
xxx.appendChild(tag)  //往后追加一个div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引

6. 样式操作

7. 位置操作
   总文档高度
   document.documentElement.offsetHeight
   当前文档占屏幕高度
   document.documentElement.clientHeight
   自身高度
   tag.offsetHeight
   距离上级定位高度
   tag.offsetTop
   父定位标签
   tag.offsetParent
   滚动高度
   tag.scrollTop

8. 其他操作
   console.log 输出框
   alert 弹出框
   confirm 确认框

   // URL和刷新
   location.href 获取URL
   location.href = “url” 重定向
   location.reload() 重新加载

   // 定时器
   setInterval 多次定时器
   clearInterval 清除多次定时器
   setTimeout 单次定时器
   clearTimeout 清除单次定时器

事件

事件列表：

属性	此事件什么时候发生(什么时候被触发)
onabort	图象的加载被中断
onblur	元素失去焦点
onchange	区域的内容被修改
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onerror	在加载文档或图像时发生错误
onfocus	元素获得焦点
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘被松开
onload	一张页面或一副图片完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标移动过来后
onmouseout	鼠标从某个元素移开
onmouseover	鼠标移动到某个元素之上
onmouseup	鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onselect	文本被选中
onsubmit	确认按钮被点击
onunload	用户退出页面