標籤：css
元素：JS
節點：DOM
獲取元素的方法：
getElmentById
getElementsByTagName
DOM document
獲取子節點：
var oUl = document.getElementById("ul1");
//獲取子節點childNodes
oUl.childNodes //11
//這個不僅僅是獲取我們想要的子節點，還會獲取多餘的子節點(會將期間的空格算作一個子節點)這是一段文字 //文本節點
<span>這是一段文字</span? //元素節點nodeType（節點的類型）
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background="red";
}
}childNodes(獲取子節點)
children(只獲取元素)
parentNode(獲取父節點)
offsetParent(此元素相對於哪一個父元素的定位)可用來檢測此個元素的相對於哪一個元素進行的定位的父級
firstChild(childNodes)、firstElementChild
lastChild、lastElementChild
兄弟節點 nextSibling、nextElementSibling
previousSibling、previousElementSibling
DOM方式操作元素屬性
- 獲取：getAttribute（名稱）
- 設置：setAttribute(名稱，值)
- 刪除：removeAttribute(名稱)
var oDiv2 = document.getElementById("div2");
alert(oDiv2.offsetParent); //body
<body>
<div id="div2">
</div>
</body>//封裝getElmentsByClassName的方法
function getByClass(oParent,sClass)
{
var aResult = [];
var aEle = oParent.getElementsByTagName("*");
for(var i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}創建一個節點 creatElement();
追加一個節點：appendChild();
- appendChild()會先刪除原有的Elment,然後再添加到新的目標標籤之後
插入元素
- insertBefore(節點，原有節點) //在已有元素前插入
父級.appendChild(子節點)；
父級.insertBefore(子節點,原有節點)
if(ali.length>0) {
oUl.insertBefore(oLi,ali[0]);
}else {
oUl.appendChild(oLi);
}
刪除元素
- removeChild()
父級.removeChild();文檔碎片
- 文檔碎片可以提高DOM操作性能
- 文檔碎片原理
- document.createDocumentFragment()
var oUl = document.getElementById("ul1");
var oFrag = document.createDocumentFragment();
for(var i=0;i<10000;i++) {
var oLi = document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
表格
- tBodies
- thead(唯一)
- tFoot（唯一）
- rows
- cells
<table>
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>解開了</td>
<td>12</td>
</tr>
</tbody>
</table>search
str.search(ad); //沒有，返回-1，存在返回ad所在序列位置數字split()
分割字符
var str = " 1 2 ";
str.split(" "); //[1,2]sort()進行排序
//只能使用Arry數組排序
arr.sort（function(n1,n2) {
return n1-n2;
}）；表單
//後臺通過name獲得數據
<form action="http://baidu.com/">
用戶名：<input type="text" name="user" /><br>
密碼：<input type="password" name="password" />
<input type="submit" />
</form>- onreset 重置
表單驗證
- 阻止用戶輸入非法字符 阻止事件
- 輸入時、失去焦點時驗證 onkeyup、onblur
- 提交時檢查 onsubmit
- 後臺數據檢查