---
title: DOM練習 - 取得、設定元素屬性
tags: JS 直播班 - 每日練習
---

DOM練習 - 取得、設定元素屬性
===

以下連結為 HTML 的屬性列表
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Attributes

問題
---
請根據 HTML, CSS 以及題目條件撰寫 JS 程式碼

>如果 element 的 name 屬性為 "google"，請執行以下要求：
>
>要求一: 將 element 的 href 屬性更改為 "https://www.google.com/"
>要求二: 替 element 新增一個 target 屬性，並設定為 "_blank"
>要求三: 替 element 新增一個 class 屬性，並設定為 "colorRed"

HTML

<a href="#" id="targetId" name="google">google 連結</a>

CSS

.colorRed{
   color: #FF0000;
}

JS

const element = document.querySelector('#targetId');
if(/* 請填入程式碼 */){
  /* 請填入程式碼 */
}

#### 解答：

const element = document.querySelector('#targetId');

// 取得<a>元素的屬性name
const name = element.getAttribute('name');

// 比對<a>元素的屬性name的值，是否為'google'
if (name === 'google') {
    // 賦予<a>元素，href屬性＆值
  element.setAttribute('href', 'https://www.google.com/');
    // 賦予<a>元素，target屬性＆值
  element.setAttribute('target', '_blank');
    // 賦予<a>元素，class屬性＆值
  element.setAttribute('class', 'colorRed');
};

#### 最後<a>元素的結構

<a href="https://www.google.com/" id="targetId" name="google" target="_blank" class="colorRed">google 連結</a>