JavaScript中DOM：document（網頁）

.1 DOM: document=網頁

在JS中，瀏覽器已經為我們提供了document對象

document對象代表整個網頁，該對象由瀏覽器提供，可以直接使用

<body>

<button id="btn">我是一個按鈕</button>

<script>

// 在JS中，瀏覽器已經為我們提供了document對象

// document對象代表整個網頁，該對象由瀏覽器提供，可以直接使用

// getElementById()是document的方法，通過方法可以根據元素的id屬性獲取一個元素

var btn = document.getElementById('btn');

// 修改btn的innerHTML屬性

btn.innerHTML = "I'm Button";

// alert(btn.innerHTML);

// alert(btn);

// 通過JS來修改button中的文字

</script>

</body>

對象的分類:

JS中，可以將對象分為“內部對象”、“宿主對象”和“自定義對象”三種。

1，內部對象

js中的內部對象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math這兩個對象又被稱為“內置對象”，這兩個對象在腳本程序初始化時被創建，不必實例化這兩個對象。

2.宿主對象

宿主對象就是執行JS腳本的環境提供的對象。對于嵌入到網頁中的JS來說，其宿主對象就是瀏覽器提供的對象，所以又稱為瀏覽器對象，如IE、Firefox等瀏覽器提供的對象。不同的瀏覽器提供的宿主對象可能不同，即使提供的對象相同，其實現方式也大相徑庭！這會帶來瀏覽器兼容問題，增加開發難度。

瀏覽器對象有很多，如Window和Document，Element，form，image，等等。

3.自定義對象

顧名思義，就是開發人員自己定義的對象。JS允許使用自定義對象，使JS應用及功能得到擴充

1.2 事件（event）

事件（event）

- 事件指用戶和瀏覽器的交互瞬間

- 在網頁中，像點擊鼠標、縮放窗口、點擊鍵盤、移動鼠標...

- 可以在事件時來對事件做一些處理，對其進行響應

<body>

<!-- 設置事件響應的方式一:

- 可以通過在元素的事件屬性中設置js代碼的形式來響應事件

https://developer.mozilla.org/zh-CN/docs/Web/Events -->

<!--<button id="btn" onmouseenter="alert('你點我干嘛！');">點我一下</button>-->

<button id="btn">點我一下</button>

<script>


/*設置事件響應的方式二:

- 可以在script標簽來設置事件的響應*/

// 獲取要設置事件的對象

var btn = document.getElementById('btn');

// 可以為元素對應的事件屬性設置響應函數形式來處理事件

btn.onclick = function () {

alert('哈哈哈');

};

</script>

</body>

1.3網頁加載window.onload:

網頁的加載是按照自上向下的順序一行一行加載的

Window.onload 函數只能綁定一個!

如果將script標簽寫在網頁的上方，它會優先于body加載

編寫DOM相關的代碼時，有兩個編寫位置：

1.編寫在body標簽的最后

2.編寫在window.onload = function(){}的響應函數中

// 希望還是將代碼寫在網頁上邊

// 希望這些代碼，可以在網頁加載完畢之后在執行

// load事件表示資源加載，當資源加載完畢后事件會觸發

window.onload = function () {

// window的load事件，會在網頁加載完畢后觸發

// 可以將希望在網頁加載完才執行的代碼，統一設置在load事件的響應函數中

// 這樣即可確保代碼在網頁加載完成后才執行

//獲取id為btn的元素

var btn = document.getElementById('btn');

//為btn綁定單擊響應函數

btn.onclick = function () {

alert('哈哈哈哈');

};

};

1.4 DOM 查詢:

<script>

//定義一個函數，用來解決綁定代碼重復的問題

/*

參數：

id 要綁定單擊事件的按鈕的id

callback 事件的響應函數

*/

function myClick(id, callback){

var btn = document.getElementById(id);

btn.onclick = callback;

}

