要素を参照する document オブジェクトのメソッド

単数

要素(Element) が単数形になっています(戻されるのは一つのオブジェクトです)

var element = document.getElementById(id);

セレクタに一致した最初のオブジェクトを返します

var element = document.querySelector(selectors);

複数

要素(Element) が複数形(Elements)になっています。戻されるのは複数のオブジェクトなので、そのうちの一つを参照する為に[index] で番号( 0 はじまり) で指定します。要するに戻されるのはコレクションですが、記述方法は配列です。

🔴 name 属性で取得

var elements = document.getElementsByName(name);

▼ この記事内の title( 単数と複数 ) を デベロッパーツールで表示( F12 で開いてください )



<script>
function test_name_title() {
	var elements = document.getElementsByName("title");
	console.dir( elements );
	for (var i = 0; i < elements.length; i++) {
		var item = elements[i];
		console.log( item.textContent );
	}
}
</script>

<input type="button" value="実行" onclick="test_name_title();">

▼ MDN より引用
リストの要素について処理を回すために for...in や for each...in を用いてはいけません。なぜなら、 NodeList のプロパティである要素に加えて、 length プロパティについても処理が適用されるため、 element オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for..in で取得されるプロパティの順番は保証されていません。
for...of ループ は IE11 で使用できません 🔴 要素名で取得 var elements = document.getElementsByTagName(name); 🔴 クラス名で取得 var elements = document.getElementsByClassName(names); // または var elements = rootElement.getElementsByClassName(names); 🔴 CSS セレクタで取得 セレクタに一致した全てのコレクションを返します var elementList = parentNode.querySelectorAll(selectors);
JavaScript

ブークマークレットの作成方法( コードの書き方 )

通常の https:// の代わりに javascript: と書いて、その後には普通に JavaScript のコードを書きます。但し、改行コードは使えないので長い JavaScript のコードの場合は他でテストした上で改行コード取り去る必要があります。

また、メッセージボックスが出ないコードの場合は、最後に void(0); を追加するのが簡単です。

だれにでも解りやすい使い方

WEB ページ上の入力フィールドに固定値を表示させる事ができます。入力フィールドを DOM で参照する必要があり、その定義情報を知る知識が必要である事と、その定義情報はいつ変更されても仕方が無いという事を理解しておく必要があります。

関連する記事 🚩 要素を参照する document オブジェクトのメソッド

Google のページ 🚩 https://www.google.co.jp/ の検索入力で試します

Google の検索は name="q" なので以下のようなコードをブックマークに書き込めば使えます。
javascript:document.getElementsByName("q")[0].value="ブックマークレット";void(0)
※ 例えば業務上の社員番号入力などに使えます。

▼ コードの書き方には以下のようなバリエーションがあります
javascript:(function(){document.getElementsByName("q")[0].value="ブックマークレット";})();
この記法は無名 function の定義を実行するという意味で、書き換えると以下のようになります。
javascript:var a=function(){document.getElementsByName("q")[0].value="ブックマークレット";};a();

または以下のようにも書けますが、使い勝手が悪いので避けたほうがいいでしょう。
javascript:void(document.getElementsByName("q")[0].value="ブックマークレット");


WEB ページから登録できるようにするには、A 要素で以下のように記述します。
<a href="javascript:var%20a=function(){document.getElementsByName(%22q%22)[0].value=%22ブックマークレット%22;};a();" onclick="alert('クリックでは使えません');return false">ブックマークレット</a>

Edge 以外では、これをブックマークバーにドラッグ & ドロップで登録されると思います。

▼ 登録用リンク
ブックマークレット

Google のログインは、id="identifierId" なので、少し変えればアカウントの入力に使用できるでしょう。( 使うのは自宅の PC にしましょう )




clipboard.js を使用して WEBページ上でテキストをクリップボードにコピーする

clipboard.js
CDNJS

デモページ

ページ下部は、div に contenteditable="true" を設定しているので直接編集できるエリアになっています。なので、クリップボードにコピーした後は普通に貼り付けて確認できます。

