ユーザ用ツール

サイト用ツール


z_blog:2018:181023_javascript_todo

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
z_blog:2018:181023_javascript_todo [2018/10/23] – [JavascriptのDOM操作について] adash333z_blog:2018:181023_javascript_todo [2018/10/24] (現在) – [要素elementを変更する] adash333
行 54: 行 54:
 ===== CSSについて ===== ===== CSSについて =====
  
-https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#html そのまんまです。+https://qiita.com/C3REVE/items/01cb6b9fd70f622ba622#css そのまんまです。
   * 何もつけないとタグ名指定   * 何もつけないとタグ名指定
   * 先頭に # を付けると id 指定   * 先頭に # を付けると id 指定
行 117: 行 117:
 main.jsを保存し、Chromeでindex.htmlを更新すると、上記のように、デベロッパーツールのconsole画面に、1 と表示される。 main.jsを保存し、Chromeでindex.htmlを更新すると、上記のように、デベロッパーツールのconsole画面に、1 と表示される。
  
 +===== document.getElementsByName() =====
 +
 +<code>
 +// nameを指定して取得
 +// nameはHTML内で複数存在する可能性がある
 +// document.getElementsByName()は配列を返す
 +// getElmentbyId はElement(単数形)、getElementsByNameはElements(複数形)
 +// 配列を取得するために、以下のスクリプトではfor文を用いる
 +var elements = document.getElementsByName('p02');
 +for (var i = 0; i < elements.length; i ++) {
 +  console.log(elements[i].innerHTML);
 +}
 +</code>
 +
 +{{:z_blog:2018:pasted:20181023-234255.png}}
 +
 +javascriptの配列について:https://qiita.com/takeharu/items/d75f96f81ff83680013f
 +
 +
 +===== document.getElementsByTagName() =====
 +
 +
 +Tagは、HTMLのタグである、<p>や<div>のことである。
 +
 +document全体からではなく、変数にあるDOMからその子要素を取得することができる。
 +
 +と思って以下のようにコードを記載したが、以下のようにエラーが出てうまくいかず。
 +
 +{{:z_blog:2018:pasted:20181024-190403.png}}
 +
 +
 +
 +
 +
 +
 +
 +
 +===== CSSのセレクタselectorについて =====
 +
 +以下のサイトがわかりやすいです。
 +
 +
 +https://saruwakakun.com/html-css/reference/selector\\
 +CSSのセレクタとは?覚えておきたい25種類と書き方
 + 2018/04/20
 +
 +===== 要素elementを変更する =====
 +  -className :classを取得/設定する
 +  -setAttribute() :属性を設定する
 +  -removeAttribute() :属性を削除する
 +  -value :inputタグの値を取得/設定する
 +
 +===== Javascriptのvar, let, constについて =====
 +
 +https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27
 +{{:z_blog:2018:pasted:20181024-195309.png}}
 ===== 見出し ===== ===== 見出し =====
  
  
  

z_blog/2018/181023_javascript_todo.1540305264.txt.gz · 最終更新: 2018/10/23 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki