DOM的定义
文档对象模型（Document Object Model）是一种用于HTML和XML文档的编程接口。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
查找元素
1、直接查找
document.getElementById # 根据ID获取一个标签 document.getElementsByName # 根据name属性获取标签集合 document.getElementsByClassName # 根据class属性获取标签集合 document.getElementsByTagName # 根据标签名获取标签集合
2、间接查找
parentNode # 父节点 childNodes # 所有子节点 firstChild # 第一个子节点 lastChild # 最后一个子节点 nextSibling # 下一个兄弟节点 previousSibling # 上一个兄弟节点 parentElement # 父节点标签元素 children # 所有子标签 firstElementChild # 第一个子标签元素 lastElementChild # 最后一个子标签元素 nextElementtSibling # 下一个兄弟标签元素 previousElementSibling # 上一个兄弟标签元素
内容操作
innerText # 文本 outerText innerHTML # HTML内容(包括元素、注释和文本节点) value # 获取input/select/textarea里面输入的内容
属性操作
attributes # 获取所有标签属性 setAttribute(key,value) # 设置标签属性 getAttribute(key) # 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */
标签操作
1、创建标签
# 方法一 var tag = document.createElement('a') tag.innerText = "百度" tag.href = "http://www.baidu.com" // 方式二 var tag = "<a href='http://www.baidu.com'>baidu</a>"
2、操作标签
# 方法一 var obj = "<input type='text' />"; obj.insertAdjacentHTML("beforeEnd",obj); obj.insertAdjacentElement('afterBegin',document.createElement('p')) #注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' # 方法二 var tag = document.createElement('a') tag.appendChild(tag) tag.insertBefore(tag,tag[1])
样式操作
<div class="c1">百度一下，你就知道</div> var obj = document.getElementById('c1') obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
位置操作
# 总文档高度 document.documentElement.offsetHeight # 当前文档占屏幕高度 document.documentElement.clientHeight # 自身高度 tag.offsetHeight # 距离上级定位高度 tag.offsetTop # 父定位标签 tag.offsetParent # 滚动高度 tag.scrollTop ''' clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点 '''
事件
this标签指向当前正在操作的标签，event封装了当前事件的内容。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" 600px;margin: 0 auto;"> <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" /> </div> <script> function Focus() { var tag = document.getElementById('i1'); var val = tag.value; if(val == "请输入关键字"){ tag.value = "" } } function Blur() { var tag = document.getElementById('i1'); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字" } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> var myTrs=document.getElementsByTagName('tr'); for(var i=0; i < myTrs.length; i++){ myTrs[i].onmousemove = function(){ this.style.backgroundColor='red'; } myTrs[i].onmouseout = function(){ this.style.backgroundColor="" } } </script> </body> </html>