window.onload = function () {

//為id為btn01的按鈕綁定一個單擊響應函數

//獲取按鈕對象

var btn01 = document.getElementById('btn01');

// 為其綁定單擊響應函數

btn01.onclick = function () {

// getElementById()用來根據id屬性來獲取一個元素

// 查找#bj節點

var bj = document.getElementById('bj');

// innerHTML 可以用來查看和設置元素內部的html代碼

alert(bj.innerHTML);

};

// 為btn02綁定一個單擊響應函數

var btn02 = document.getElementById('btn02');

btn02.onclick = function () {

// 查找所有li節點

// getElementsByTagName() 用于根據標簽名來獲取一組元素節點對象

// 返回是一個類數組對象，所有符合條件的元素都會一起返回

var lis = document.getElementsByTagName('li');

// 遍歷數組

for(var i=0; i<lis.length; i++){

alert(lis[i].innerHTML);

}

};

//為id為btn03的按鈕綁定一個單擊響應函數

var btn03 = document.getElementById('btn03');

btn03.onclick = function () {

// 查找name=gender的所有節點

// getElementsByName() 根據元素的name屬性來獲取一組元素節點對象

var inps = document.getElementsByName('gender');

// 遍歷inps

for(var i=0; i<inps.length; i++){

// 獲取自結束標簽的innerHTML，會返回空串

// alert(inps[i].innerHTML);

/*

讀取一個元素的屬性：

元素.屬性名

例子：

name屬性 元素.name

value屬性 元素.value

id屬性 元素.id

特殊：

class屬性 元素.className

修改屬性：

元素.屬性名 = 屬性值

*/

// alert(inps[i].className);

alert(inps[i].value);

}

};

//為btn04綁定一個單級響應函數

var btn04 = document.getElementById('btn04');

btn04.onclick = function () {

// 獲取id為city的節點

var city = document.getElementById('city');

// 查找#city下所有li節點

var li = city.getElementsByTagName('li');

// li = document.querySelectorAll('#city li');

alert(li.length);

};

// 為btn05綁定一個單擊響應函數

var btn05 = document.getElementById('btn05');

btn05.onclick = function () {

// 獲取id為city的元素

var city = document.getElementById('city');

// 返回#city的所有子節點

// childNodes 是元素的屬性，可以用來獲取當前元素的所有子節點

// childNodes會返回當前元素的所有子節點（包括元素和文本）

// IE8以下的瀏覽器不會將空白的文本節點當成子節點

var cns = city.childNodes;

//遍歷cns

// for(var i=0; i<cns.length; i++){

// alert(cns[i]);

// }

// alert(cns.length);

/*

children 是元素的屬性，用來獲取當前元素的子元素

*/

var cr = city.children;

alert(cr.length);

};

// 為id為btn06的按鈕綁定一個單擊響應函數

myClick('btn06', function () {

// 獲取id為phone的元素

var phone = document.getElementById('phone');

// 返回#phone的第一個子節點

// firstChild用于獲取元素的第一個子節點（包括空白的文本節點）

// lastChild 用于獲取當前元素的最后一個子節點

// firstElementChild 用來獲取當前元素的第一個子元素

// lastElementChild 用來獲取當前元素的最后一個子元素

var fc = phone.firstChild;

var fec = phone.firstElementChild;

alert(fec);

});

myClick('btn07',function () {

//獲取id為北京元素

var bj = document.getElementById('bj');

// 返回#bj的父節點

// parentNode 用來獲取一個元素的父節點

var pn = bj.parentNode;

// innerText用來獲取標簽內部的文本內容，會自動去除html標簽

alert(pn.innerText);

});

myClick('btn08',function () {

// 獲取id為android的元素

var and = document.getElementById('android');

// 返回#android的前一個兄弟節點

// previousSibling 用來獲取當前元素的前一個兄弟節點

// previousElementSibling 用來獲取當前元素的前一個兄弟元素

// nextSibling 獲取當前元素的下一個兄弟節點

// nextElementSibling 獲取當前元素的下一個兄弟元素

var prev = and.previousSibling;

prev = and.previousElementSibling;

// and.nextElementSibling

alert(prev);

});

// 返回#username的value屬性值

myClick('btn09',function () {

// 獲取id為username的元素

var um = document.getElementById('username');

alert(um.value);

});

// 設置#username的value屬性值

myClick('btn10',function () {

var um = document.getElementById('username');

um.value = "老弟可真帥??！";

});

// 返回#bj的文本值

myClick('btn11',function () {

// 獲取id為bj的元素

var bj = document.getElementById('bj');

// alert(bj.innerHTML);

// alert(bj.innerText);

// bj.innerHTML = '深圳';

// 獲取bj的第一個子節點

// var fc = bj.firstChild;

// 文本節點的nodeValue，表示的是文本節點中的文字

// alert(fc.nodeValue);

alert(bj.firstChild.nodeValue);

});

};

</script>

</head>

<body>

<div id="total">

<div class="inner">

<p>

你喜歡哪個城市?

</p>

<ul id="city">

<li id="bj">北京</li>

<li>上海</li>

<li>東京</li>

<li>首爾</li>

</ul>

<br>

<br>

<p>

