javascriptについてです。教えてください

こんにちは
質問させて頂きます。

やりたいことは下記HTMLソースから指定された要素を取得したいです。

・for文を使用して繰り返し取得できるようにしたい。
・indexOfを使用して // を取り除きたい。
・取得したい要素は "standard" "slim" "cado"の３つです。

ご教示お願い致します。

HTMLソース
<body>
<div class="right">
<div class="products-list-ttl">
<h4><a href="/products/standard">文章１</a></h4>
</div>
<p>テキストテキストテキストテキストテキストテキスト</p>
<div class="btnLink link-cream-orange with-icon">

☆取得したい要素がある場所
<a href="/products/standard">詳しくはこちら<i class="icon-right-dir-1 icon"></i></a>

</div>
</div>
</li>
<li class="clearfix slim">
<div class="left">
<a href="/products/slim"><img src="https://premium-water.net/page/wp-content/themes/premiumwater/img/pages/products/products-slim.png" alt=""></a>
</div>
<div class="right">
<div class="products-list-ttl">
<h4><a href="/products/slim"></a></h4>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="btnLink link-cream-orange with-icon">

☆取得したい要素がある場所
<a href="/products/slim">詳しくはこちら<i class="icon-right-dir-1 icon"></i></a>

</div>
</div>
</li>
<li class="clearfix cado">
<div class="left">
<a href="/products/cado"><img src="https://premium-water.net/page/wp-content/themes/premiumwater/img/pages/products/products-cado.png" alt=""></a>
</div>
<div class="right">
<div class="products-list-ttl">
<h4><a href="/products/cado"><br></a></h4>
</div>
<p></p>
<div class="btnLink link-cream-orange with-icon">

☆取得したい要素がある場所
<a href="/products/cado">詳しくはこちら<i class="icon-right-dir-1 icon"></i></a>

</div>
</div>
</body>

自分なりにやってみた回答

・replaceを使用したら"//standard"の状態になります。//は要らないので
indexOfを使用して削除したいです。

var aaa = document.getElementsByClassNmae("btnLink link-cream-orange with-icon").getElementsByTagName("a").replace(//g,"");
for(var i = 0; i < aaa.length; i++){
 console.log(aaa);
}

kei344

2017/04/19 16:31

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

ku__ra__ge

2017/04/19 16:36

「・スライスの使い方」この質問の意味がちょっと分かりません。sliceの使い方が分からなければ、javascript slice で検索すればいいんじゃないでしょうか？

退会済みユーザー

2017/04/19 16:52

分かりやすく訂正しました。分かりにくかったら回答しなくて良いです。

行動規範の内容に同意します

回答1件

<a href="/products/standard">の要素をすべて取得して、ループで各要素について処理することはquerySelectorAllを利用すると簡単に行えます。hrefが"/products/slim"、"/products/cado"である要素についても、querySelectorAllの引数の指定を変更することで同様に処理できます。

javascript
1const elements = document.querySelectorAll('a[href="/products/standard"]')
2for (const element of elements) {
3	// 各要素について処理 (ここでは例としてログ出力している)
4	console.log(element);
5}