javaScriptでa要素のhref属性を取得したい

Question

###前提・実現したいこと
javaScriptでhref属性の取得

該当のソースコードのようなHTMLで、ul ⇒ li ⇒ a要素のhref属性を取得したいのですがうまくいきません。
どのように指定したらいいのでしょうか？

jQueryだったら

$('#ul').find('a').attr('href');

でいけると思いますが、javascriptだと

document.getElementById('ul').children.getElementsByTagName('a').getAttribute('href');

でいけるとおもったらできませんでした。
イメージとしては、

document.getElementById('ul') //idにulを持つ要素を取得
.children //子要素であるliを取得
.getElementsByTagName('a') //取得したliタグの中のaタグを取得
.getAttribute('href'); //aタグのhref属性の中身を取得

を想像していますがダメでしょうか？

###発生している問題・エラーメッセージ
hrefが取得できない。

###該当のソースコード

<ul id="ul">
<li><a href="url01">リンク先</a></li>
<li><a href="url01">リンク先</a></li>
<li><a href="url01">リンク先</a></li>
</ul>

###補足情報
可能であれば現状のソースコードではなにがダメなのかご指摘いただけると幸いです。
最終的にやりたいことは、現在のURLを取得して、ローカルナビの現在地にクラスを付与してカレントさせる。です。

Answer 1

.childrenは不要ですよね、ulの子はliだって決まっていますから
.getElementsByTagName('a')をしたら複数のタグがヒットするので
.getAttribute('href')することはできません。

総じて
document.getElementById('ul').getElementsByTagName('a')[0].getAttribute('href');
とすればよろしいのでは？

今風にかけば
document.querySelector('#ul a').getAttribute('href')

Comments

[退会済みユーザー]

確かに、childrenなしで試してみましたが問題なく動きました。
こちらも今後の参考にさせていただきます。
ありがとうございます。

Answer 2

children も getElementsByTagName も複数の要素を持つ HTMLCollection を返すはず。なので1個目だったら [0] を付ければ取得出来ます。

document.getElementById('ul').children[0].getElementsByTagName('a')[0].getAttribute('href')

Comments

[退会済みユーザー]

.getElementsByTagName('a')[0]
ここの考え方が至らなかったようです。無事hrefを取得することができました。
ありがとうございます！

Answer 3

私がいつも参考にさせていただいているサイトです。
すでに参照済みでしたら申し訳ありません--;

脱jQuery .attr()
脱jQuery .find()

Comments

[退会済みユーザー]

こういったサイトを探していました！
利用させていただきます。
ありがとうございます！