你喜歡哪款單機游戲?

</p>

<ul id="game">

<li id="rl">紅警</li>

<li>實況</li>

<li>極品飛車</li>

<li>魔獸</li>

</ul>

<br />

<br />

<p>

你手機的操作系統是?

</p>

<ul id="phone">

<li>IOS</li>

<li id="android">Android</li><li>Windows Phone</li></ul>

</div>

<div class="inner">

gender:

<input class="haha" type="radio" name="gender" value="male" >

Male

<input class="haha" type="radio" name="gender" value="female">

Female

<br>

<br>

name:

<input type="text" name="name" id="username" value="abcde">

</div>

</div>

<div id="btnList">

<div><button id="btn01">查找#bj節點</button></div>

<div><button id="btn02">查找所有li節點</button></div>

<div><button id="btn03">查找name=gender的所有節點</button></div>

<div><button id="btn04">查找#city下所有li節點</button></div>

<div><button id="btn05">返回#city的所有子節點</button></div>

<div><button id="btn06">返回#phone的第一個子節點</button></div>

<div><button id="btn07">返回#bj的父節點</button></div>

<div><button id="btn08">返回#android的前一個兄弟節點</button></div>

<div><button id="btn09">返回#username的value屬性值</button></div>

<div><button id="btn10">設置#username的value屬性值</button></div>

<div><button id="btn11">返回#bj的文本值</button></div>

</div>

</body>

1.5Dom練習切換圖片:

<style>

#outer{

width: 520px;

background-color: #bfa;

margin: 50px auto;

text-align: center;

}

img{

vertical-align: bottom;

margin: 10px;

}

</style>

<script>

window.onload = function () {

// 點擊按鈕切換圖片，點擊上一張切換到上一張，點擊下一張切換到下一張

// 獲取圖片標簽

var img = document.getElementsByTagName('img')[0];

// 切換圖片實際上就是修改img的src屬性

// img.src = "img/3.jpg";

// 創建一個數組，用來存儲圖片的路徑

var imgPath = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

//創建一個變量用來存儲當前顯示的圖片的索引

var current = 0;

// 設置圖片的信息

var info = document.getElementById('info');

info.innerHTML = '一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

//為兩個按鈕綁定單擊響應函數

var prev = document.getElementById('prev');

var next = document.getElementById('next');

// 如何做到在五張圖片之間切換？

prev.onclick = function () {

// 上一張

// 索引自減

current--;

//判斷current是否小于0

if(current < 0){

current = imgPath.length - 1;

}

// 修改img的src來切換圖片

img.src = imgPath[current];

// 圖片切換完畢，修改信息

info.innerHTML = '一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

};

next.onclick = function () {

// 下一張

// 索引自增

current++;

//判斷current是否大于4

if(current > imgPath.length - 1){

current = 0;

}

img.src = imgPath[current];

info.innerHTML = '一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

};

};

</script>

</head>

<body>

<div id="outer">

<p id="info">一共 5 張圖片，當前第 1 張</p>

<img src="img/1.jpg" alt="冰棍">

<button id="prev">上一張</button>

<button id="next">下一張</button>

</div>

</body>

1.6DOM 其它查詢方法:

getElementsByName()它返回的是一個實時更新的數組所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加

querySelector()- 可以根據選擇器的字符串去頁面中查詢元素

- 會返回滿足選擇器的第一個元素

querySelectorAll() //兩種都是靜態獲取

- 根據選擇器獲取一組元素節點對象

<script>

//getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加

// 如果在網頁中添加新的符合條件的元素，它會自動被添加到數組中

window.onload = function () {

// getElementsByClassName() 用于根據元素的class屬性值來獲取一組元素節點對象

var box1 = document.getElementsByClassName('box1');

// alert(box1.length);

// for(var i=0; i<box1.length; i++){

// box1[i].innerHTML = '哈哈哈哈哈哈';

// }

/*

querySelector()- 可以根據選擇器的字符串去頁面中查詢元素

- 會返回滿足選擇器的第一個元素

querySelectorAll() //兩種都是靜態獲取

- 根據選擇器獲取一組元素節點對象

*/

var result = document.querySelector('.box1');

result = document.querySelectorAll('.box1');

result = document.querySelector('[class=box1]');

result = document.querySelector('div');

result = document.querySelector('div:nth-child(2)');

// alert(result.innerHTML);

/*

document.all 是一個過時的屬性

它表示頁面中的所有元素

可以使用 document.getElementsByTagName('*') 來代替

document.body 獲取頁面中的body元素

document.documentElement 獲取頁面的根元素html

*/

// alert(document.all.length);

// var all = document.getElementsByTagName('*');

// alert(all.length);

// alert(document.body);

// alert(document.getElementsByTagName('body')[0]);

alert(document.documentElement);

};

