python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
?昨日內容回顧? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
1.三種引入方式1.行內js <div onclick = 'add(3,4)'></div>//聲明一個函數(shù)function add(a,b){}2.內接js<script>/*js代碼*/</script>3.外接樣式<script src = 'main.js'></script>//在前端項目中 當你看到index、main開頭，這個時候應該考慮是項目的入口文件//標簽中img標簽 link標簽 script a標簽 里面的屬性 href src 都會往服務器發(fā)送請求 get請求函數(shù)的聲明def add():print('111')add()對象： 萬事萬物皆對象 window對象：屬性和方法(瀏覽器提供了一些自己的屬性和方法)//在script腳本中聲明的變量、函數(shù)（方法）都會被掛載window，這個window是一個全局對象//全局對象和局部作用 2. 數(shù)據(jù)類型stringnumber NaN Infinityboolean 所有的類型都可以是boolean類型undefinenull//將數(shù)值類型轉換成字符串類型String()//將字符串類型轉換為數(shù)值類型Number()typeof 驗證類型在js中，所有事件都是帶on的
alert是瀏覽器原生的方法
windos.alter('11') 也能執(zhí)行。
但是在js里面，可以省略window
但是有一個例外，window.onload必須要寫全。
在js聲明對的變量，都被window掛起
查看console，就會看到11
直接查看window
console.log(window);查看console，這里面有很多屬性，其中就有alert，還有聲明的變量。
?
函數(shù)調用，可以在任意位置
在script腳本中聲明的變量、函數(shù)（方法）都會被掛載window，這個window是一個全局對象
它可以在任意位置調用
?調用方法，一定要加括號，否則不執(zhí)行，比如：
<div οnclick="add(3,4)"></div>
一、常用內置對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
所謂內置對象就是ECMAScript提供出來的一些對象，我們知道對象都是有相應的屬性和方法
數(shù)組Array
1.數(shù)組的創(chuàng)建方式?
- 字面量方式創(chuàng)建（推薦大家使用這種方式，簡單粗暴）
查看結果：
使用for循環(huán)遍歷數(shù)組
var colors = ['red','color','yellow'];for (var i = 0;i < colors.length;i++){console.log(colors[i]); }查看結果：
- 使用構造函數(shù)（后面會講）的方式創(chuàng)建 使用new關鍵詞對構造函數(shù)進行創(chuàng)建對象
查看結果：
構造函數(shù)，必須要有關鍵字 new
函數(shù)名首字母大寫
括號里面，也可以加變量
查看結果：
?
?
2.數(shù)組的賦值
?
var arr = []; //通過下標進行一一賦值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿' console.log(arr)查看結果：
3.數(shù)組的常用方法
3.1 數(shù)組的合并?concat()
var north = ['北京','山東','天津']; var south = ['東莞','深圳','上海'];var newCity = north.concat(south); console.log(newCity)查看結果：
3.2 join()?將數(shù)組中的元素使用指定的字符串連接起來，它會形成一個新的字符串?
var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|0查看結果：
3.3?將數(shù)組轉換成字符串 toString()?
var score = [98,78,76,100,0]; //toString() 直接轉換為字符串 每個元素之間使用逗號隔開var str = score.toString(); console.log(str);//98,78,76,100,0查看結果：
3.4 slice(start,end); 返回數(shù)組的一段，前開后閉
var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]查看結果：
3.5 pop 移除數(shù)組的最后一個元素
var arr = ['張三','李四','王文','趙六']; var newArr = arr.pop(); console.log(newArr);//["張三", "李四"，"王文"]查看結果：
3.6 push() 向數(shù)組最后添加一個元素?
var arr = ['張三','李四','王文','趙六']; var newArr = arr.push('小馬哥'); console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]查看結果：
3.7 reverse() 翻轉數(shù)組
var names = ['alex','xiaoma','tanhuang','angle'];//4.反轉數(shù)組 names.reverse(); console.log(names);查看結果：
3.8 sort對數(shù)組排序
var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]查看結果：
?3.9?判斷是否為數(shù)組：isArray()
isArray是最新html5的方法?
布爾類型值 = Array.isArray(被檢測的值) ;舉例：
var colors = ['red','color','yellow']; console.log(Array.isArray(colors));查看結果：
?
數(shù)組沒有去重的內置函數(shù)，需要自己寫代碼，來實現(xiàn)去重功能。
不能根據(jù)索引值插入！
?
4.字符串String
字符串方法
?
4.1 chartAt() 返回指定索引的位置的字符
var str = 'alex'; var charset = str.charAt(1); console.log(charset);查看結果：
4.2 concat 返回字符串值，表示兩個或多個字符串的拼接
var str1 = 'al'; var str2 = 'ex'; console.log(str1.concat(str2,str2));//alexex查看結果：
4.3 replace(a,b) 將字符串a(chǎn)替換成字符串b
var a = '1234567755'; var newStr = a.replace("4567","****"); console.log(newStr);//123****755查看結果：
4.4 indexof() 查找字符的下標，如果找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法一樣
var str = 'alex'; console.log(str.indexOf('e'));//2 console.log(str.indexOf('p'));//-1查看結果：
4.5 slice(start，end) 左閉右開 分割字符串
var str = '小馬哥'; console.log(str.slice(1,2));//馬查看結果：
4.6 split('a',1) 以字符串a(chǎn)分割字符串，并返回新的數(shù)組。如果第二個參數(shù)沒寫，表示返回整個數(shù)組，如果定義了個數(shù)，則返回數(shù)組的最大長度
var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈'; console.log(str.split('a'));查看結果：
4.7 subStr(statr,end) 左閉右開
var str = '我的天呢,a是嘛,你在說什么呢?a哈哈哈'; console.log(str.substr(0,4));//我的天呢查看結果：
4.8 toLowerCase()轉小寫
var str = 'XIAOMAGE'; console.log(str.toLowerCase());//xiaomage查看結果：
4.9 toUpperCase()轉大寫
var str = 'xiaomage'; console.log(str.toUpperCase());查看結果：
特別：
將number類型轉換成字符串類型
//1.將number類型轉換成字符串類型 var num = 132.32522; var numStr = num.toString(); console.log(typeof numStr);?查看結果：
四舍五入
var num = 132.32522; //四舍五入,2表示保留2位 var newNum = num.toFixed(2); console.log(newNum);?查看結果：
?
5.Date日期對象
創(chuàng)建日期對象只有構造函數(shù)一種方式,使用new關鍵字
//創(chuàng)建了一個date對象 var myDate = new Date();
?
//創(chuàng)建日期對象 var myDate=new Date(); //獲取一個月中的某一天 console.log(myDate.getDate()); //返回本地時間 console.log(myDate.toLocaleString());//2018/5/27 下午10:36:23查看結果：
?
獲取標準時間
<script type="text/javascript">function getNowFormatDate() {var date = new Date();var seperator1 = "-";//設置成自己想要的日期格式 年-月-日var seperator2 = ":";//設置成自己想要的時間格式 時:分:秒var month = date.getMonth() + 1;//月var strDate = date.getDate();//日if (month >= 1 && month <= 9){month = "0" + month;}if (strDate >= 0 && strDate <= 9){strDate = "0" + strDate;}var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate+ " " + date.getHours() + seperator2 + date.getMinutes()+ seperator2 + date.getSeconds();return currentdate;}console.log(getNowFormatDate());</script> View Code查看結果：
6.Math 內置對象
常用內置對象
?6.1 Math.ceil() 向上取整，'天花板函數(shù)'
var x = 1.234; //天花板函數(shù) 表示大于等于 x，并且與它最接近的整數(shù)是2 var a = Math.ceil(x); console.log(a);//2?查看結果：
6.2 Math.floor 向下取整，'地板函數(shù)'?
var x = 1.234; // 小于等于 x，并且與它最接近的整數(shù) 1 var b = Math.floor(x); console.log(b);//1?查看結果：
6.3 求兩個數(shù)的最大值和最小值
//求 兩個數(shù)的最大值 最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2?查看結果：
6.4 隨機數(shù) Math.random()?
返回0~1之間的小數(shù)，1是永遠取不到的，0是有可能取到的。
這個是很常用的，上面的不常用
var ran = Math.random(); console.log(ran);?查看結果：
?
如果讓你取100-200之間的隨機數(shù)，怎么做？
背過公式：min - max之間的隨機數(shù)： min+Math.random()*(max-min)
// min - max之間的隨機數(shù)： min+Math.random()*(max-min) num = (100+Math.random()*(300-100)); console.log(num);?查看結果：
?
推薦一個網(wǎng)站，關于js的教程很正規(guī)，鏈接如下：
https://developer.mozilla.org/zh-CN/
?
?
二、函數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
函數(shù)：就是將一些語句進行封裝，然后通過調用的形式，執(zhí)行這些語句。
函數(shù)的作用：
-
將大量重復的語句寫在函數(shù)里，以后需要這些語句的時候，可以直接調用函數(shù)，避免重復勞動。
-
簡化編程，讓編程模塊化。
僵尸代碼：所有代碼，看起起來一樣，重復代碼太多。
為了避免僵尸代碼，需要用到函數(shù)。
第一步：函數(shù)的定義
函數(shù)定義的語法：
function 函數(shù)名字(){}解釋如下：
-
function：是一個關鍵字。中文是“函數(shù)”、“功能”。
-
函數(shù)名字：命名規(guī)定和變量的命名規(guī)定一樣。只能是字母、數(shù)字、下劃線、美元符號，不能以數(shù)字開頭。
-
參數(shù)：后面有一對小括號，里面是放參數(shù)用的。
-
大括號里面，是這個函數(shù)的語句。
代碼結束，必須要加分號，一般網(wǎng)站的js代碼為了節(jié)省流量，js代碼會壓縮一下，它是通過分號來壓縮的。
第二步：函數(shù)的調用
函數(shù)調用的語法：
函數(shù)名字();函數(shù)的參數(shù)：形參和實參?
函數(shù)的參數(shù)包括形參和實參
注意：實際參數(shù)和形式參數(shù)的個數(shù)，要相同。
例子：
sum(3,4); sum("3",4); sum("Hello","World");//函數(shù)：求和 function sum(a, b) {console.log(a + b); }查看結果：
?
第三步：函數(shù)的返回值
例子：
console.log(sum(3, 4));//函數(shù)：求和 function sum(a, b) {return a + b; }查看結果：
?
三、偽數(shù)組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
arguments代表的是實參。有個講究的地方是：arguments只在函數(shù)中使用。
（1）返回函數(shù)實參的個數(shù)：arguments.length
例子：
fn(2,4); fn(2,4,6); fn(2,4,6,8);function fn(a,b,c) { console.log(arguments); console.log(fn.length); //獲取形參的個數(shù) console.log(arguments.length); //獲取實參的個數(shù)console.log("----------------"); }結果：
調用fn函數(shù)，就算不傳參數(shù)，也不會報錯。它接收參數(shù)是一一對應的。
?
2）之所以說arguments是偽數(shù)組，是因為：arguments可以修改元素，但不能改變數(shù)組的長短。舉例：
fn(2,4); fn(2,4,6); fn(2,4,6,8);function fn(a,b) {arguments[0] = 99; //將實參的第一個數(shù)改為99arguments.push(8); //此方法不通過，因為無法增加元素 }?查看結果，是因為push報錯了！
?
清空數(shù)組的幾種方式：
var array = [1,2,3,4,5,6];array.splice(0); //方式1：刪除數(shù)組中所有項目 array.length = 0; //方式1：length屬性可以賦值，在其它語言中l(wèi)ength是只讀 array = []; //方式3：推薦在js中，也可以對length修改。
arguents 用的很少
?
?四、關于DOM的事件操作? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
一、JavaScript的組成?
JavaScript基礎分為三個部分：
-
ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數(shù)、if語句、for語句等。
-
DOM：文檔對象模型，操作網(wǎng)頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
現(xiàn)在寫的代碼，基本上是基于ECMAScript 第5個版本，簡稱es5
二、事件
JS是以事件驅動為核心的一門語言。事件的三要素
事件的三要素：事件源、事件、事件驅動程序。
比如，我用手去按開關，燈亮了。這件事情里，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。
再比如，網(wǎng)頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情里，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。
于是我們可以總結出：誰引發(fā)的后續(xù)事件，誰就是事件源。
總結如下：
-
事件源：引發(fā)后續(xù)事件的html標簽。
-
事件：js已經(jīng)定義好了（見下圖）。
-
事件驅動程序：對樣式和html的操作。也就是DOM。
代碼書寫步驟如下：（重要）
-
（1）獲取事件源：document.getElementById(“box”); //類似與ios語言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
-
（2）綁定事件： 事件源box.事件onclick = function(){ 事件驅動程序 };
-
（3）書寫事件驅動程序：關于DOM的操作
代碼舉例：
<body> <div id="box1"></div><script type="text/javascript">// 1、獲取事件源var div = document.getElementById("box1");// 2、綁定事件 div.onclick = function () {// 3、書寫事件驅動程序 alert("我是彈出的內容");} </script></body> View Code常見事件如下：
onkeyup，表示按一個鍵，然后松開。就會觸發(fā)此事件，它可以檢測，你必須要按enter鍵的時候才觸發(fā)。需要用到鍵盤編碼
對應的鍵值的Unicode 編碼
?onmouseover跟a:hover類似，也是懸停效果
onsumit用于表單提交事件，比如檢測一個表單中，是否每一項輸入，都符合規(guī)范。檢測通過后，才發(fā)送數(shù)據(jù)給后端，否則提示彈窗，信息沒有填寫完整，請重新輸入！
這些事件中，在ie 6,7,8可能有兼容性問題。在后面學習jquery時，它自動幫你做了兼容。在任何瀏覽器，都可以使用。這不是絕對的！只是說大部分。
?
下面針對這事件的三要素，進行分別介紹。
1、獲取事件源的方式（DOM節(jié)點的獲取）
獲取事件源的常見方式如下：
這3種方式，使用非常頻繁，重點掌握!
var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽 var arr1 = document.getElementsByTagName("div"); //方式二：通過 標簽名 獲得 標簽數(shù)組 var arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲得 標簽數(shù)組方式一：通過id獲取單個標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div id="box" class="box"><p>內容</p><p>內容</p><p>內容</p></div><script type="text/javascript">window.onload = function () {// 通過id獲取單個標簽var oDiv = document.getElementById('box');console.log(oDiv);}</script> </body> </html> View Code查看網(wǎng)頁：
方式二：通過 標簽名 獲得 標簽數(shù)組
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div id="box" class="box"><p>內容</p><p>內容</p><p>內容</p></div><script type="text/javascript">window.onload = function () {// 通過 標簽名 獲得 標簽數(shù)組var oP = document.getElementsByTagName('p');console.log(oP);}</script> </body> </html> View Code查看結果：
?
方式三：通過 類名 獲得 標簽數(shù)組
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title></head> <body><div id="box" class="box"><p class="item1">內容</p><p class="item1">內容</p><p>內容</p></div><script type="text/javascript">window.onload = function () {// 通過 類名 獲得 標簽數(shù)組var oP2 = document.getElementsByClassName('item1');console.log(oP2);}</script> </body> </html> View Code查看結果：
?
?
2、綁定事件的方式
方式一：直接綁定匿名函數(shù)?
<div id="box1" ></div><script type="text/javascript">var div1 = document.getElementById("box1");//綁定事件的第一種方式 div1.onclick = function () {alert("我是彈出的內容");} </script> View Code方式二：先單獨定義函數(shù)，再綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">.warp {width: 100px;height: 100px;background-color: red;}</style></head> <body><div id="box" class="warp"></div><script type="text/javascript">window.onload = function () {var oDiv = document.getElementById('box');//綁定事件的第二種方式 oDiv.onclick = eject; //注意，這里是eject，不是eject()。eject()指的是返回值。// 彈框方法function eject() {alert('hello');return 1;}}</script> </body> </html> View Code查看網(wǎng)頁，點擊紅色區(qū)域，就會彈框
注意上方代碼的注釋。綁定的時候，是寫eject，不是寫eject()。eject代表的是整個函數(shù)，而eject()代表的是返回值。
方式三：行內綁定?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">.warp {width: 100px;height: 100px;background-color: red;}</style></head> <body><div id="box" class="warp" onclick="fn()"></div><script type="text/javascript">function fn() {alert("我是彈出的內容");}</script> </body> </html> View Code?
查看網(wǎng)頁，點擊紅色區(qū)域，就會彈框
?
注意第一行代碼，綁定時，是寫的"fn()"，不是寫的"fn"。因為綁定的這段代碼不是寫在js代碼里的，而是被識別成了字符串。
3、事件驅動程序?
我們在上面是拿alert舉例，不僅如此，我們還可以操作標簽的屬性和樣式。舉例如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">#box {width: 100px;height: 100px;background-color: pink;cursor: pointer;}</style></head> <body><div id="box"></div><script type="text/javascript">window.onload = function () {var oDiv = document.getElementById("box");//點擊鼠標時，原本粉色的div變大了，背景變紅了 oDiv.onclick = function () {oDiv.style.width = "200px"; //屬性值要寫引號 oDiv.style.height = "200px";oDiv.style.backgroundColor = "red"; //屬性名是backgroundColor，不是background-Color }//鼠標移出div區(qū)域時，還原屬性 oDiv.onmouseout = function () {oDiv.style.width = "100px";oDiv.style.height = "100px";oDiv.style.backgroundColor = "pink";}}</script> </body> </html> View Code查看網(wǎng)頁，點擊紅色區(qū)域，效果如下：
?第二個例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css">.box{width: 100px;height: 100px;background-color: red;}</style> </head> <body> <button type="button" id="big">變大</button> <button type="button" id='small'>變小</button> <button type="button" id="circle">變圓</button> <button type="button" id="changeColor">變色</button><div class="box" id="hezi"></div><script type="text/javascript">window.onload = function() {//這樣寫很low，太繁瑣了// var oBig = document.getElementById('big');// var oBig = document.getElementById('big');// var oBig = document.getElementById('big');// var oBig = document.getElementById('big');//定義函數(shù)，通過id獲取對象function $(id){return document.getElementById(id);}//變大 $('big').onclick = function(){$('hezi').style.width = '150px';$('hezi').style.height = '150px';}//變小 $('small').onclick = function(){$('hezi').style.width = '50px';$('hezi').style.height = '50px';}//變圓 $('circle').onclick = function(){$('hezi').style.borderRadius = '50%';}//變色 $('changeColor').onclick = function(){$('hezi').style.backgroundColor = 'green';}} </script> </body> </html> View Code網(wǎng)頁效果如下：
?
上方代碼的注意事項：
- 在js里寫屬性值時，要用引號
- 在js里寫屬性名時，是backgroundColor，不是CSS里面的background-Color。記得所有的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峰
onload事件
當頁面加載（文本和圖片）完畢的時候，觸發(fā)onload事件。
舉例：
<script type="text/javascript">window.onload = function () {console.log("小馬哥"); //等頁面加載完畢時，打印字符串} </script>有一點我們要知道：js的加載是和html同步加載的。因此，如果使用元素在定義元素之前，容易報錯。這個時候，onload事件就能派上用場了，我們可以把使用元素的代碼放在onload里，就能保證這段代碼是最后執(zhí)行。
建議是：整個頁面上所有元素加載完畢在執(zhí)行js內容。所以，window.onload可以預防使用標簽在定義標簽之前。
?
事件案例
1、京東頂部廣告欄關閉??
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding: 0;margin: 0;}.top-banner{/*position: relative;*/background-color: rgb(0, 148, 124);}.top-banner .w{width: 1190px;position: relative;margin: 0 auto;}.top-banner .banner{display: block;width: 100%;height: 80px;background: url('images/close.jpg') no-repeat center 0;}.top-banner .close{position: absolute;right: 0;top:0;text-decoration: none;color: white;width: 20px;height: 20px;line-height: 20px;text-align: center;}.hide{display: none;}</style> </head> <body> <div class="top-banner" id="topBanner"><div class="w"><a href="#" class="banner"></a><a href="#" class="close" id="closeBanner">x</a></div> </div> <script type="text/javascript">// /需求：點擊案例，隱藏盒子。//思路：點擊a鏈接，讓top-banner這個盒子隱藏起來（加隱藏類名）。 window.onload = function(){// /1.獲取事件源和相關元素var closeBanner = document.getElementById('closeBanner');var topBanner = document.getElementById('topBanner');//2.綁定事件 closeBanner.onclick = function(){//3.書寫事件驅動程序//類控制//topBanner.className += ' hide';//保留原類名，添加新類名//topBanner.className = 'hide';//替換舊類名 topBanner.style.display = 'none';}} </script></body> </html> View Code網(wǎng)頁效果：
2.要求實現(xiàn)效果：當鼠標懸停在img上時，更換為另外一張圖片；鼠標離開時，還原為本來的圖片。
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>//window.onload頁面加載完畢以后再執(zhí)行此代碼 window.onload = function () {//需求：鼠標放到img上，更換為另一張圖片，也就是修改路徑（src的值）。//步驟：//1.獲取事件源//2.綁定事件//3.書寫事件驅動程序//1.獲取事件源var img = document.getElementById("box");//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發(fā)事件) img.onmouseover = function () {//3.書寫事件驅動程序(修改src) img.src = "images/jd2.png"; // this.src = "images/jd2.png"; }//1.獲取事件源var img = document.getElementById("box");//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發(fā)事件) img.onmouseout = function () {//3.書寫事件驅動程序(修改src) img.src = "images/jd1.png";}}</script> </head> <body><img id="box" src="images/jd1.png" style="cursor: pointer;"/></body> </html> View Code切了2張京東搜索框的圖片，一個是灰色，一個是紅色。
網(wǎng)頁效果：
?五、DOM介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
什么是DOM
DOM：文檔對象模型。DOM 為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規(guī)范。
DOM就是由節(jié)點組成的。
解析過程?
HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節(jié)點。然后操作的時候修改的是該元素的屬性。
DOM樹（一切都是節(jié)點）
DOM的數(shù)據(jù)結構如下：
?
上圖可知，在HTML當中，一切都是節(jié)點：（非常重要）
-
元素節(jié)點：HMTL標簽。
-
文本節(jié)點：標簽中的文字（比如標簽之間的空格、換行）
-
屬性節(jié)點：：標簽的屬性。
整個html文檔就是一個文檔節(jié)點。所有的節(jié)點都是Object。元素就是標簽
DOM可以做什么
-
找對象（元素節(jié)點）
-
設置元素的屬性值
-
設置元素的樣式
-
動態(tài)創(chuàng)建和刪除元素
-
事件的觸發(fā)響應：事件源、事件、事件的驅動程序
CURD操作，也就是Create Retrieve Update Delete。分別表示創(chuàng)建，讀取，更新，刪除
DOM節(jié)點的獲取
DOM節(jié)點的獲取方式其實就是獲取事件源的方式
操作元素節(jié)點，必須首先找到該節(jié)點。有三種方式可以獲取DOM節(jié)點：
var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽var arr1 = document.getElementsByTagName("div"); //方式二：通過 標簽名 獲得 標簽數(shù)組var arr2 = document.getElementsByClassName("hehe"); //方式三：通過 類名 獲得 標簽數(shù)組既然方式二、方式三獲取的是標簽數(shù)組，那么習慣性是先遍歷之后再使用。
特殊情況：數(shù)組中的值只有1個。即便如此，這一個值也是包在數(shù)組里的。這個值的獲取方式如下：
document.getElementsByTagName("div1")[0]; //取數(shù)組中的第一個元素document.getElementsByClassName("hehe")[0]; //取數(shù)組中的第一個元素DOM訪問關系的獲取
DOM的節(jié)點并不是孤立的，因此可以通過DOM節(jié)點之間的相對關系對它們進行訪問。如下：
節(jié)點的訪問關系，是以屬性的方式存在的。
JS中的父子兄訪問關系：
這里我們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。
?
獲取父節(jié)點
調用者就是節(jié)點。一個節(jié)點只有一個父節(jié)點，調用方式就是
節(jié)點.parentNode（1）nextSibling：
? ? ?指的是下一個節(jié)點（包括標簽、空文檔和換行節(jié)點）
-
火狐、谷歌、IE9+版本：都指的是下一個節(jié)點（包括標簽、空文檔和換行節(jié)點）。
-
IE678版本：指下一個元素節(jié)點（標簽）。
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一個元素節(jié)點（標簽）。
總結：為了獲取下一個元素節(jié)點，我們可以這樣做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，綜合這兩個屬性，可以這樣寫：
下一個兄弟節(jié)點 = 節(jié)點.nextElementSibling || 節(jié)點.nextSibling?
previous的中文是: 前一個
（1）previousSibling：
-
火狐、谷歌、IE9+版本：都指的是前一個節(jié)點（包括標簽、空文檔和換行節(jié)點）。
-
IE678版本：指前一個元素節(jié)點（標簽）。
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一個元素節(jié)點（標簽）。
總結：為了獲取前一個元素節(jié)點，我們可以這樣做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，綜合這兩個屬性，可以這樣寫：
前一個兄弟節(jié)點 = 節(jié)點.previousElementSibling || 節(jié)點.previousSibling3、補充：獲得任意一個兄弟節(jié)點：
節(jié)點自己.parentNode.children[index]; //隨意得到兄弟節(jié)點
獲取單個的子節(jié)點
1、第一個子節(jié)點 | 第一個子元素節(jié)點：
（1）firstChild：
-
火狐、谷歌、IE9+版本：都指的是第一個子節(jié)點（包括標簽、空文檔和換行節(jié)點）。
-
IE678版本：指第一個子元素節(jié)點（標簽）。
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一個子元素節(jié)點（標簽）。
總結：為了獲取第一個子元素節(jié)點，我們可以這樣做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，綜合這兩個屬性，可以這樣寫：
第一個子元素節(jié)點 = 節(jié)點.firstElementChild || 節(jié)點.firstChild
2、最后一個子節(jié)點 | 最后一個子元素節(jié)點：
（1）lastChild：
-
火狐、谷歌、IE9+版本：都指的是最后一個子節(jié)點（包括標簽、空文檔和換行節(jié)點）。
-
IE678版本：指最后一個子元素節(jié)點（標簽）。
（2）lastElementChild：
- 火狐、谷歌、IE9+版本：都指的是最后一個子元素節(jié)點（標簽）。
總結：為了獲取最后一個子元素節(jié)點，我們可以這樣做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，綜合這兩個屬性，可以這樣寫：
最后一個子元素節(jié)點 = 節(jié)點.lastElementChild || 節(jié)點.lastChild
獲取所有的子節(jié)點
（1）childNodes：標準屬性。返回的是指定元素的子節(jié)點的集合（包括元素節(jié)點、所有屬性、文本節(jié)點）。是W3C的親兒子。
- 火狐 谷歌等高本版會把換行也看做是子節(jié)點。（了解）
用法：
子節(jié)點數(shù)組 = 父節(jié)點.childNodes; //獲取所有節(jié)點。
（2）children：非標準屬性。返回的是指定元素的子元素節(jié)點的集合。【重要】
- 它只返回HTML節(jié)點，甚至不返回文本節(jié)點。
- 在IE6/7/8中包含注釋節(jié)點（在IE678中，注釋節(jié)點不要寫在里面）。
雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。
用法：（用的最多）
子節(jié)點數(shù)組 = 父節(jié)點.children; //獲取所有節(jié)點。用的最多。
nodeType?
這里講一下nodeType。
-
nodeType == 1 表示的是元素節(jié)點（標簽） 。記住：元素就是標簽。
-
nodeType == 2 表示是屬性節(jié)點 了解
-
nodeType == 3 是文本節(jié)點 了解
?
注意：上面列舉的內容只做了解，下面的內容才是重點
DOM節(jié)點操作（重要）
上一段的內容：節(jié)點的訪問關系都是屬性。
節(jié)點的操作都是函數(shù)（方法）
創(chuàng)建節(jié)點
格式如下：
新的標簽(元素節(jié)點) = document.createElement("標簽名");比如，如果我們想創(chuàng)建一個li標簽，或者是創(chuàng)建一個不存在的adbc標簽，可以這樣做：
<script type="text/javascript">var a1 = document.createElement("li"); //創(chuàng)建一個li標簽var a2 = document.createElement("adbc"); //創(chuàng)建一個不存在的標簽console.log(a1);console.log(a2);console.log(typeof a1);console.log(typeof a2); </script>結果：
插入節(jié)點?
插入節(jié)點有兩種方式，它們的含義是不同的。
方式1：
父節(jié)點.appendChild(新的子節(jié)點);解釋：父節(jié)點的最后插入一個新的子節(jié)點。
舉例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><div id="father"></div><script type="text/javascript">window.onload = function(){var father = document.getElementById('father');//1.創(chuàng)建節(jié)點var oP = document.createElement('p'); //創(chuàng)建一個p標簽 console.log(typeof oP);//2.插入節(jié)點 father.appendChild(oP);} </script></body> </html> View Code查看網(wǎng)頁，會發(fā)現(xiàn)多了一個P標簽
方式2：
父節(jié)點.insertBefore(新的子節(jié)點,作為參考的子節(jié)點);解釋：
- 在參考節(jié)點前插入一個新的節(jié)點。
- 如果參考節(jié)點為null，那么他將在父節(jié)點最后插入一個子節(jié)點。
查看網(wǎng)頁，會發(fā)現(xiàn)child上面多了P標簽
?
刪除節(jié)點
格式如下：
父節(jié)點.removeChild(子節(jié)點);解釋：用父節(jié)點刪除子節(jié)點。必須要指定是刪除哪個子節(jié)點。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><div id="father"><div id="child"></div> </div><script type="text/javascript">window.onload = function(){var father = document.getElementById('father');var child = document.getElementById('child');// //刪除節(jié)點child father.removeChild(child);} </script></body> </html> View Code查看網(wǎng)頁，發(fā)現(xiàn)child已經(jīng)被刪除了
?
如果我想刪除自己這個節(jié)點，可以這么做：
node1.parentNode.removeChild(node1);刪除自己
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><div id="father"><div id="child"></div> </div><script type="text/javascript">window.onload = function(){var child = document.getElementById('child');//刪除自己 child.parentNode.removeChild(child);} </script></body> </html> View Code查看網(wǎng)頁，發(fā)現(xiàn)child自己已經(jīng)被刪除了
復制節(jié)點（克隆節(jié)點）
格式如下：
要復制的節(jié)點.cloneNode(); //括號里不帶參數(shù)和帶參數(shù)false，效果是一樣的。要復制的節(jié)點.cloneNode(true);括號里帶不帶參數(shù)，效果是不同的。解釋如下：
-
不帶參數(shù)/帶參數(shù)false：只復制節(jié)點本身，不復制子節(jié)點。
-
帶參數(shù)true：既復制節(jié)點本身，也復制其所有的子節(jié)點。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><div id="father"><div id="child"></div> </div><script type="text/javascript">window.onload = function(){var father = document.getElementById('father');var oP = document.createElement('p'); //創(chuàng)建一個p標簽var oP2 = oP.cloneNode(); //復制節(jié)點 console.log(oP2);//插入節(jié)點 father.appendChild(oP); //插入新建的p標簽 father.appendChild(oP2); //插入復制的p標簽 } </script></body> </html> View Code查看網(wǎng)頁，會發(fā)現(xiàn)多個2個P標簽
?
設置節(jié)點的屬性
我們可以獲取節(jié)點的屬性值、設置節(jié)點的屬性值、刪除節(jié)點的屬性。
我們就統(tǒng)一拿下面這個標簽來舉例：
<img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1">下面分別介紹。
1、獲取節(jié)點的屬性值
方式1：
元素節(jié)點.屬性; 元素節(jié)點[屬性];舉例：（獲取節(jié)點的屬性值）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];console.log(myNode.src);console.log(myNode.className); //注意，是className，不是class console.log(myNode.title);console.log("------------");console.log(myNode["src"]);console.log(myNode["className"]); //注意，是className，不是class console.log(myNode["title"]); </script></body> </html> View Code網(wǎng)頁查看console
方式2：（推薦）
素節(jié)點.getAttribute("屬性名稱");例子：
console.log(myNode.getAttribute("src")); console.log(myNode.getAttribute("class")); //注意是class，不是className console.log(myNode.getAttribute("title"));?完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];console.log(myNode.getAttribute("src"));console.log(myNode.getAttribute("class")); //注意是class，不是className console.log(myNode.getAttribute("title")); </script></body> </html> View Code網(wǎng)頁查看console
方式1和方式2的區(qū)別在于：前者是直接操作標簽，后者是把標簽作為DOM節(jié)點。推薦方式2。
2、設置節(jié)點的屬性值
方式1舉例：（設置節(jié)點的屬性值）
myNode.src = "images/2.jpg" //修改src的屬性值 myNode.className = "image2-box"; //修改class的name完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];myNode.src = "images/22.jpg" //修改src的屬性值 myNode.className = "image2-box"; //修改class的name</script></body> </html> View Code網(wǎng)頁訪問，就會發(fā)現(xiàn)圖片換了
?
方式2：（推薦）
元素節(jié)點.setAttribute(屬性名, 新的屬性值);舉例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];myNode.setAttribute('src','images/33.jpg'); //修改src的屬性值 </script></body> </html> View Code網(wǎng)頁查看：
方式2舉例：（設置節(jié)點的屬性值）
myNode.setAttribute("src","images/3.jpg"); myNode.setAttribute("class","image3-box"); myNode.setAttribute("id","你好");完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];myNode.setAttribute("src","images/3.jpg");myNode.setAttribute("class","image3-box");myNode.setAttribute("id","你好"); </script></body> </html> View Code網(wǎng)頁查看，效果同上！
?
3、刪除節(jié)點的屬性
格式：
元素節(jié)點.removeAttribute(屬性名);舉例：（刪除節(jié)點的屬性）
myNode.removeAttribute("class"); myNode.removeAttribute("id");完整代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style type="text/css"></style> </head> <body><img src="images/11.jpg" class="image-box" title="美女圖片" alt="美女" id="a1"><script type="text/javascript">var myNode = document.getElementsByTagName("img")[0];myNode.removeAttribute("class"); //刪除class屬性 myNode.removeAttribute("id"); //刪除id屬性 </script></body> </html> View Code網(wǎng)頁訪問
查看網(wǎng)頁代碼，發(fā)現(xiàn)class和id屬性不見了
?
補充：
innerHTML、innerText 、value
舉例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.t{color: red;}</style> </head> <body><div id="father"><div id="child"></div> </div><input type="text" name="" value="" id="username"> <script type="text/javascript">var father = document.getElementById('father');var child = document.getElementById('child');var username = document.getElementById('username');// 1.創(chuàng)建節(jié)點var oP = document.createElement('p');var oSpan = document.createElement('span');// console.log(typeof oP);// 設置文本 oP.innerText = '<span>哈哈哈</span>';// 設置類名 oSpan.className = 't';// 設置內容 oSpan.innerHTML = '<span>嘿嘿嘿</span>'// 2.插入節(jié)點 father.insertBefore(oP,child); //指定的已有子節(jié)點之前插入新的子節(jié)點 username.value = '123'; //修改value值 console.log(father.innerText); //查看innerText屬性 console.log(father.innerHTML); //查看innerHTML屬性 </script></body> </html> View Code網(wǎng)頁查看
表單控件，只有value才能修改值
查看console
就可以看出innerText和innerHTML直接的區(qū)別
?
總結：
innerHTML與innerText的用法與區(qū)別:
1、innerHTML:
也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
2、innerText:
從起始位置到終止位置的內容, 但它去除Html標簽
?
轉載于:https://www.cnblogs.com/xiao987334176/p/9104910.html
總結
以上是生活随笔為你收集整理的python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ERROR：非静态成员引用必须与特定对象
- 下一篇： CS294-112 深度强化学习 秋季学