実装内容

1) ページにひとつだけ、クリップボード転送用の要素を DIV で作成します(ここでは id="clipboard")
   (body 要素直下でいいと思います)

2) DIV 内に改行やスペースを反映させる為に white-space:pre-wrap を設定する
( 3) で幅を指定してそこで改行させる為の -wrap を使用します )

3) ページ上から隠す為に、position:absolute;left:-1000px を設定する
   (クリップボートへコピーする為に選択する必要があるので、非表示では動作しません)
   転送したテキストがこちら側へ表示しないように width:900px と word-wrap:break-word を指定する

4) クリックイベントは、ボタンである必要は無く、どのような要素でも良い

5) ここでは、クリップボードへコピーが終了した後、alert でメッセージを表示しています
( 必要な場合にこのようにイベントを使用します )

注意事項

ここでは、WEB ページ内に無い文字列を加工等してクリップボードに転送する事を想定しているので、転送用の隠し DIV を用意していますが、WEB ページ上に既にあるテキストならば、その要素に対して直接 data-clipboard-target 属性をトリガー要素に設定します


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>クリップボードへコピー</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<script>
$(function(){

	// ***************************
	// クリップボード
	// ***************************
	// コピーする時のトリガーとなる要素に設定されるクラスを決定
	var clipboard = new ClipboardJS('.clip_trigger');

	// ***************************
	// コピー成功後のイベント
	// ***************************
	clipboard.on('success', function(e) {
		alert("クリップボードにコピーしました");
	});

	// ***************************
	// クリップボード用データ転送
	// ***************************
	$("#act_copy").on("click", function(){

		$("#clipboard").text( $("#text_data").val() );

	});

});

</script>

<style>
html,body {
	height: 100%;
}

body {
	margin: 0;
}

#text_data {
	width:300px;
}

/* 上下エリア フィットコントロール用  */
#head {
	padding: 16px;
	width: 100%;
	height: 230px;
}
#extend {
	padding: 4px 16px;
	border: solid 2px #c0c0c0;
	overflow: scroll;

	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );

	height: calc( 100% - 230px - 2px );
}

</style>

</head>
<body>
<!-- クリップボード用隠しエリア -->
<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
<div id="head">
	<div class="alert alert-primary">クリップボード処理
	<a class="btn btn-secondary btn-sm float-right align-top" href=".">フォルダ</a>
</div>

	<span class="align-top mr-4">クリップボードへコピー</span>

	<textarea class="align-top mr-4" id="text_data"></textarea>

	<input
		id="act_copy"
		data-clipboard-target="#clipboard"
		class="clip_trigger btn btn-primary align-top mr-4"
		type="button"
		value="実行">

	<input
		onclick="location.reload(true)"
		class="btn btn-info btn-sm align-top  mr-4"
		type="button"
		value="再表示">


</div>

<!-- 編集可能なエリア : ここにクリップボードの内容を貼り付けて確認する -->
<div id="extend" contenteditable="true"></div>



</body>
</html>



HTA か IE11(要設定) で動作する Excel.Application の処理を JavaScript で記述したサンプル

JavaScript で記述しているのは、jQuery を使用したいからです。Excel 部分以外であれば他の用途にそのまま利用できるように考えています。

twitter-bootstrap を使用して簡単で美しい見栄えが利用できます。

