サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

00.javascript:13.getelementbyidなど要素の取得


13.getElementByIdなどの要素の取得方法

見出し

https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4
@amamamaou
2020年07月14日に更新
要素の取得方法まとめ

https://crocro.com/write/manga_javascript/wiki.cgi?p=rewrite_web_page
マンガで分かる JavaScriptプログラミング講座 第3版
第17話:Webページの書き換え
第3部 Webページのプログラミング

document.getElementById

html

<div id="divText">テキスト</div>

JavaScript

let divText = document.getElementById('divText');
console.log(divText);              // <div>
console.log(divText.textContent);  // "テキスト"

// テキスト を 変更後テキスト に書き換え
let divText = document.getElementById('divText').textContent;
divText = "変更後テキスト";
// 一気に書くなら以下
document.getElementById('divText').textContent = "変更後テキスト";

https://kita-note.com/js-edit-text
【JavaScript入門】要素のテキストを設定・取得する方法
2019/6/11

https://www.sejuku.net/blog/27019
【JavaScript入門】getElementByIdを完全理解する3つのコツ!
2019/4/25

https://www.javadrive.jp/javascript/event/index6.html#section1
addEventListenerメソッドを使ってイベントリスナーを登録する

<p>ボタンをクリックしてください。</p>

<input type="button" value="button" id="xxx">

<script>
    let button = document.getElementById("xxx");
    button.addEventListener('click', () => {
        console.log('Hello');
    });
</script>
html
<input  id="btn"  type="button"  value="ダイアログ表示"  />

js
  //  ページロード時に実行されるイベントリスナーを登録
  document.addEventListener('DOMContentLoaded',  function() {
    //  ボタン(btn)クリック時に実行されるイベントリスナーを登録
    document.getElementById('btn').addEventListener('click',  function() {
      window.alert('ボタンがクリックされました。');
    },  false);
  },  false);

Typescriptでdocument.getElementById

https://qiita.com/ayase/items/e4472e2b89cf5665db5a
@ayase
2020年02月21日に更新
TypeScriptでNullableと向き合う

https://blog.mamansoft.net/2019/10/16/use-typescript3.7-great/#optional-chaining
TypeScript3.7の目玉機能を使ってみた
2019-10-16

document.getElementById()の返す型がHTMLElement | nullであるため、
Nullチェックを行わないといけない。

let result =  document.getElementById?("result").textContent;
result = "文章を置き換え";

https://hepokon365.hatenablog.com/entry/2020/08/23/220835
2020-08-23
TypeScriptの、はてなふたつの演算子や、はてなドットの演算子は、JavaScriptの新しい構文だった

Optional Chaining Operator(オプショナルチェイニング演算子)

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining
オプショナルチェイニングoptional chaining演算子 ?.

document.getElementByIdとinnerHTML

https://qiita.com/Otake_M/items/a2cc503eb4133b06a6a8
@Otake_M
2018年04月25日に更新
JavaScriptのinnerHTMLについて

getAttributeとsetAttribute

html

<img src="apple.jpg" id="image">

javascript

imagePath = document.getElementById('image').setAttribute('src')
console.log(imagePath)  //=> apple.jpg

http://sarchitect.net/10364
JavaScript で src 属性の値を取得・変更する
published: 2019.03.25

https://uhyohyo.net/javascript/2_10.html
二章第十回 img要素とその他
2017年9月11日

https://ywork2020.com/content/js-element-src.html
JavaScript : Element.src (ソース) の解説
ゲットエレメントバイアイディ.ソースで、img要素の画像ソースを操作する

https://mebee.info/2020/10/09/post-19621/
javascript imgタグの画像をbase64文字列に変換する
2020.10.09

addEventListener

https://www.sejuku.net/blog/57625
【JavaScript入門】addEventListener()によるイベント処理の使い方!
2019/6/6

https://techacademy.jp/magazine/22781
JavaScriptのaddEventListenerの使い方を現役エンジニアが解説【初心者向け】

https://noumenon-th.net/programming/2017/03/11/event/

イベントハンドラー/イベントリスナーについて[addEventListener]
2017年3月11日

https://qiita.com/_ayk_study/items/519bb661a746f96727ce
@_ayk_study
2019年06月24日に更新
【Javascript】addEventlistenerについて

https://www.javadrive.jp/javascript/event/index6.html#section2
addEventListenerメソッドを使ってイベントリスナーを登録する

https://qiita.com/gcyata/items/b8792a102078e4693161
@gcyata
2017年06月27日
おみくじアプリをES6で書いてみる

https://tech-dig.jp/javascript%E3%81%AEaddeventlistener%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%81%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7%E3%82%84%E5%BC%95%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/
JavaScriptのaddEventListenerの使い方、イベント一覧や引数について
投稿日:2018-03-28 更新日:2018-11-20

http://cly7796.net/wp/javascript/set-arguments-to-the-function-with-addeventlistener/
addEventListenerで関数に引数を設定する
2020.09.27

https://www.imamura.biz/blog/27539
JavaScriptでイベントリスナー(addEventListener)に指定する関数に「引数を渡す」方法

https://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r17
イベント処理(2)

https://www.w3schools.com/jsref/met_document_addeventlistener.asp
HTML DOM addEventListener() Method

https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
@tochiji
2019年12月10日に更新
JavaScriptのpreventDefault()って難しくない?preventDefault()を使うための前提知識

document.querySelector()とelement.querySelector()

html

<div id="divText">テキスト</div>

JavaScript

let divText = document.query Selector('#divText');
console.log(divText);              // <div>
console.log(divText.textContent);  // "テキスト"

// テキスト を 変更後テキスト に書き換え
let divText = document.querySelector('#divText').textContent;
divText = "変更後テキスト";
// 一気に書くなら以下
document.querySelector('#divText').textContent = "変更後テキスト";

https://agohack.com/how-to-use-js-queryselector/
[JavaScript] querySelector() の使い方
2020-06-12

https://ja.javascript.info/searching-elements-dom
14日 五月 2020
検索: getElement*とquerySelector*

for of構文など

const array = ['バナナ', 'リンゴ', 'メロン', 'ミカン'];
 
for(let item of array) {
  console.log( item );
}

https://www.sejuku.net/blog/20228
【JavaScript入門】「for – of文」の使い方と間違いやすいポイントを徹底解説!
2019/4/23

const array = ['バナナ', 'リンゴ', 'メロン', 'ミカン'];

array.forEach((x) => {
  console.log(x);
});

https://qiita.com/41semicolon/items/6ec0f6a9fdf7c97f1a41
@41semicolon
2018年07月24日に更新
for…of を使うなってAirbnbが言ってたから使わないようにしてたら慣れた

https://qiita.com/wifeofvillon/items/15359535a834832e08ea
@wifeofvillon
2020年01月09日に更新
JavaScriptにおける連想配列のforループ操作

見出し


00.javascript/13.getelementbyidなど要素の取得.txt · 最終更新: 2021/01/13 by adash333