當前位置：首頁 > 编程语言 > python >内容正文

python

python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...

發布時間：2024/6/30 python 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?昨日內容回顧? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

1.三種引入方式1.行內js <div onclick = 'add(3,4)'></div>//聲明一個函數function add(a,b){}2.內接js<script>/*js代碼*/</script>3.外接樣式<script src = 'main.js'></script>//在前端項目中當你看到index、main開頭，這個時候應該考慮是項目的入口文件//標簽中img標簽 link標簽 script a標簽里面的屬性 href src 都會往服務器發送請求 get請求函數的聲明def add():print('111')add()對象：萬事萬物皆對象 window對象：屬性和方法(瀏覽器提供了一些自己的屬性和方法)//在script腳本中聲明的變量、函數（方法）都會被掛載window，這個window是一個全局對象//全局對象和局部作用 2. 數據類型stringnumber NaN Infinityboolean 所有的類型都可以是boolean類型undefinenull//將數值類型轉換成字符串類型String()//將字符串類型轉換為數值類型Number()typeof 驗證類型

在js中，所有事件都是帶on的
alert是瀏覽器原生的方法
windos.alter('11') 也能執行。
但是在js里面，可以省略window
但是有一個例外，window.onload必須要寫全。
在js聲明對的變量，都被window掛起

var d1 = 11; console.log(window.d1);

查看console，就會看到11

直接查看window

console.log(window);

查看console，這里面有很多屬性，其中就有alert，還有聲明的變量。

函數調用，可以在任意位置
在script腳本中聲明的變量、函數（方法）都會被掛載window，這個window是一個全局對象
它可以在任意位置調用

?調用方法，一定要加括號，否則不執行，比如：

一、常用內置對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

所謂內置對象就是ECMAScript提供出來的一些對象，我們知道對象都是有相應的屬性和方法

數組Array

1.數組的創建方式?

字面量方式創建（推薦大家使用這種方式，簡單粗暴）

var colors = ['red','color','yellow']; console.log(colors);

　　查看結果：

使用for循環遍歷數組

var colors = ['red','color','yellow'];for (var i = 0;i < colors.length;i++){console.log(colors[i]); }

　　查看結果：

使用構造函數（后面會講）的方式創建使用new關鍵詞對構造函數進行創建對象

var colors2 = new Array(); console.log(colors2)

　　查看結果：

構造函數，必須要有關鍵字 new
函數名首字母大寫
括號里面，也可以加變量

var colors2 = new Array(1,2,3); console.log(colors2)

　　查看結果：

2.數組的賦值

var arr = []; //通過下標進行一一賦值 arr[0] = 123; arr[1] = '哈哈哈'; arr[2] = '嘿嘿嘿' console.log(arr)

查看結果：

3.數組的常用方法

3.1 數組的合并?concat()

var north = ['北京','山東','天津']; var south = ['東莞','深圳','上海'];var newCity = north.concat(south); console.log(newCity)

　　查看結果：

3.2 join()?將數組中的元素使用指定的字符串連接起來，它會形成一個新的字符串?

var score = [98,78,76,100,0]; var str = score.join('|'); console.log(str);//98|78|76|100|0

　　查看結果：

3.3?將數組轉換成字符串 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); 返回數組的一段，前開后閉

var arr = ['張三','李四','王文','趙六']; var newArr = arr.slice(1,3); console.log(newArr);//["李四", "王文"]

　　查看結果：

3.5 pop 移除數組的最后一個元素

var arr = ['張三','李四','王文','趙六']; var newArr = arr.pop(); console.log(newArr);//["張三", "李四"，"王文"]

　　查看結果：

3.6 push() 向數組最后添加一個元素?

var arr = ['張三','李四','王文','趙六']; var newArr = arr.push('小馬哥'); console.log(newArr);//["張三", "李四"，"王文"，"趙六"，"小馬哥"]

　　查看結果：

3.7 reverse() 翻轉數組

var names = ['alex','xiaoma','tanhuang','angle'];//4.反轉數組 names.reverse(); console.log(names);

　　查看結果：

3.8 sort對數組排序

var names = ['alex','xiaoma','tanhuang','abngel']; names.sort(); console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]

　　查看結果：

?3.9?判斷是否為數組：isArray()

isArray是最新html5的方法?

布爾類型值 = Array.isArray(被檢測的值) ;

舉例：

