Python學習 Day 046 - DOM 操作 二
阿新 • • 發佈:2018-11-09
主要內容:
- 1.DOM的操作(建立,追加,刪除)
- 2.js中的面向物件
- 3.定時器
1. DOM的操作(建立,追加,刪除)
(1)DOM節點的獲取
-
-
nextElementSibling 獲取下一個兄弟節點
-
children 獲取所有的子標籤
<script> var oP = document.getElementById("wuxia"); console.log(oP.parentNode); // 父級div標籤下的所有內容 console.log(oP.nextElementSibling.innerText); //蕭峰 console.log(oP.nextSibling.innerText); // IE瀏覽器 var a = oP.nextElementSibling|| oP.nextSibling; console.log(a); console.log(oP.parentNode.childen); </script>
(2) DOM的增刪操作
建立 createElement()
//既可以建立已有的標籤,還可以建立自定義的標籤 var oDiv = document.createElement('div')
追加 appendChild() 父子標籤操作
父.appendChild(oDiv);
刪除 removeChild()
父.removeChild(子節點);
自己.parentNode.removeChild(自己)
插入insertBefore()
父.insertBefore(新的子節點,要參考的節點)
利用建立刪除實現隱藏程式碼示例
<script> var oBtn = document.querySelector("#btn"); var oDel = document.querySelector("#del");var oFather = document.querySelector(".father"); var oP = null; var oA = null; oBtn.onclick = function(){ //建立 dom p標籤 oP = document.createElement("p"); oA = document.createElement("a"); //追加到父級標籤中 oFather.appendChild(oP); oFather.insertBefore(oA,oP); //設定物件屬性值 oA.href = 'http://www.baidu.com'; //設定值 oA.innerText="百度"; oP.innerHTML = "alex"; oP.setAttribute("class","active") }; oDel.onclick = function(){ //如果oP物件存在就結束程式 if (!oP){ return; // }else{ console.log(oFather); //將增加的p標籤移出 oFather.removeChild(oP) } } </script>
(3) 網頁中顯示隱藏效能消耗問題
1.可以通過控制元素的類名或者是style屬性,對元素進行顯示隱藏 好處: 可以在網頁中頻繁性的切換,主要控制的是display:none|block; 壞處: 文件初始化會有渲染開銷,但是這點開銷不算什麼. 2.通過DOM操作 appendChild和removeChild 對元素顯示隱藏 好處:文件初始化的時候不會產生渲染開銷 壞處: 不要在網頁中做頻繁性的切換,會產生效能消耗
(4)使用js模擬hover選擇器
<title>Title</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } ul{ width: 600px; height: 80px; line-height: 80px; text-align:center; overflow:hidden; } ul li{ float:left; margin: 0 10px; width: 80px; height: 80px; background: darkturquoise; color: #fff; } ul li.active{ background: red; } </style> </head> <body> <ul> <li>舉</li> <li>頭</li> <li>望</li> <li>明</li> <li>月</li> </ul> <script> var lists = document.getElementsByTagName("li"); for(var i =0;i<lists.length;i++){ lists[i].onclick = function(){ //在修改當前盒子樣式之前,現將所有盒子的類名置空 for(var j=0; j<lists.length;j++){ lists[j].className =""; } this.className = "active"; //修改當前 滑鼠進入盒子的樣式 } } </script>
(5)選項卡
<title>Title</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } #tab{ width: 480px; margin: 20px auto; border: 1px solid red; } ul{ width: 100%; overflow: hidden; } ul li{ float: left; width: 160px; height: 60px; line-height: 60px; text-align: center; background-color: #cccccc; } ul li a{ text-decoration: none; color:black; } li.active { background-color: darkcyan; } p{ display: none; height: 200px; text-align: center; line-height: 200px; background-color: darkgrey; } p.active{ display: block; } </style> </head> <body> <div> <div id="tab"> <ul> <li class = "active"> <a href="javascript:void(0);">首頁</a> </li> <li class = "active"> <a href="javascript:void(0);">新聞</a> </li> <li class = "active"> <a href="javascript:void(0);">圖片</a> </li> </ul> <p class="active">首頁內容</p> <p>新聞內容</p> <p>圖片內容</p> </div> </div> <script> var lists = document.getElementsByTagName("li"); var oPs = document.getElementsByTagName("P"); // var i; //i=3 變數提升 會導致 變數 是一個全域性作用域 //var 宣告變數 全域性作用域,存在變數提升 for(var i= 0; i<lists.length;i++){ //為了給每個dom新增事件 lists[i].currentIndex = i; console.dir(lists[i]); lists[i].onclick = function(){ for(var j = 0; j<lists.length;j++){ lists[j].className = ""; oPs[j].className = ''; } this.className = "active"; oPs[this.currentIndex].className = 'active' } } </script>
注意;變數提升問題
<script> // var a; // //變數提升 // console.log(a);//undefined // a = 1; // console.log(a); console.log(a); { var a = 2; } console.log(a); // let宣告的變數 1 塊級作用域 2.不存在變數提升 console.log(b); //找不到,不存在 { let b= 3; } console.log(b) </script>變數提升
通過es6中的let來解決變數提升
<script> var lists = document.getElementsByTagName("li"); var oPs = document.getElementsByTagName("P"); // var i; //i=3 變數提升 會導致 變數 是一個全域性作用域 //var 宣告變數 全域性作用域,存在變數提升 for(let i= 0; i<lists.length;i++){ //為了給每個dom新增事件 console.dir(lists[i]); lists[i].onclick = function(){ for(var j = 0; j<lists.length;j++){ lists[j].className = ""; oPs[j].className = ''; } this.className = "active"; oPs[i].className = 'active' } } </script>
2.js中的面向物件
(1)使用Object或物件字面量建立物件
// 建構函式方式建立物件 let person = new Object(); person.name = 'alex'; person.fav = function () { console.log(this); } //字面量方式建立 使用最多 var person2 = { name:'wusir', age:19, fav:function () { alert(this.age); } } person2.fav();
(2)工廠模式建立物件
function createPerson(name, age) { let person = new Object(); person.name = name; person.age = age; person.fav = function () { console.log(this); } return person; } function createFruit(name, age) { let fruit = new Object(); fruit.name = name; fruit.age = age; fruit.fav = function () { console.log(this); } return fruit; } var p1 = createPerson('alex',17); var f1 = createFruit('桃子',1); console.log(p1 instanceof Object); console.log(f1 instanceof Object);
(3)建構函式模式建立物件
function Person(name,age){ this.name = name; this.age = age; this.fav = function () { alert(this.name) } } function Fruit(name,age){ this.name = name; this.age = age; this.fav = function () { alert(this.name) } } // 建立物件 使用new關鍵字 var p1 = new Person('alex',17); var f1 = new Fruit('桃子',17); console.log(p1 instanceof Object); console.log(f1 instanceof Object); console.log(p1 instanceof Person); console.log(f1 instanceof Fruit);
(4)原型模式建立物件
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.fav = function () { console.log(this.name); } let p1 = new Person('alex',16); let p2 = new Person('alex',16); p1.fav(); //es6 使用class關鍵字來建立物件 class Furit{ //初始化的構造器方法 constructor(name='alex',age=16){ this.name = name; this.age = age } //物件的單體模式 等價於fav:function(){} fav(){ console.log(this.age); } } var f1 = new Furit(); f1.fav();
es6的用法: 1.模板字串 `` 變數名使用${} 2.class 類的概念 3.箭頭函式 ()=>3 等價於 function(){ return 3}
3.定時器