Excel.Application を JavaScript で利用する際は、Microsoft が認識しているバグがあるので、サンプルのような終わり方をする必要があります。そうしなければ、メモリに Excel のプロセスが残ってしまう事を避けられません。Microsoft は、VBScript を使えば問題無いと書いていますが、IE11 でそもそも VBScript を使うのはいろいろ制限や工夫が必要な上に他へのリソースの流用ができないので、このようなアプローチが必要かもしれません。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta charset="sjift_jis">
<title>Excel の処理</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<script>

	// ****************************
	// HTA の時のみ使用
	// ****************************
	//top.moveTo( 300, 150 );
	//top.resizeTo( 800, 600 );

	var WshShell = new ActiveXObject("WScript.Shell");
	var FilePath = "";

	$(function(){

		$("#action").on("click", function(){

			// ****************************
			// Excel.Application を解放する為に
			// ローカル変数を使用しています
			// ****************************
			var Excel = null;
			var Book = null;
			var Worksheet = null;

			Excel = new ActiveXObject("Excel.Application");

			// ****************************
			// 保存ダイアログを前面に
			// 表示する為の処理です
			// ****************************
			Excel.Visible = true;
			Excel.WindowState = 2;	// Minimize
			Excel.WindowState = 1;	// Maximize
			Excel.Visible = false;

			// ****************************
			// 警告を出さないようにする
			// 使用すると上書きの警告が
			// 出なくなります
			// ****************************
			// Excel.DisplayAlerts = false;

			// ****************************
			// ブック追加
			// ****************************
			Excel.Workbooks.Add();

			// ****************************
			// 追加したブックを取得
			// ****************************
			Book = Excel.Workbooks( Excel.Workbooks.Count );

			// ****************************
			// 現状、ブックにはシート一つ
			// という前提で処理していますが
			// 必要であれば、Book.Worksheets.Count
			// で現在のシートの数を取得できます
			// ****************************
			Worksheet = Book.Worksheets( 1 );
			Worksheet.Activate();

			// ****************************
			// シート名設定
			// ****************************
			Worksheet.Name = "新しい情報";

			// ****************************
			// 参照
			// 最後の 1 は、使用するフィルター
			// の番号です
			// ****************************
			FilePath = Excel.GetSaveAsFilename( "excel_001","Excel ファイル (*.xlsx), *.xlsx", 1)
			if ( FilePath == false ) {
				// ****************************
				// 保存していないので
				// 保存した事にして閉じます
				// ****************************
				Book.Saved = true;
				Book.Close();
				Excel.Quit();
				Excel = null;

				alert( "Excel ファイルの保存選択がキャンセルされました" );

				window.setTimeout("Cleanup();",1);
				return;
			}

			// ****************************
			// セルへセット
			// ****************************
			// タイトル部分の参照
			$("#tbl th").each(function(idx){
				Worksheet.Cells(1, idx+1) = $(this).text();
			});

			// 行一覧の参照
			$("#tbl tr").each(function(row){
				$(this).find("td").each(function(idx){
					Worksheet.Cells(row, idx+1) = $(this).text();
				});
			});

			// ****************************
			// セルをデータに合わせて
			// 整理して左上を選択
			// ****************************
			Worksheet.Columns("A:C").Select();
			Worksheet.Columns("A:C").EntireColumn.AutoFit();
			Worksheet.Range("A1").Select();

			// ****************************
			// 保存
			// 拡張子を .xls で保存するには
			// Call ExcelBook.SaveAs( FilePath, 56 ) とします
			// ****************************

			try {
				Book.SaveAs( FilePath );
			}
			catch (e) {
				console.dir(e);
				alert("Book.SaveAs でエラーが発生しました");
			}

			// ****************************
			// Excel をアプリケーションとして終了
			// ****************************
			Excel.Quit();
			Excel = null;
			idTmr = window.setTimeout("Cleanup();",1);

			alert("処理が終了しました \n\n 保存したブックを開きます");

			WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + FilePath );

		});

	});

function Cleanup() {
	CollectGarbage();
}
</script>

<style>
html,body {
	/* height: 100%; */
}

.entry td {
	padding: 6px;
}

/* ****************************
テーブル内のデータを選択不可
( ダブルクリック対応 )
******************************/
#tbl {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#tbl th {
	cursor: default;
}

#tbl td {
	cursor: default;
	color: black;
}

</style>

</head>
<body>
<div class="main">

<table class="entry ml-3 mt-3">
	<tr>
		<td>
			<input id="action" type="button" value="Excel.Application の実行" class="form-control btn btn-primary">
		</td>
	</tr>
</table>