</script>

</head>

<body>

<div class="box1">1</div>

<div class="box1">2</div>

<div class="box1">3</div>

<div class="box1">4</div>

</body>

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢?；ヂ摼W技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

#2023年度創作挑戰#

于安全和隱私的原因，web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現。在這篇文章中，我們將通過一些例子來看看它是如何工作的。

文件操作的流程

獲取文件

由于瀏覽器中的 JS 無法從用戶的設備訪問本地文件，我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。

<input type="file" id="fileInput">

如果想允選擇多個文件，可以添加multiple屬性:

<input type="file" id="fileInput" multiple>

我們可以通過change事件來監聽文件的選擇，也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。

input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。

File對象如下所示：

讀取文件

讀取文件，主要使用的是[FileReader][1]類。

「該對象擁有的屬性：」

「FileReader.error」 ：只讀，一個DOMException，表示在讀取文件時發生的錯誤。

「FileReader.readyState」：只讀表示 FileReader 狀態的數字。取值如下：

常量名值描述EMPTY0還沒有加載任何數據LOADING1數據正在被加載DONE2已完成全部的讀取請求

「FileReader.result」：只讀，文件的內容。該屬性僅在讀取操作完成后才有效，數據的格式取決于使用哪個方法來啟動讀取操作。

「該對象擁有的方法：」

readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數代表編碼格式。

readAsDataUrl(file)：讀取文件并且將文件以數據URI的形式保存在result屬性中。

readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。

readAsArrayBuffer(file)：讀取文件并且將一個包含文件內容的ArrayBuffer保存咋result屬性中。

FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。

「文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件?！?/strong>

progress：每隔50ms左右，會觸發一次progress事件。

error：在無法讀取到文件信息的條件下觸發。

load：在成功加載后就會觸發。

在下面的示例中，我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內容。

例一：讀取文本文件

為了將文件內容顯示為文本，change需要重寫一下：

首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數。

然后我們繼續創建一個FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時非常重要。

reader發出一個'load'事件(例如，類似于Image對象)，告訴我們的文件已經讀取完畢。

reader將文件內容保存在其result屬性中。此屬性中的數據取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。

例二：顯示本地選擇的圖片

如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區別是我們使用readAsDataURL讀取文件并將結果顯示為圖像:

總結

1）由于安全和隱私的原因，JavaScript 不能直接訪問本地文件。

2）可以通過 input 類型為 file 來選擇文件，并對文件進行處理。

3） file input 具有帶有所選文件的files屬性。

4）我們可以使用FileReader來訪問所選文件的內容。

作者: Martin Splitt 譯者：前端小智來源：dev

原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn

司最近一個需求需要通過變量實現復制。

代碼塊

window.copyText = item => {//掛載到全局
            var textArea = document.createElement('textArea');
            textArea.innerHTML = item;
            textArea.value = item;
            document.body.appendChild(textArea);
            textArea.select();
            try{
                if(document.execCommand("Copy")){
                    alert(`${item}  復制成功！`)
                }else{
                    alert('復制失??！請手動復制！') 
                }
            }
            catch(err){
                alert('復制錯誤！請手動復制！') 
            }
                document.body.removeChild(textArea);
}

使用的時候

 window.copyText('！')

在線咨詢

上一篇：網頁設計，使用拖拽的方式生成網頁！JavaScript庫-VvvebJs
下一篇：自學HTML-HTML-CSS

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

推薦閱讀

HTML網頁編程之按鈕詳解

零基礎教你學前端-32、選擇文件

HTML 腳本

5款優秀的在線表格生成工具

Excel2010教程：Excel2010怎么...

JavaScript正則表達式常用技巧

15個好看的Bootstrap HTML網站模板下載

「轉行測試開發-HTML」(三)上次...

JS代碼實現按住shift鍵完成復選...

.NET Core 的緩存篇之MemoryCache

12.HTML表單標簽

JS實現經典輪播圖導航欄，適合...

Web前端開發快速入門，了解HTML...

什么是HTML5?

SAP導出表格如何把始終使用選定...

HTML簡單的 <section&am

用css繪畫動態天氣圖標

vue3中readonly和shallowReadonly

2022年上海公安學院本科招生網...

報銷單填寫要求有哪些？報銷票...

整合營銷服務商