文檔對象模型(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>
View Code
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封裝了目前事件的内容·