拓展DOM
## 1.父節點parentNode(親爹)
* parentElement
~~~
<div>
<p id="child">hello world</p>
</div>
<script>
let child = document.getElementById("child");
console.log(child.parentNode)
</script>
~~~
例子
~~~
<li>蘋果<a href="#">刪除</a></li>
<li>小米<a href="#">刪除</a></li>
<li>華為<a href="#">刪除</a></li>
<script>
var childs = document.getElementsByTagName("a");
for(let i =0;i<childs.length;i++){
childs[i].onclick = function(){
this.parentNode.style.display = "none";
return false;
}
}
</script>
~~~
## 2.子節點childNodes和children的區別
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
console.log(childs.length)
//輸出7,將空格也算作節點
</script>
~~~
> childNodes是獲取所有類型的子節點
> children只會獲取元素類型子節點
eg:將子節點的背景色變為粉色
~~~
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementsByTagName("ul")[0].childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType == 1){
childs[i].style.color = "red";
}
}
</script>
~~~
* firstChild //包含所有類型的節點
* firstElementChild //IE9以下不兼容
* lastChild //所有類型的節點
* lastElementChild //IE9以下不支持
兼容問題的解決
//firstElementChild在ie9以上是一個對象，9以下undefined
~~~
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parent = document.getElementById("parent");
var first = parent.firstElementChild;
if(first){
first.style.color = "red";
}else{
parent.firstChild.style.color="green"
}
</script>
~~~
## 3.兄弟節點
> nextSibling
> nextElementSibling //IE9以下不支持
> previousSibling
> previousElementSibling //IE9以下不支持
## 4.
* offsetParent //獲取給了定位元素的父級
* offsetLeft //返回元素的相對定位父元素水平偏移位置。 返回number
* offsetTop //返回元素的相對定位父元素水平垂直偏移位置。
* offsetWidth //返回元素的寬度 -- 包含width,padding,border
* offsetHeight //返回元素的高度
~~~
//獲取元素距離頂部的距離
function getTop(element){
var realTop = element.offsetTop;
var parent = element.offsetParent;
while(parent !==null){
realTop+=parent.offsetTop;
parent = parent.offsetParent;
}
return realTop;
}
~~~
~~~
//jquery的實現
$(element).offset().top;
~~~
## 5.操作元素的屬性
* oDiv.style.display = "none";
* oDiv.style["display"]="none";
* oDiv.setAttribute("style","display:none");
~~~
<input type="text" id="txt">
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
btn.onclick = function(){
// txt.value = "hello world"
txt.setAttribute("value","hello world")
}
</script>
~~~
> 獲取,設置,刪除
> getAttribute(AttrName);
> setAttribute(AttrName,AttrValue);
> removeAttribute(AttrName);
demo:動態給div添加title屬性
~~~
<div id="test">hello world</div>
<script>
let test = document.getElementById("test");
test.onclick = function(){
test.setAttribute("title","setAttr")
}
</script>
~~~
## 6.瀏覽器窗口可視區域的大小
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
~~~
? window.innerHeight - 瀏覽器窗口的內部高度
? window.innerWidth - 瀏覽器窗口的內部寬度
~~~
二、對于 Internet Explorer 8、7、6、5：
~~~
? document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
~~~
//沒有DOCTYPE的IE中,瀏覽器顯示窗口可以通過以下獲取
Document對象的body屬性對應HTML文檔的標簽
~~~
? document.body.clientHeight
? document.body.clientWidth
~~~
~~~
// 獲取可視區域的width
var vw = document.body.clientWidth || document.documentElement.clientWidth;
//設備的寬度
var dw = window.screen.availWidth;
console.log(vw);
~~~
## 7獲取網頁內容的寬高
* document.documentElement.scrollHeight
* document.documentElement.scrollWidth
## 8文檔碎片
> 文檔碎片可以提高DOM操作性能
> document.createDocumentFragment()
> 原理:將dom暫存在fragment上，之后一次性添加到dom
~~~
</ul>
<script>
var parent = document.getElementById("parent");
var oFrag = document.createDocumentFragment();
for(var i=0;i<10;i++){
var li = document.createElement("li");
oFrag.appendChild(li);
}
parent.appendChild(oFrag);
</script>
~~~
## 9表格應用
* 獲取
* tBodies,tHead,rows,cells
* 隔行變色
* 添加
~~~
//css
table,th,td{
border:1px solid #333;
width:500px;
line-height:50px;
text-align: center;
}
table{
border-collapse: collapse;
}
//html
<table>
<thead>
<tr><th>商城</th><th>手機</th></tr>
</thead>
<tbody>
<tr>
<td>天貓</td><td>小米</td>
</tr>
<tr>
<td>天貓</td><td>小米</td>
</tr>
<tr>
<td>天貓</td><td>小米</td>
</tr>
<tr>
<td>天貓</td><td>小米</td>
</tr>
<tr>
<td>天貓</td><td>小米</td>
</tr>
</tbody>
</table>
~~~
~~~
//JS
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tRows = table.tBodies[0].rows;
tHead.style.backgroundColor = "#ff2d51";
for(let i=0;i<tRows.length;i++){
if(i%2 ==0 ){
tRows[i].style.backgroundColor = "#eee";
}else{
tRows[i].style.backgroundColor = "#44cef6"
}
}
</script>
~~~
動態添加表格
~~~
<h4>動態添加表格</h4>
<div>
<input type="text" id="shop">
<input type="text" id="cellPhone">
<button id="add">add</button>
</div>
<table id="table">
<thead>
<tr><th>商城</th><th>手機</th></tr>
</thead>
<tbody>
<tr>
<td>天貓</td><td>小米</td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tBody = table.tBodies[0];
let shop = document.getElementById("shop");
let cellPhone = document.getElementById("cellPhone");
let add = document.getElementById("add");
add.onclick = function(){
let tr = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerHTML = shop.value;
tr.appendChild(td1);
let td2 = document.createElement("td");
td2.innerHTML = cellPhone.value;
tr.appendChild(td2);
tBody.appendChild(tr);
}
</script>
~~~
