文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的内容呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是javascript语言规范的规定的核心内容·
一丶查找元素
1·直接查找
document.getElementById //根据ID获取一个标签 document.getElementsByName //根据name属性获取标签集合 document.getElementsByClassName //根据class属性获取标签集合 document.getElementsByTagName //根据标签名获取标签集合
2·简介查找
parentNode //父节点 childNodes //所有子节点 fistChild //第一个子节点 lastChild //最后一个子节点 nextSibling //下一个兄弟节点 previousSibling //上衣个兄弟节点 parentElement //父节点标签元素 children //所有子标签 firstElementChild //第一个子标签元素 lastElementChild //最后一个子标签元素 nextElementtSibling //下一个兄弟标签元素 previousElementSibling //上一个兄弟标签元素
二丶操作
1丶内容
innerText //文本 outerText innerHTML //HTML内容 innerHTML value //值
2丶属性
attrbutes //索取所有标签属性
setAttribute(key,value) //设置标签属性
getAttribute(key) //获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue = "democlass";
document.detElementById("n1").setAttributeNode(atr);
*/
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="bottob" value="全选" onclick="CheckAll();"/> <input type="bottob" value="取消" onclick="CheckAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1"> <thead> </therd> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>66666</td> <td>88888</td> </tr> <tr> <td><input type="checkbox"/></td> <td>66666</td> <td>88888</td> </tr> <tr> <td><input type="checkbox"/></td> <td>66666</td> <td>88888</td> </tr> </table> <script> function CheckAll(tha){ var tb = document.getElementById("tb"); var trs = tv.childNodes; for(var i=0;i<trs.lengt;i++){ var current_tr = trs[i]; if(current_tr.nodeType == 1){ var inp = current_tr.firstElementChild.getElementByTagName("input")[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById('tb'); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script>
3丶class操作
className //获取所有类名 classList.remove(cls) //删除指定类 classList.add(cls) //添加类
4丶标签操作
a·创建标签
//方式一
var tag = document.createElement("a")
tag.innerText = "Wyc"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wuyongcong"
//方式二
var tag = "<a class="c1" href = "http://www.cnblogs.com/wuyongcong">wuyongcong</a>"
b·操作标签
//方式一
var obj = "<input type="text" />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))
//注意:第一个参数只能是"beforeBegin","afterBegin","befoeEnd","afterEnd"
//方式二
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
5丶样式操作
var obj = document.getElementById("i1")
obj.style.fontSize = "32px";
obj.style.backgroundColor = "blue";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color:gray;"/> <script> function Focus(ths){ ths.style.color = "black"; if(ths.value == "请输入关键字" || ths.value.trim() == ""){ ths.value = ""; } } function Blur(ths){ if(ths.value.trim() == ""){ ths.value.color = "gray"; }else{ ths.style.color = "black"; } } </script>
6丶位置操作
//总文档高宽
document.documentElement.offsetHeight
//当前文档占屏膜高宽
document.documentElement..clientHeight
//自身高度
tag.offsetHeight
//距离上级定位高度
tag.offsetTop
//父定位标签
tag.offsetParent
//滚动高度
tag.scrollTop
/*
clientHeight -> 课件区域: height + padding
clienTop -> border高度
offsetHeight -> 可见区域:height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高:height + padding
scrollTop -> 滚动高度
特别的:
document.documentElement代指文档根节点
*/
7丶提交表单
document.getElementById("form").submit()
8丶其他操作
console.log //输出框 alert //弹出框 confirm //确认框 // URL和刷新 location.href //获取URL location.href = "url" //重定向 location.reload() //重新加载 //定时器 setInterval //多次定时器 clearInterval //清除多次定时器 setTimeout //单次定时器 clearTimeout //清除单词定时器
三·事件
对于事件需要注意的要点:
· this
· event
· 事件链以及跳出
this标签当前正在操作的标签,event封装了当前事件的内容·