第一節 DOM · Javascript

復習 //點擊按鈕,將輸入框的值添加到ul ~~~ <input type="text" id="txt"><button id="btn">btn</button> <ul id="parent"> </ul> <script> var parent = document.getElementById("parent"); var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); btn.onclick = function(){ let value = txt.value; let li = document.createElement("li"); li.innerHTML = value; parent.appendChild(li); } </script> ~~~ # 拓展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文檔的<body>標簽 ~~~ ? 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 id="parent"> </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 - 隔行變色 - 添加 ![](https://box.kancloud.cn/bbb91b8ebc74e8cb4ad24386962552dd_512x334.png) ~~~ //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> ~~~