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); //
(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");
(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.定時器