javascript dom操作 属性取得→HTMLの書き換え

Question

プログラミング初学者です。拙い質問かもしれませんが宜しくお願いします。

自分がよく使うサイトにて、下記の様なソースがあるのですが、
あまり必要がない上にご操作の原因になるので、表示しないようにしてしまいたい。
というためのjavascriptの書き方を教えていただきたいです。

<a href="javascript:void(0);" onclick="copyField('title_name','title name_a');" style="color:#0000FF; text-decoration:underline;">※タイトルをコピー</a>

初学者なりに検索や当サイトで質問させていただき、
document.querySelectorでDOM操作?をする。
ということはなんとなくわかったのですが、具体的な書き方などが分からず
書いてみても思うように実行できませんでした。

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector(a [href="javascript:void(0);"][onclick="copyField(title_name','title name_a);]).innerHTML="";

解決方法を教えていただけると幸いです。
ここまでのご拝読ありがとうございます。
何卒、ご教授宜しくお願いいたします。

Answer 1

引用符が足りていません。

//                                                                                     これが足りない ↓
document.querySelector(a [href="javascript:void(0);"][onclick="copyField(title_name','title name_a);"]).innerHTML="";

CSSでするほうが早いような気もします。

a [href="javascript:void(0);"][onclick="copyField(title_name','title name_a);"] {
  display:none;
}

Comments

[sheep0808]

早速のご回答、ありがとうございます!
なるほど、見様見真似で書いているので文法も滅茶苦茶かもしれません。
また、CSSで書くのも有用なんですね。ありがとうございます。

両方試してみたんですが、普段使っているサイトではどちらも機能せず"※タイトルをコピー"は消えませんでした。この場合解決方法はどのように考えるといいでしょうか？

[kei344]

引用符がもう一つ足りなかったのと、「a [href」⇒「a[href」（aの後のスペースが邪魔）ですね。
a[href="javascript:void(0);"][onclick="copyField('title_name','title name_a');"] {
display:none;
}

[think49]

セレクタ文字列が引用符で括られていません。

[sheep0808]

ありがとうございます!お陰様でCSSによる表記変更はできました!!
ちなみに、後学の為に是非教えていただきたいのですが、Javascriptの方が何度か試しても成功しませんでした。この場合考えられる要因などはありますでしょうか?

[kei344]

window.addEventListener('DOMContentLoaded', () => {
document.querySelector(`a[href="javascript:void(0);"][onclick="copyField('title_name','title name_a');"]`).innerHTML="";
})
※ querySelector は1件しか取得しないので複数要素が有る場合は1件のみしか消えません。

[sheep0808]

ありがとうございます。環境に寄るのかもしれませんが、やはり機能しませんでした。.querySelectorAllが1件のみ取得しているのはコンソールで確認済みなのですが、書き換えができませんでした。これはコーディングではなく、サイト側の問題と考えるべきでしょうか?

[think49]

https://teratail.com/questions/302979

[kei344]

＞ querySelectorAll
提示されたコードと変わっていますが、そもそも querySelectorAll と querySelector では使い方が違います。調べてみましょう。

[sheep0808]

ごめんなさい、調べてもよく分からなかったのですが、querySelectorAllが提示しているnodelistが(1)ということは、ソース内に該当する要素は1つ、ということではないのでしょうか…?

[kei344]

コードが提示されて無いので何が問題になっているかはこちらにはわかりません。
既に提示されている情報では問題なく動いていますよ。
https://jsfiddle.net/yLs0ftja/

提示している情報が違うか、エラーが起きているか、調べてみてください。
【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/