var colors = ['red','color','yellow']; console.log(Array.isArray(colors));

查看結果：　

數組沒有去重的內置函數，需要自己寫代碼，來實現去重功能。

不能根據索引值插入！

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替換成字符串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分割字符串，并返回新的數組。如果第二個參數沒寫，表示返回整個數組，如果定義了個數，則返回數組的最大長度

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日期對象

創建日期對象只有構造函數一種方式,使用new關鍵字

//創建了一個date對象 var myDate = new Date();

//創建日期對象 var myDate=new Date(); //獲取一個月中的某一天 console.log(myDate.getDate()); //返回本地時間 console.log(myDate.toLocaleString());//2018/5/27 下午10:36:23

查看結果：

獲取標準時間

查看結果：

6.Math 內置對象

常用內置對象

?6.1 Math.ceil() 向上取整，'天花板函數'

var x = 1.234; //天花板函數表示大于等于 x，并且與它最接近的整數是2 var a = Math.ceil(x); console.log(a);//2

?查看結果：

6.2 Math.floor 向下取整，'地板函數'?

var x = 1.234; // 小于等于 x，并且與它最接近的整數 1 var b = Math.floor(x); console.log(b);//1

?查看結果：

6.3 求兩個數的最大值和最小值

//求兩個數的最大值最小值 console.log(Math.max(2,5));//5 console.log(Math.min(2,5));//2

?查看結果：

6.4 隨機數 Math.random()?

返回0~1之間的小數，1是永遠取不到的，0是有可能取到的。

這個是很常用的，上面的不常用

var ran = Math.random(); console.log(ran);

?查看結果：

如果讓你取100-200之間的隨機數，怎么做？

背過公式：min - max之間的隨機數： min+Math.random()*(max-min)

// min - max之間的隨機數： min+Math.random()*(max-min) num = (100+Math.random()*(300-100)); console.log(num);

?查看結果：

推薦一個網站，關于js的教程很正規，鏈接如下：

https://developer.mozilla.org/zh-CN/

二、函數? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

函數：就是將一些語句進行封裝，然后通過調用的形式，執行這些語句。

函數的作用：

將大量重復的語句寫在函數里，以后需要這些語句的時候，可以直接調用函數，避免重復勞動。
簡化編程，讓編程模塊化。

console.log("hello world");sayHello(); //調用函數//定義函數：function sayHello(){console.log("hello");console.log("hello world");}

僵尸代碼：所有代碼，看起起來一樣，重復代碼太多。

為了避免僵尸代碼，需要用到函數。

第一步：函數的定義

函數定義的語法：

function 函數名字(){}

解釋如下：

function：是一個關鍵字。中文是“函數”、“功能”。
函數名字：命名規定和變量的命名規定一樣。只能是字母、數字、下劃線、美元符號，不能以數字開頭。
參數：后面有一對小括號，里面是放參數用的。
大括號里面，是這個函數的語句。

代碼結束，必須要加分號，一般網站的js代碼為了節省流量，js代碼會壓縮一下，它是通過分號來壓縮的。

第二步：函數的調用

函數調用的語法：

函數名字();

函數的參數：形參和實參?

函數的參數包括形參和實參

注意：實際參數和形式參數的個數，要相同。

例子：

sum(3,4); sum("3",4); sum("Hello","World");//函數：求和 function sum(a, b) {console.log(a + b); }

查看結果：

第三步：函數的返回值

例子：

console.log(sum(3, 4));//函數：求和 function sum(a, b) {return a + b; }

查看結果：　

三、偽數組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

arguments代表的是實參。有個講究的地方是：arguments只在函數中使用。

（1）返回函數實參的個數：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); //獲取形參的個數 console.log(arguments.length); //獲取實參的個數console.log("----------------"); }

　結果：　

調用fn函數，就算不傳參數，也不會報錯。它接收參數是一一對應的。

2）之所以說arguments是偽數組，是因為：arguments可以修改元素，但不能改變數組的長短。舉例：

fn(2,4); fn(2,4,6); fn(2,4,6,8);function fn(a,b) {arguments[0] = 99; //將實參的第一個數改為99arguments.push(8); //此方法不通過，因為無法增加元素 }

?查看結果，是因為push報錯了！

清空數組的幾種方式：

var array = [1,2,3,4,5,6];array.splice(0); //方式1：刪除數組中所有項目 array.length = 0; //方式1：length屬性可以賦值，在其它語言中length是只讀 array = []; //方式3：推薦

在js中，也可以對length修改。

arguents 用的很少

?四、關于DOM的事件操作? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

一、JavaScript的組成?

JavaScript基礎分為三個部分：

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：文檔對象模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。

現在寫的代碼，基本上是基于ECMAScript 第5個版本，簡稱es5

二、事件

JS是以事件驅動為核心的一門語言。

事件的三要素

事件的三要素：事件源、事件、事件驅動程序。

比如，我用手去按開關，燈亮了。這件事情里，事件源是：手。事件是：按開關。事件驅動程序是：燈的開和關。

再比如，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了。這件事情里，事件源是：X。事件是：onclick。事件驅動程序是：廣告關閉了。

于是我們可以總結出：誰引發的后續事件，誰就是事件源。

總結如下：

事件源：引發后續事件的html標簽。
事件：js已經定義好了（見下圖）。
事件驅動程序：對樣式和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，表示按一個鍵，然后松開。就會觸發此事件，它可以檢測，你必須要按enter鍵的時候才觸發。需要用到鍵盤編碼

對應的鍵值的Unicode 編碼

?onmouseover跟a:hover類似，也是懸停效果

onsumit用于表單提交事件，比如檢測一個表單中，是否每一項輸入，都符合規范。檢測通過后，才發送數據給后端，否則提示彈窗，信息沒有填寫完整，請重新輸入！

這些事件中，在ie 6,7,8可能有兼容性問題。在后面學習jquery時，它自動幫你做了兼容。在任何瀏覽器，都可以使用。這不是絕對的！只是說大部分。

下面針對這事件的三要素，進行分別介紹。

1、獲取事件源的方式（DOM節點的獲取）

獲取事件源的常見方式如下：

這3種方式，使用非常頻繁，重點掌握!

var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽 var arr1 = document.getElementsByTagName("div"); //方式二：通過標簽名獲得標簽數組 var arr2 = document.getElementsByClassName("hehe"); //方式三：通過類名獲得標簽數組

方式一：通過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

查看網頁：

方式二：通過標簽名獲得標簽數組

<!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 () {// 通過標簽名獲得標簽數組var oP = document.getElementsByTagName('p');console.log(oP);}</script> </body> </html> View Code

查看結果：

方式三：通過類名獲得標簽數組

<!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 () {// 通過類名獲得標簽數組var oP2 = document.getElementsByClassName('item1');console.log(oP2);}</script> </body> </html> View Code

查看結果：

2、綁定事件的方式

方式一：直接綁定匿名函數?

<div id="box1" ></div><script type="text/javascript">var div1 = document.getElementById("box1");//綁定事件的第一種方式 div1.onclick = function () {alert("我是彈出的內容");} </script> View Code

方式二：先單獨定義函數，再綁定

<!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

查看網頁，點擊紅色區域，就會彈框

注意上方代碼的注釋。綁定的時候，是寫eject，不是寫eject()。eject代表的是整個函數，而eject()代表的是返回值。

方式三：行內綁定?

查看網頁，點擊紅色區域，就會彈框

注意第一行代碼，綁定時，是寫的"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區域時，還原屬性 oDiv.onmouseout = function () {oDiv.style.width = "100px";oDiv.style.height = "100px";oDiv.style.backgroundColor = "pink";}}</script> </body> </html> View Code

查看網頁，點擊紅色區域，效果如下：

?第二個例子：

<!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');//定義函數，通過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

網頁效果如下：

上方代碼的注意事項：

在js里寫屬性值時，要用引號
在js里寫屬性名時，是backgroundColor，不是CSS里面的background-Color。記得所有的像css屬性的text-*，line-*、backgroun-*等在js中都寫成駝峰

onload事件

當頁面加載（文本和圖片）完畢的時候，觸發onload事件。

舉例：

有一點我們要知道：js的加載是和html同步加載的。因此，如果使用元素在定義元素之前，容易報錯。這個時候，onload事件就能派上用場了，我們可以把使用元素的代碼放在onload里，就能保證這段代碼是最后執行。

建議是：整個頁面上所有元素加載完畢在執行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

網頁效果：

2.要求實現效果：當鼠標懸停在img上時，更換為另外一張圖片；鼠標離開時，還原為本來的圖片。

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script>//window.onload頁面加載完畢以后再執行此代碼 window.onload = function () {//需求：鼠標放到img上，更換為另一張圖片，也就是修改路徑（src的值）。//步驟：//1.獲取事件源//2.綁定事件//3.書寫事件驅動程序//1.獲取事件源var img = document.getElementById("box");//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件) img.onmouseover = function () {//3.書寫事件驅動程序(修改src) img.src = "images/jd2.png"; // this.src = "images/jd2.png"; }//1.獲取事件源var img = document.getElementById("box");//2.綁定事件(懸停事件：鼠標進入到事件源中立即出發事件) 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張京東搜索框的圖片，一個是灰色，一個是紅色。

網頁效果：

?五、DOM介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

什么是DOM

DOM：文檔對象模型。DOM 為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。

DOM就是由節點組成的。

解析過程?

HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然后操作的時候修改的是該元素的屬性。

DOM樹（一切都是節點）

DOM的數據結構如下：

上圖可知，在HTML當中，一切都是節點：（非常重要）

元素節點：HMTL標簽。
文本節點：標簽中的文字（比如標簽之間的空格、換行）
屬性節點：：標簽的屬性。

整個html文檔就是一個文檔節點。所有的節點都是Object。元素就是標簽

DOM可以做什么

找對象（元素節點）
設置元素的屬性值
設置元素的樣式
動態創建和刪除元素
事件的觸發響應：事件源、事件、事件的驅動程序

CURD操作，也就是Create Retrieve Update Delete。分別表示創建，讀取，更新，刪除

DOM節點的獲取

DOM節點的獲取方式其實就是獲取事件源的方式

操作元素節點，必須首先找到該節點。有三種方式可以獲取DOM節點：

var div1 = document.getElementById("box1"); //方式一：通過id獲取單個標簽var arr1 = document.getElementsByTagName("div"); //方式二：通過標簽名獲得標簽數組var arr2 = document.getElementsByClassName("hehe"); //方式三：通過類名獲得標簽數組

既然方式二、方式三獲取的是標簽數組，那么習慣性是先遍歷之后再使用。

特殊情況：數組中的值只有1個。即便如此，這一個值也是包在數組里的。這個值的獲取方式如下：

document.getElementsByTagName("div1")[0]; //取數組中的第一個元素document.getElementsByClassName("hehe")[0]; //取數組中的第一個元素

DOM訪問關系的獲取

DOM的節點并不是孤立的，因此可以通過DOM節點之間的相對關系對它們進行訪問。如下：

節點的訪問關系，是以屬性的方式存在的。

JS中的父子兄訪問關系：

這里我們要重點知道parentNode和children這兩個屬性的用法。下面分別介紹。

獲取父節點

調用者就是節點。一個節點只有一個父節點，調用方式就是

節點.parentNode

（1）nextSibling：

? ? ?指的是下一個節點（包括標簽、空文檔和換行節點）

火狐、谷歌、IE9+版本：都指的是下一個節點（包括標簽、空文檔和換行節點）。
IE678版本：指下一個元素節點（標簽）。

（2）nextElementSibling：

火狐、谷歌、IE9+版本：都指的是下一個元素節點（標簽）。

總結：為了獲取下一個元素節點，我們可以這樣做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，綜合這兩個屬性，可以這樣寫：

下一個兄弟節點 = 節點.nextElementSibling || 節點.nextSibling

previous的中文是: 前一個

（1）previousSibling：

火狐、谷歌、IE9+版本：都指的是前一個節點（包括標簽、空文檔和換行節點）。
IE678版本：指前一個元素節點（標簽）。

（2）previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一個元素節點（標簽）。

總結：為了獲取前一個元素節點，我們可以這樣做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，綜合這兩個屬性，可以這樣寫：

前一個兄弟節點 = 節點.previousElementSibling || 節點.previousSibling

3、補充：獲得任意一個兄弟節點：

節點自己.parentNode.children[index]; //隨意得到兄弟節點

獲取單個的子節點

1、第一個子節點 | 第一個子元素節點：

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一個子節點（包括標簽、空文檔和換行節點）。
IE678版本：指第一個子元素節點（標簽）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一個子元素節點（標簽）。

總結：為了獲取第一個子元素節點，我們可以這樣做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，綜合這兩個屬性，可以這樣寫：

第一個子元素節點 = 節點.firstElementChild || 節點.firstChild

2、最后一個子節點 | 最后一個子元素節點：

（1）lastChild：

火狐、谷歌、IE9+版本：都指的是最后一個子節點（包括標簽、空文檔和換行節點）。
IE678版本：指最后一個子元素節點（標簽）。

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一個子元素節點（標簽）。

總結：為了獲取最后一個子元素節點，我們可以這樣做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，綜合這兩個屬性，可以這樣寫：

最后一個子元素節點 = 節點.lastElementChild || 節點.lastChild

獲取所有的子節點

（1）childNodes：標準屬性。返回的是指定元素的子節點的集合（包括元素節點、所有屬性、文本節點）。是W3C的親兒子。

火狐谷歌等高本版會把換行也看做是子節點。（了解）

用法：

子節點數組 = 父節點.childNodes; //獲取所有節點。

（2）children：非標準屬性。返回的是指定元素的子元素節點的集合。【重要】

它只返回HTML節點，甚至不返回文本節點。
在IE6/7/8中包含注釋節點（在IE678中，注釋節點不要寫在里面）。

雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。

用法：（用的最多）

子節點數組 = 父節點.children; //獲取所有節點。用的最多。

nodeType?

這里講一下nodeType。

nodeType == 1 表示的是元素節點（標簽）。記住：元素就是標簽。
nodeType == 2 表示是屬性節點了解
nodeType == 3 是文本節點了解

注意：上面列舉的內容只做了解，下面的內容才是重點

DOM節點操作（重要）

上一段的內容：節點的訪問關系都是屬性。

節點的操作都是函數（方法）

創建節點

格式如下：

新的標簽(元素節點) = document.createElement("標簽名");

比如，如果我們想創建一個li標簽，或者是創建一個不存在的adbc標簽，可以這樣做：

結果：

插入節點?

插入節點有兩種方式，它們的含義是不同的。

方式1：

父節點.appendChild(新的子節點);

解釋：父節點的最后插入一個新的子節點。

舉例：

<!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.創建節點var oP = document.createElement('p'); //創建一個p標簽 console.log(typeof oP);//2.插入節點 father.appendChild(oP);} </script></body> </html> View Code

查看網頁，會發現多了一個P標簽

方式2：

父節點.insertBefore(新的子節點,作為參考的子節點);

解釋：

在參考節點前插入一個新的節點。
如果參考節點為null，那么他將在父節點最后插入一個子節點。

<!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');//1.創建節點var oP = document.createElement('p'); //創建一個p標簽//2.插入節點 father.insertBefore(oP,child); //child表示參考節點 } </script></body> </html> View Code

查看網頁，會發現child上面多了P標簽

刪除節點

格式如下：

父節點.removeChild(子節點);

解釋：用父節點刪除子節點。必須要指定是刪除哪個子節點。

<!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');// //刪除節點child father.removeChild(child);} </script></body> </html> View Code

查看網頁，發現child已經被刪除了

如果我想刪除自己這個節點，可以這么做：

node1.parentNode.removeChild(node1);

刪除自己

查看網頁，發現child自己已經被刪除了

復制節點（克隆節點）

格式如下：

要復制的節點.cloneNode(); //括號里不帶參數和帶參數false，效果是一樣的。要復制的節點.cloneNode(true);

括號里帶不帶參數，效果是不同的。解釋如下：

不帶參數/帶參數false：只復制節點本身，不復制子節點。
帶參數true：既復制節點本身，也復制其所有的子節點。

<!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'); //創建一個p標簽var oP2 = oP.cloneNode(); //復制節點 console.log(oP2);//插入節點 father.appendChild(oP); //插入新建的p標簽 father.appendChild(oP2); //插入復制的p標簽 } </script></body> </html> View Code

查看網頁，會發現多個2個P標簽

設置節點的屬性

我們可以獲取節點的屬性值、設置節點的屬性值、刪除節點的屬性。

我們就統一拿下面這個標簽來舉例：

下面分別介紹。

1、獲取節點的屬性值

方式1：

元素節點.屬性; 元素節點[屬性];

舉例：（獲取節點的屬性值）　

<!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

網頁查看console

方式2：（推薦）

素節點.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

網頁查看console

方式1和方式2的區別在于：前者是直接操作標簽，后者是把標簽作為DOM節點。推薦方式2。

2、設置節點的屬性值

方式1舉例：（設置節點的屬性值）

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

網頁訪問，就會發現圖片換了

方式2：（推薦）

元素節點.setAttribute(屬性名, 新的屬性值);

舉例：

網頁查看：

方式2舉例：（設置節點的屬性值）

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

網頁查看，效果同上！

3、刪除節點的屬性

格式：

元素節點.removeAttribute(屬性名);

舉例：（刪除節點的屬性）

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

網頁訪問

查看網頁代碼，發現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.創建節點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.插入節點 father.insertBefore(oP,child); //指定的已有子節點之前插入新的子節點 username.value = '123'; //修改value值 console.log(father.innerText); //查看innerText屬性 console.log(father.innerHTML); //查看innerHTML屬性 </script></body> </html> View Code

網頁查看

表單控件，只有value才能修改值

查看console

就可以看出innerText和innerHTML直接的區別

總結：

innerHTML與innerText的用法與區別:
1、innerHTML:
　　也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。

2、innerText:
　　從起始位置到終止位置的內容, 但它去除Html標簽

轉載于:https://www.cnblogs.com/xiao987334176/p/9104910.html

總結

以上是生活随笔為你收集整理的python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ERROR：非静态成员引用必须与特定对象
下一篇： websocket python爬虫_p

python

python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...

?昨日內容回顧? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

一、常用內置對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

數組Array

1.數組的創建方式?

2.數組的賦值

3.數組的常用方法

3.1 數組的合并?concat()

3.2 join()?將數組中的元素使用指定的字符串連接起來，它會形成一個新的字符串?

3.3?將數組轉換成字符串 toString()?

3.4 slice(start,end); 返回數組的一段，前開后閉

3.5 pop 移除數組的最后一個元素

3.6 push() 向數組最后添加一個元素?

3.7 reverse() 翻轉數組

3.8 sort對數組排序

?3.9?判斷是否為數組：isArray()

4.字符串String

4.1 chartAt() 返回指定索引的位置的字符

4.2 concat 返回字符串值，表示兩個或多個字符串的拼接

4.3 replace(a,b) 將字符串a替換成字符串b

4.4 indexof() 查找字符的下標，如果找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法一樣

4.5 slice(start，end) 左閉右開 分割字符串

4.6 split('a',1) 以字符串a分割字符串，并返回新的數組。如果第二個參數沒寫，表示返回整個數組，如果定義了個數，則返回數組的最大長度

4.7 subStr(statr,end) 左閉右開

4.8 toLowerCase()轉小寫

4.9 toUpperCase()轉大寫

特別：

將number類型轉換成字符串類型

四舍五入

5.Date日期對象

6.Math 內置對象

?6.1 Math.ceil() 向上取整，'天花板函數'

6.2 Math.floor 向下取整，'地板函數'?

6.3 求兩個數的最大值和最小值

6.4 隨機數 Math.random()?

二、函數? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

函數的作用：

第一步：函數的定義

第二步：函數的調用

函數的參數：形參和實參?

第三步：函數的返回值

三、偽數組? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

（1）返回函數實參的個數：arguments.length

2）之所以說arguments是偽數組，是因為：arguments可以修改元素，但不能改變數組的長短。舉例：

清空數組的幾種方式：

?四、關于DOM的事件操作? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

一、JavaScript的組成?

二、事件

事件的三要素

總結如下：

代碼書寫步驟如下：（重要）

1、獲取事件源的方式（DOM節點的獲取）

方式一：通過id獲取單個標簽

方式二：通過 標簽名 獲得 標簽數組

方式三：通過 類名 獲得 標簽數組

2、綁定事件的方式

方式一：直接綁定匿名函數?

方式二：先單獨定義函數，再綁定

方式三：行內綁定?

3、事件驅動程序?

onload事件

事件案例

1、京東頂部廣告欄關閉??

2.要求實現效果：當鼠標懸停在img上時，更換為另外一張圖片；鼠標離開時，還原為本來的圖片。

?五、DOM介紹? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

什么是DOM

解析過程?

DOM樹（一切都是節點）

DOM可以做什么

DOM節點的獲取

DOM訪問關系的獲取

獲取父節點

獲取單個的子節點

1、第一個子節點 | 第一個子元素節點：

2、最后一個子節點 | 最后一個子元素節點：

獲取所有的子節點

nodeType?

DOM節點操作（重要）

創建節點

4.5 slice(start，end) 左閉右開分割字符串

方式二：通過標簽名獲得標簽數組

方式三：通過類名獲得標簽數組