<table class="table ml-3 mt-2" id="data" style='width:400px;'>

	<tbody id="tbl">

		<tr>
			<th>コード</th>	<th>開始日</th>	<th>終了日</th>
		</tr>

		<tr>
			<td>FIRST</td><td>2018/04/01</td><td>2018/06/30</td>
		</tr><tr>
			<td>SECOND</td><td>2018/07/01</td><td>2018/09/30</td>
		</tr><tr>
			<td>THIRD</td><td>2018/10/01</td><td>2018/12/31</td>
		</tr><tr>
			<td>FOURTH</td><td>2019/01/01</td><td>2019/03/31</td>
		</tr>

	</tbody>

</table>


</div>
</body>
</html>


関連する記事

🔻 IE11 の設定と VBScript でのサンプルです
IE11 で Excel のブックにアクセスする / JavaScript を使用して Excel のブックのセルにデータをセットして更新



Google Chrome のアドレス部分に書き込む簡易エディタ



以下をクリックして選択状態にして、Google Chrome のブックマークバーへドラッグすると、ブックマークレットとしていつでも実行できるようになります。( タイトルは編集で変更してください )
▲ このテキストを Google Chrome のアドレスへ書き込むだけで簡易的なテキストエディタになり、ローカルへ SHIFT_JIS で保存する事ができ、既存のテキスト( SHIFT_JIS と Unicode と UTF8:BOMあり )を読み込む事ができます。

▼ もちろん、通常のWEB ページ上で使用する事もできます

以下が【保存用】のテスト用ソースコードです。( 改行コードが CRLF になるように処理しています )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://winofsql.jp/js/encoding.js"></script>
<script src="https://winofsql.jp/js/save-sjis.js"></script>

<script>
$( function(){

	$("#save-action").on("click", function(){

		// テキストエリアのテキストを jQuery で取得		
		var text = $("#save-text").val();
		// lf のみを crlf に変換
		text = text.replace(/\n/g, '\r\n');
		// ローカルに保存する
		save_sjis( "save-sjis.txt", text );
	});

});
</script>
<div><input type="button" id="save-action" value="Save as Shift_JIS"></div>
<textarea id="save-text" style='width:400px;height:100px;'></textarea>


▼ save-sjis.js の内容です
var load_save_file_name = null;

var str2array = function(str) {

	var array = [],i,il=str.length;
	for(i=0;i<il;i++) array.push(str.charCodeAt(i));
	return array;

};

function save_sjis( filename, str ) {

	var array = str2array( str );
	var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
	var sjis_data = new Uint8Array(sjis_array);

	if ( load_save_file_name != null ) {
		filename = load_save_file_name;
	}

	saveAs(
		new Blob(
			[sjis_data]
			, {type: "text/plain;charset=shift_jis"}
		)
		, filename
	);

}

function load_sjis( event, target ) {

	var file = event.target.files[0];
	load_save_file_name = file.name;

	var reader = new FileReader();
	reader.onload = function(event) {
		target.value = event.target.result;
	};

	reader.readAsText(file,"shift_jis");

}


▼ 読込みのサンプルは以下のようになります
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/save-sjis.js"></script>

<script>
$( function(){

	$("#get-text").on("change", function( event ){

		load_sjis( event, $("#save-text").get(0) );

	});

});
</script>
<div><input type="file" id="get-text"></div>
<textarea id="save-text" style='width:400px;height:100px;'></textarea>





nanaco 番号の入力ブックマークレット( 番号なのでアカウントのようには記憶しづらい )

prompt メソッドでダイアログが表示されて入力します。

例えば、nanaco ならば(パスワードでログイン)というサンプルですが、好みによって番号の初期値を設定も可能です。

※ nanaco は番号なのでアカウントのようには記憶しづらいのでサンプルとしています。
javascript:var a=prompt('nanaco番号入力','番号初期値を入れる場合はココ');if(a!=''&&a!=null){document.getElementsByClassName('txtBoxLogin')[2].value=a;};void(0);

