querySelector() (querySelector())

The Document method querySelector() returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Document方法querySelector()返回文檔中與指定選擇器或選擇器組匹配的first元素。 如果未找到匹配項，則返回null。

HTML內容： (HTML content:)

<div id="id-example"></div>
<div class="class-example"></div>
<a>element-example</a>

JavaScript內容： (JavaScript content:)

document.querySelector("#id-example"); // Returns the element with id "id-example"
document.querySelector(".class-example"); // Returns the element with class "class-example"
document.querySelector("a"); // Returns the "a" element

Note querySelector() returns the first matching element, to return all the matches, use the querySelectorAll() method instead.

注意querySelector()返回第一個匹配的元素，要返回所有匹配項，請改用querySelectorAll()方法。

<div id="example">First</div>
<div id="example">Second</div>

document.querySelector("#example"); // Returns only the element containing 'First'

innerHTML (innerHTML )

The innerHTML prop return the HTML content inside a selected element and also let you define a new HTML content.

innerHTML屬性返回選定元素內HTML內容，還允許您定義新HTML內容。

獲取元素內容 (Get element content)

<div id="demo"><p>Demo</p>
</div>

var element = document.getElementById("demo");
console.log(element.innerHTML) //logs <p>Demo</p>

設置元素內容 (Set element content)

<div id="demo"></div>

var element = document.getElementById("demo");
element.innerHTML = "<div>Demo</div>";

The HTML now will be like

現在HTML就像

<div id="demo"><div>Demo</div>
</div>

安全注意事項 (Security considerations)

The value that’s set to innerHTML should come from trusted sources, since Javascript will put anything inside that element and it will be run as plain HTML.

設置為innerHTML的值應該來自受信任的來源，因為Javascript會將任何內容放入該元素中，并且它將作為純HTML運行。

Example:

例：

Setting a ”<script>alert();</script>” value will cause the Javascript “alert()” function to be fired:

設置“ <script>alert();</script> ”值將觸發Javascript“ alert()”函數：

var element = document.getElementById("demo");element.innerHTML = "<script>alert();</script>";

This type of attack is called Cross Site Scripting, or XSS for short.

這種攻擊稱為“ 跨站點腳本”或“ XSS” 。

This is one of the most common ways of committing an XSS attack. If you want to learn a little bit more and learn to defend against it, check out this resource.

這是實施XSS攻擊的最常見方法之一。 如果您想學習更多并學會防御， 請查看此資源 。

getElementById() (getElementById())

The getElementById() method returns the element that has the id attribute with the specified value. It takes one argument, which is a case-sensitive string of the id for the element you want.

getElementById()方法返回具有具有指定值的id屬性的元素。 它帶有一個參數，它是所需元素的ID的區分大小寫的字符串。

This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element in your document. Here’s a simple example of the syntax:

此方法是HTML DOM中最常見的方法之一，幾乎在您每次要操作或從文檔中的元素獲取信息時都使用該方法。 這是語法的一個簡單示例：

HTML content:

HTML內容：

<div id="demo"></div>

JavaScript content:

JavaScript內容：

document.getElementById("demo"); // Returns the element with id "demo"

If you have more than one element with the same value of id (bad practice!), getElementById will return the first element found:

如果您有多個具有相同id值的元素(不好的做法！)， getElementById將返回找到的第一個元素：

<div id="demo">First</div>
<div id="demo">Second</div>

document.getElementById("demo"); // Returns the element with id "demo" containing 'First'

更多信息： (More Information:)

document.getElementById()

document.getElementById()

替代解決方案： (Alternative solutions:)

A commonly-used alternative to document.getElementById is using a jQuery selector which you read about more here.

常用的document.getElementById替代方法是使用jQuery選擇器，您可以在這里內容。

有關HTML DOM的更多信息 (More info about the HTML DOM)

With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

使用HTML DOM，JavaScript可以訪問和更改HTML文檔的所有元素。

When a web page is loaded, the browser creates a Document Object Model of the page.

當網頁加載時，瀏覽器會創建一個d ocument?bject 中號奧德爾頁面。

The HTML DOM model is constructed as a tree of Objects:

HTML DOM模型被構造為對象樹：

Each element in the DOM is also called a node.

DOM中的每個元素也稱為節點。

<html>
<head><title> My title </title>
</head>
<body><a href="#">My Link</a><h1> My header </h1>
</body>
</html>

The DOM for the above HTML is as follows:

以上HTML的DOM如下：

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

通過對象模型，JavaScript獲得了創建動態HTML所需的全部功能：

• JavaScript can change all the HTML elements in the page
  JavaScript可以更改頁面中的所有HTML元素
• JavaScript can change all the HTML attributes in the page
  JavaScript可以更改頁面中的所有HTML屬性
• JavaScript can change all the CSS styles in the page
  JavaScript可以更改頁面中的所有CSS樣式
• JavaScript can remove existing HTML elements and attributes
  JavaScript可以刪除現有HTML元素和屬性
• JavaScript can add new HTML elements and attributes
  JavaScript可以添加新HTML元素和屬性
• JavaScript can react to all existing HTML events in the page
  JavaScript可以對頁面中所有現有HTML事件做出React
• JavaScript can create new HTML events in the page
  JavaScript可以在頁面中創建新HTML事件

翻譯自: https://www.freecodecamp.org/news/html-dom-methods/