JavaScript豆知識7_querySelector

-

写真はこの時期が旬のスナップえんどうです。記事の内容にはまったく関係ありません。

さて、久しぶりにコーディングのネタが出てきました。今回はquerySelector()のお話です。

getElementById()やgetElementsByClassName()は素直にIDやクラス名を入れれば動いてくれるので使いやすいですが、querySelectorはセレクターを書かなければいけないし、セレクターの書式がちょっと独特なので敬遠していましたが、やはり使えると便利です。

例えば、inputタグでtypeがtextで、readonlyでなくてかつmust属性がtrueでCSSのneedクラスを持つ…などというややこしい条件で検索することもできます。が、属性やCSSクラスを指定するときの書き方、ANDとOR、否定にあいまい一致など色々あってややこしかったので、自分用のメモも兼ねてざっとまとめました。

//AND,OR,NOTの書き方

//AND　続けて書く。間に何も挟まない。
'[type=text][readoly=true]'

//OR　カンマで繋ぐ。
'[type=text],[type=number]'

//NOT　:not()で囲う
':not([type=tel])'



//タグ・属性・CSSクラスの指定

//タグ　カッコも記号も何もつけずに書く。
'input'

//属性　[]で囲い、=で値を指定する。値の指定をしなければ、属性を持っているとtrueとみなす。
'[type=text]'
'[hoge]'

//CSSクラス　.クラス名で書く。.が必須。
'.need'


//inputタグでtypeがtextで、readonlyでなくてかつmust属性がtrueでCSSのneedクラスを持つ
document.querySelectorAll('input[type=text][must=true].need:not([readonly])')

このブログの人気の投稿

技術メモ「503 Service Unavailable」

-
イメージ
開発メンバーから「開発中のWEBページが開けなくなった」とヘルプ要請がありました！ 開発中のWEBページにアクセスすると「HTTP Error 503. The service is unavailable.」の画面が表示されて、どのページも開けません。 503エラーは、サーバーにアクセス集中したときのエラーなのですが... 今回は思いがけない問題が原因でした。 同現象が発生した人のため、再発したときの解決ために、原因究明までの手順を残しておきます。 ------ ① まずIISを再起動します。 　　－＞　復旧しませんでした。 ② IISの初期ページが開けるか？ 　　－＞　503エラー ③ IISを停止してみます。 　　－＞　「localhost で接続が拒否されました。」のエラーに変わりました。 　　－＞　503エラーが変化したことから、WEBサーバーまでの通信は問題ないようです。 ④ WEBサイトを作成し直して、IISの初期ページが開けるか？ 　　－＞　OK　（IISの問題？） ⑤ 仮想ディレクトリを作成し直して、開発中のWEBページが開けるか？ 　　－＞　503エラー！ ⑥ ④と⑤のアプリケーションプールが異なっていたことから、アプリケーションプールを変更 　　－＞　OK ------ DefaultAppPoolが破損して、停止していたことが原因だったようです。 破損していたDefaultAppPoolを使用しないようにして、ひとまず対処完了です！ インプラスホームページはこちら（ https://implus.co.jp/ ）
続きを読む

googleドライブの同期は、フォルダ選択ができました。

-
あれ、PCアプリがインストールできない…。 と思ったら、久しぶりの「ドライブ容量不足」。懐かしい感じさえあります。 メインＰＣとして使っているノートＰＣは、ＳＳＤに換装してありますが、ネックはやはりドライブの容量です。超快適な高速レスポンスと引き替えに容量を捨てたのですが、アドビツール群などデカイやつもインストールして持ち歩いているので、どうしてもＳＳＤ容量が圧迫されます。 私のＰＣにはgoogleドライブアプリを入れて、「同期」機能を便利に使っています。 しかし丸ごと同期していると不要なファイルまで同期されて、なけなしのＳＳＤの容量を食ってしまいます。その中には、時々しか参照しないような、クラウドのストレージだけにあれば良いようなファイルも結構沢山あるのです。調べてみれば解りますが、だれでも実際の所、パソコンの中にあるデータの殆どは、たまにしか参照しないファイルばかりのはずです。 googleドライブのＰＣ用アプリでは、同期するフォルダを選択できるので、これを活用します。直下のフォルダのみ選択できるので、うまくフォルダを作って運用してみてください。 右下に鎮座している googleドライブのアイコンを右クリックして 表示されたメニューから「設定」をクリック 同期オプションの「このパソコンに一部のフォルダのみを同期」にチェックを入れ googleドライブ以下のサブフォルダが一覧されるので、同期したいフォルダにチェックを入れます 最後に「変更を摘要」ボタンをクリック これだけでＯｋです。 マイドキュメント内は殆どが MS Office ファイルで、オフラインで使っています。googleドライブアプリでの同期は自動バックアップとしての意味が強いので、これはそのままにします。 自動バックアップしたいフォルダ、社内やパートナーと共有しつつローカルで参照したいフォルダだけ残します。 google ドキュメントを使っているフォルダはリンクファイルしかコピーされないので共有不要だと思います（容量はたいしたことないので、ランチャー（開き用）として使っているならアリですね）。 写真類は結構ローカルドライブの「肥やし」になっているので、１年前以上古いモノは思い切って全てクラウドに預けちゃいましょう。思ったほど困りませんし、パソコ...
続きを読む

『ネットワークドライブ』のトラブル

-
イメージ
今日のブログは、『ネットワークドライブ』のトラブル＆解決手順を備忘録として残しておきます。 会社の共有フォルダにファイルを保存する場合に、パソコンのＺドライブにファイルを保存して共有するという使い方があります。 この仕組みは、図にして表すと下記のようになります。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 　　　[パソコン]　　　　　　　　　　　　　　　[サーバー]　　　　 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 　　　Ｚドライブ　　　　　　　－－＞　　　　Ｄａｔａフォルダ　　 （ネットワークドライブ）　　　　　　　　　　（共有フォルダ）　　 （※ Ｚドライブというのは仮の話なので、Ｘ、Ｙドライブの場合もあります） エクスプローラーからＺドライブを開いて、ExcelやWordなどのデータを保存する分には問題ありません。 しかし、アプリケーションからＺドライブにファイルを出力すると保存できない問題が発生することがあります！ 今回挙げるトラブル＆解決手順は２つです。 ①自動切断機能によるトラブル まずは、パソコン側の自動切断機能によって発生するトラブルです。 未接続状態が１５分間継続すると、ネットワークドライブは切断状態になります。 これは、サーバーリソースが無駄に使用されないようにするためのＯＳの機能なのですが、エクスプローラーからアクセスすると再接続をしてくれるのに対し、アプリケーションからアクセスしてもネットワークドライブを再接続されない問題があります。 少し強引な解決方法ではありますが、自動切断機能を無効にすることで、この問題を回避することができます。 ■解決手順 コマンドプロンプトから、次のコマンドを実行 > net config server /autodisconnect:-1 ②ログイン直後のトラブル こちらは、パソコンによって問題が発生する場合、問題が起きない場合に分かれます。 発生原因は不明ですが、Windowsのログイン直後にネットワークドライブが切断状態になっていることがあります。 前述の自動切断と同じようにエクスプローラーからのアクセスでは再接続してくれるのですが、アプリケーションからのアクセスに対しては同様に再接続されない問題が生じます。 ■解決手順 ログイン直後にエクスプローラーからフォ...
続きを読む