什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
查找元素
1、直接查找
| 方法名 | 描述 |
| getElementById(id) (document) | 获取有指定惟一ID属性值文档中的元素 |
| getElementsByTagName_r(name) | 返回当前元素中有指定标记名的子元素的数组 |
| document.getElementsByClassName | 根据属性获取标签集合 |
| getAttribute(name) | 返回元素的属性值，属性由name指定 |
1>document.getElementById('id')
不帅
显示效果，当我们打开IE的时候不帅就会被修改为很帅
2>getElementsByTagName_r(name)
不帅
其显示效果一样
3>document.getElementsByClassName
不帅
2、间接查找
| 属性名 | 描述 |
| childNodes | 返回当前元素所有子元素的数组 |
| childNodes | 返回当前元素的所有子元素 |
| firstChild | 返回当前元素的第一个下级子元素 |
| lastChild | 返回当前元素的最后一个子元素 |
| nextSibling | 返回紧跟在当前元素后面的元素 |
| previousSibling | 返回紧跟在当前元素前面的元素 |
| parentElement | 返回其父节点标签元素 |
| children | 返回其所有子标签 |
| firstElementChild | 返回第一个子标签元素 |
| lastElementChild | 返回最后一个子标签元素 |
| nextElementtSibling | 返回下一个兄弟标签元素 |
| previousElementSibling | 返回上一个兄弟标签元素 |
有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。
操作元素
1、动态创建内容时所用的W3C DOM属性和方法
| 属性/方法 | 描述 |
| document.createElement_x(tagName) | 文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素 |
| document.createTextNode(text) | 文档对象的createTextNode方法会创建一个包含静态文本的节点 |
| appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。 | |
| 这些方法分别获得和设置元素中name属性的值 | |
| 将节点newNode作为当前元素的子节点插到targetNode元素前面 | |
| 这个方法从元素中删除属性name | |
| 这个方法从元素中删除子元素childNode | |
| 这个方法将节点oldNode替换为节点newNode | |
| 这个方法返回一个布尔值，指示元素是否有子元素 |
2、标签内容
innerText 获取标签文本内容 innerHTML 获取HTML内容 value 获取值，即form提交表单的值
即实例如下：
11112222
3、属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：
Title 全选、反选、取消案例
- 篮球
- 足球
- 排球
注：onclick是属于点击事件，后面会提到
4、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。
隐藏 放这上面有东西出来，不放东西又消失张岩林好帅来个案例醒醒脑
5、标签操作
我们可以通过dom创建标签，添加到指定位置，下面给大家举两种方法来操作标签
// 方式一
var zhang = "";
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]) //插到指定位置，可根据索引
Title 添加标签操作案例
- alex
- eric
6、样式操作
张岩林很帅
效果如下：
来个案例吧，光看知识点多没劲，我们经常会看到输入框里面有那种颜色比较暗的字体，提示你让你输入东西，当你点进去的时候他就消失了，很神奇的操作，他就是通过dom来实现的，废话不多说直接撸码
Title input输入框提示
7、位置操作
总文档高度 document.documentElement.offsetHeight 当前文档占屏幕高度 document.documentElement.clientHeight 自身高度 tag.offsetHeight 距离上级定位高度 tag.offsetTop 父定位标签 tag.offsetParent 滚动高度 tag.scrollTop
看到这些大家有没有想到网页右下角有个返回顶部，一点就返回到上面了，对没错就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。
Title 返回顶部张岩林
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
给说下定时器吧，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到
// 多次定时器案例
单次定时器
事件
Title // 普通事件 // 0级处理事件 // 2级处理事件
事件列表：
| 属性 | 此事件什么时候发生(什么时候被触发) |
| onabort | 图象的加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 区域的内容被修改 |
| onclick | 当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子） |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onerror | 在加载文档或图像时发生错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘被松开 |
| onload | 一张页面或一副图片完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标移动过来后 |
| onmouseout | 鼠标从某个元素移开 |
| onmouseover | 鼠标移动到某个元素之上 |
| onmouseup | 鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被重新调整大小 |
| onselect | 文本被选中 |
| onsubmit | 确认按钮被点击 |
| onunload | 用户退出页面 |
注：一个标签可以绑定多个事件，this标签当前正在操作的标签，event封装了当前事件的内容。
来几个案例吧，不然看完了感觉跟没看一个样
Title 标签菜单案例
Title 通过自定义属性改变元素值123123123123123123123123
以上这篇JavaScript DOM 对象深入了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。