當前位置：
首頁 >
Python学习 Day 046 - DOM 操作 二
發布時間：2025/3/14
36
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Python学习 Day 046 - DOM 操作 二
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
主要內容:
- 1.DOM的操作(創建,追加,刪除)
- 2.js中的面向對象
- 3.定時器
1. DOM的操作(創建,追加,刪除)
(1)DOM節點的獲取
-
-
nextElementSibling 獲取下一個兄弟節點
-
children 獲取所有的子標簽
(2) DOM的增刪操作
創建 createElement()
追加 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或對象字面量創建對象
(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.定時器
?
轉載于:https://www.cnblogs.com/wcx666/p/9936471.html
總結
以上是生活随笔為你收集整理的Python学习 Day 046 - DOM 操作 二的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斜率优化
- 下一篇： 基于Python技术栈的算法落地踩坑