話說前端32-DOM獲取元素

話說前端32-DOM獲取元素

話說前端32-DOM獲取元素

02：34

未知來源

分享興趣，傳播快樂，增長見聞，留下美好！

親愛的您，這裡是LearningYard學苑。

今天小編為大家帶來

話說前端32-DOM獲取元素

歡迎您的訪問。

Share interests， spread happiness， increase knowledge， and leave a good future！

Dear you， this is LearningYard Academy。

Today the editor brings it to you

Saturday shares | humanistic principles

Welcome to your visit。

什麼是DOM

文件物件模型（Document Object Model，DOM），它定義了訪問和處理HTML文件的標準方法。現在我們主要接觸到的是HTML DOM。它提供了對文件的結構化的表述，並定義了一種方式可以使從程式中對該結構進行訪問，從而改變文件的結構，樣式和內容。

What is DOM？

Document Object Model （DOM）， which defines the standard method of accessing and processing HTML documents。 Now we are mainly exposed to HTML DOM。 It provides a structured representation of a document， and defines a way to access the structure from a program， thereby changing the structure， style and content of the document。

HTML文件中的每個成分都是一個節點。HTML文件中的所有節點組成了一個文件樹（節點樹）。HTML文件中的每個元素、屬性、文字等都代表著樹中的一個節點。樹起始於文件節點，並由此繼續延伸枝條，直到處於這棵樹最低級別的所有文字節點為止。學習DOM，就是學習一些操作頁面元素的API（方法）。

Every component in the HTML document is a node。 All nodes in HTML form a document tree （node tree）。 Every element， attribute， text， etc。 in the HTML document represents a node in the tree。 The tree starts at the document node， and continues to extend its branches until all the text nodes at the lowest level of the tree。 Learning DOM means learning some APIs （methods） for operating page elements。

DOM 模型被構造為物件的樹：透過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素、屬性、css樣式、js能夠對頁面中的所有事件做出反應。

The DOM model is constructed as a tree of objects： through the programmable object model， JavaScript gains enough ability to create dynamic HTML。

JavaScript can change all HTML elements， attributes and css styles in the page， and js can react to all events in the page。

根據id獲取HTML元素：document。getElementById（“id名”）。

根據標籤名獲取HTML元素：document。getElementsByTagName（“標籤名”）。

根據類名獲取HTML元素：document。getElementsByClassName（“類名”）。

根據name屬性獲取HTML元素：document。getElementsByName（‘name名’）。

利用document。querrySelector（‘可以寫任何選擇器 只能選擇一個’）。

利用document。querrySelectorAll（‘可以寫任何選擇器，可以選擇多個’）；

Get the HTML element according to the id： document。getElementById（“id name ”）。

Get the HTML element according to the tag name： document。getElementsByTagName （“tag name”）。

Get the HTML element according to the class name： document。getelementsbyclassname （“class name”）。

Get the HTML element according to the name attribute： document。getElementsName （‘name name’）。

Make use of document。querryselector （‘You can write any selector and only choose one’）。

Make use of document。querryselectorall （‘You can write any selector， you can select more than one’）；

基礎事件的使用

瀏覽器中的 JS 是以事件驅動為核心的一門語言，事件即是可以被 JavaScript 偵測到的行為，是一種觸發-響應機制。

網頁中的每個元素都可以透過行為觸發相應的事件，如：點選按鈕——>產生事件——->執行操作。

事件的三要素是：事件源、事件、事件處理程式

註冊事件有兩種方式：傳統方式和方法監聽註冊方式

Use of basic events

JS in browser is an event-driven language。 Events are behaviors that can be detected by JavaScript， and are a trigger-response mechanism。

Every element in the web page can trigger the corresponding event through its behavior， such as clicking the button-> generate event-> perform an operation。

The three elements of events are： event source， event and event handler。

There are two ways to register events： the traditional way and the method of monitoring registration。

元素操作

JavaScript的DOM操作可以改變網頁內容、結構和樣式；我們可以利用DOM操作元素來改變元素裡面的內容、屬性等。

常見的元素操作

操作元素內容：innerHTML、innerText

操作屬性： src、href、id、alt、title

操作表單：type、value、checked、selected、disabel等

操作元素樣式屬性：element。style、element。className

Element operation

The DOM operation of JavaScript can change the content， structure and style of web pages； We can use DOM to manipulate elements to change the contents， attributes and so on。

Common element operations of

Operation element content： innerHTML， innerText

Actions： src， href， id， alt， title

Actions： type， value， checked， selected， disabel， etc。

Operation element style attributes： element。style， element。className

今天的分享就到這裡了。

如果您對今天的文章有獨特的想法，

歡迎給我們留言，

讓我們相約明天，

祝您今天過得開心快樂！

That‘s it for today’s sharing。

If you have a unique idea about today’s article，

Welcome to leave us a message，

Let us meet tomorrow，

I wish you a happy day today！

英文翻譯：Google翻譯

參考來源：百度、知乎

本文由LearningYard新學苑原創，如有侵權，請聯絡刪除。

文案|李仕陽

排版|李仕陽

稽核|李小雪