そのページをデベロッパーツールで input 要素の id または name または class をチェックして入力した値を転送するので、一応たいていの入力すべき値を転送できます。但し、自宅以外で行うのはセキュリティ上よろしく無いので注意して下さい( 番号やアカウント名が他人に漏れてしまいます )

サンプルではワンクッション置いて入力ダイアログを表示していますが、それを省いたほうが早く処理が可能にはなります




IE11 で Excel のブックにアクセスする / JavaScript を使用して Excel のブックのセルにデータをセットして更新

⭕ まず、信頼するサイトlocalhost( またはイントラネットのサーバ ) を登録します。



⭕ レベルのカスタマイズで『スクリプトを実行しても安全だとマークされていないActiveX コントロール』を『有効』にします。



▼ 以下の .reg ファイルをエクスプローラからダブルクリックしてインポートする事もできます
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\2]
"1201"=dword:00000000

▼ .reg ファイルをダウンロード
その上で以下のコードを localhost で実行が可能です。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html; charset=shift_jis">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

// *************************************
// IE 用オブジェクト作成関数
// *************************************
function newObject( className ) {

	var obj;

	try {
		obj = new ActiveXObject( className );
	}
	catch (e) {
		obj = null;
	}

	return obj;

}

// *************************************
// Excel 用オブジェクト 格納変数
// *************************************
var excelApp = null;
var myBook = null;

// *************************************
// Exce ブックを読み込んで更新して終了
// *************************************
function excelTest() {

	// Excel オブジェクト作成
	if ( excelApp == null ) {
		 excelApp = newObject("Excel.Application");
	}

	// Excel ブックの読み込み
	myBook = excelApp.Workbooks.Open("C:\\Users\\lightbox\\Documents\\Book1.xlsx");

	// アクティブなウィンドウを最大化
	excelApp.ActiveWindow.WindowState = 2;
	// 表示時様態にする
	excelApp.Visible = true;

	// jQuery でオブジェクトの一覧を取得して Excel のセルに情報をセットする
	var row = 0;
	$.each( window.navigator, function( key, value ){

		row++;
		// シートのセルに書き込み
		myBook.Sheets("Sheet1").Cells(row, 1) = key;
		myBook.Sheets("Sheet1").Cells(row, 2) = typeof value;
		myBook.Sheets("Sheet1").Cells(row, 3) = value;

	});

	// 保存
	myBook.Save();

	// Excel の終了
	if ( excelApp != null ) {
		excelApp.Quit();
		excelApp = null;
	}

}

</script>
</head>
<body>
<input id="export" type="button" value="Excel のテスト" onclick="excelTest();">
</body>
</html>





localStorage に保存して、次回の表示に使用する

タブやアコーディオンや、限られた視野の範囲で効率良く表示するコンテンツは、最後に表示したものを記憶しておくのが良いと思います。
物事を始めたり終えたりするのに、適当な時機

1 本人が悪いことでないと確信してなされる犯罪

2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為

◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。

【徐に】落ち着いて、ゆっくりと行動するさま
<script>
$(function() {
	var target_tab = 0;
	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
		target_tab = localStorage["old_active"];
	}
	$( "#mytabs" ).tabs({
		active: target_tab,
		activate: function( event, ui ) {
			localStorage["old_active"] = $( this ).tabs( "option", "active" );
		}
	});
});
</script>

<div id="mytabs">

	<ul>
		<li><a href="#tabs-1">潮時</a></li>
		<li><a href="#tabs-2">確信犯</a></li>
		<li><a href="#tabs-3">おもむろに</a></li>
	</ul>
	<div id="tabs-1">
物事を始めたり終えたりするのに、適当な時機
	</div>
	<div id="tabs-2">
<p>1 本人が悪いことでないと確信してなされる犯罪</p>
<p>2 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為</p>
<p>◆犯罪というほど重大な行為でない場合にも用いる。2 の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が 1 ではなく 2 の意で用いると回答した。</p>
	</div>
	<div id="tabs-3">
【徐に】落ち着いて、ゆっくりと行動するさま
	</div>
</div>
jQuery 部分は全て Google のホスティングを使用しています。