目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Jul, Week 4 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

Selecting Elements

選取元素

All HTML elements are objects. And as we know every object has properties and methods.
The document object has methods that allow you to select the desired HTML element.
These three methods are the most commonly used for selecting HTML elements:

所有的HTML元素都是物件(objects)，如同我們所知，每個物件有屬性和方法，document物件有方法讓你可以選擇想要的HTML元素，而這3個方法是最常用來選擇HTML元素的： 

//finds element by id
document.getElementById(id)

//finds elements by class name
document.getElementsByClassName(name)

//finds elements by tag name
document.getElementsByTagName(name)

In the example below, the getElementById method is used to select the element with id="demo" and change its content:

在下面的範例中，getElementById方法是用來選擇id是"demo"的元素，並改變它的內容： 

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!"
TIP:The example above assumes that the HTML contains an element with id="demo", for example <div id="demo"></div>.

提示：上面的範例是假設HTML包含一個有id是demo的元素，例如： <div id="demo"></div>

-----

Selecting Elements

選取元素

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name.
For example, if our HTML page contained three elements with class="demo", the following code would return all those elements as an array:

getElementsByClassName() 方法會回傳文件中有指定class名稱的一系列元素。例如：如果我們的HTML頁面包含3個元素有class為"demo"，接下來程式碼會回傳那些元素為一個陣列(array)。 

var arr = document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";

Similarly, the getElementsByTagName method returns all of the elements of the specified tag name as an array.
The following example gets all paragraph elements of the page and changes their content:

同樣地，getElementsByTagName方法會回傳指定標籤名稱的所有元素為一個陣列。下面的範例取得網頁所有段落元素<p>並改變他們的內容： 

<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
arr[x].innerHTML = "Hi there";
}
</script>

The script will result in the following HTML:

腳本(script)會讓結果變成以下的HTML： 

<p>Hi there</p>
<p>Hi there</p>
<p>Hi there</p>
TIP:We used the length property of the array to loop through all the selected elements in the above example.

提示：在上方的範例中，我們使用陣列的length屬性去所有選取的元件中跑迴圈。

-----

Working with DOM

操作DOM

Each element in the DOM has a set of properties and methods that provide information about their relationships in the DOM:
element.childNodes returns an array of an element's child nodes.
element.firstChild returns the first child node of an element.
element.lastChild returns the last child node of an element.
element.hasChildNodes returns true if an element has any child nodes, otherwise false.
element.nextSibling returns the next node at the same tree level.
element.previousSibling returns the previous node at the same tree level.
element.parentNode returns the parent node of an element.

We can, for example, select all child nodes of an element and change their content:

在DOM裡的每個元素都有一組屬性和方法，提供他們在DOM裡面的關係資訊：
element.childNodes 回傳一個元素子節點(child nodes)的陣列
element.firstChild 回傳元素的第一個子節點
element.lastChild 回傳元素的最後一個子節點
element.hasChildNodes 如果元素有任一個子節點就回傳true，否則回傳false
element.nextSibling 回傳在樹狀同一階層中的下一個節點
element.previousSibling 回傳在樹狀同一階層中的前一個節點
element.parentNode 回傳元素的父節點(parent node)
例如我們可以選取一個元素的所有子節點並改變他們的內容 

<html>
<body>
<div id ="demo">
<p>some text</p>
<p>some other text</p>
</div>

<script>
var a = document.getElementById("demo");
var arr = a.childNodes;
for(var x=0;x<arr.length;x++) {
arr[x].innerHTML = "new text";
}
</script>

</body>
</html>
TIP:The code above changes the text of both paragraphs to "new text".

提示：上面的程式碼將兩個段落的內容都改成"new text"。

-----

Changing Attributes

改變屬性

Once you have selected the element(s) you want to work with, you can change their attributes.
As we have seen in the previous lessons, we can change the text content of an element using the innerHTML property.
Similarly, we can change the attributes of elements.
For example, we can change the src attribute of an image:

一旦你選好想操作的元素，你可以改變他們的屬性(attributes)。就像我們前面課程看到的，我們可以使用innerHTML屬性改變元素的文字內容。
同樣地，我們可以改變元素的屬性。例如：我們改變一張圖片image的來源src屬性： 

<img id="myimg" src="https://db35reset.wordpress.com/2021/07/29/jul_week4/orange.png" alt="" />
<script>
var el = document.getElementById("myimg");
el.src = "apple.png";
</script>

We can change the href attribute of a link:

我們可以改變連結的href屬性： 

<a href="http://www.example.com">Some link</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "http://www.sololearn.com";
</script>
TIP:Practically all attributes of an element can be changed using JavaScript.

提示：幾乎(practically)所有元件的屬性都可以用JavaScript改變。

-----

Changing Style

改變樣式

HTML元素的樣式也可以用JavaScript來改變。
使用元素的style物件可以存取所有樣式屬性，
例如：

The style of HTML elements can also be changed using JavaScript.
All style attributes can be accessed using the style object of the element.
For example:

<div id="demo" style="width:200px">some text</div>
<script>
var x = document.getElementById("demo");
x.style.color ​= "6600FF";
​x.style.width ​= "100px"
</script>

The code above changes the text color and width of the div element.

上面的程式碼改變該元素的內容顏色和寬度。 

TIP:All CSS properties can be set and modified using JavaScript. Just remember, that you cannot use dashes (-) in the property names: these are replaced with camelCase versions, where the compound words begin with a capital letter.  For example: the background-color property should be referred to as backgroundColor.

提示：所有CSS的屬性都可以用JavaScript調整，只要記得屬性名稱不能使用連結符號(-)，要替換成駝峰式命名，複合字的字首大寫。例如：背景色background-color屬性應該改為backgroundColor。

-----

Creating Elements

新增元素

Use the following methods to create new nodes:
element.cloneNode() clones an element and returns the resulting node.
document.createElement(element) creates a new element node.
document.createTextNode(text) creates a new text node.

For example:

使用以下的方法去新增節點：
element.cloneNode() 複製一個元素並回傳產生的節點
document.createElement(element) 新增一個元素節點
document.createTextNode(text) 新增一格文字節點
例如： 

var node = document.createTextNode("Some new text");

This will create a new text node, but it will not appear in the document until you append it to an existing element with one of the following methods:
element.appendChild(newNode) adds a new child node to an element as the last child node.
element.insertBefore(node1, node2) inserts node1 as a child before node2.

Example:

這會新增一個文字節點，但它不會顯示在文件中，直到你用以下的其中一個方式，將它附加(append)到已存在的元素中：
element.appendChild(newNode) 加一個新的子節點到元素中，當成最後的子節點 element.insertBefore(node1, node2) 在node2節點前面，插入node1節點作為子節點
例如：

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

<script>
//creating a new paragraph
var p = document.createElement("p");
var node = document.createTextNode("Some new text");
//adding the text to the paragraph
p.appendChild(node);

var div = document.getElementById("demo");
//adding the paragraph to the div
div.appendChild(p);
</script>
TIP:This creates a new paragraph and adds it to the existing div element on the page.

提示：這新增一個段落並將它加到網頁現有的div元素中。

-----

翻譯小心得｜ DOM操作的基礎了解，之前用DOM比較少用來操作class和tag name，幾乎都是取id(因為是單一值)，比較不會改到不想改的東西，之後再想想看有什麼情境下可以用class和tag來操作會比較方便。 Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​