常連

閲覧ありがとうございます！
現在JSを勉強しており、insertBefore(,);を使って、
.div1の前にDOMの追加しようと思っているのですが、
下記のエラーが出てしまいます。

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at index.html:54

insertBeforeはエレメントではなく、nodeにしか使えないということだったので、
getElementByIdではなくquerySelectorで取得したのですが、nodeではないとの上記のエラーが出てしまいました・・・。

お手すきの際に教えていただけますと幸いです！
よろしくお願い致します。


```ここに言語を入力

【HTML↓】

<div id="grand-father">
    <div id="parent">
        <div id="target">
            自分
        </div>
    </div>
    <div id="divList">
        <div class="div1">テスト1</div>
        <div class="div2">テスト2</div>
        <div class="div3">テスト3</div>
    </div>
</div>


【JS↓】

const target2 = document.getElementById('divList');
const reference = document.querySelector('.div1');
const newDivCont = document.createElement('div');

target2.insertBefore('newDivCont', 'reference');
```

insertBefore(,);についての質問です。

## テーマ、知りたいこと
JavaScriptで、xmlをdom上で操作しています。
clonenodeを使用して、ノードを複製した場合の動作について知りたいです。


## 背景、状況
clonenodeで複製した場合に、タグ名、要素名、属性名は、全く同じ形で複製されるのでしょうか。
また、複製されるタイミングをブラウザ上で確認できますでしょうか。

と言うのも、複製した後に、属性値をキーにして検索しに行き、書き換えたいと思っております。

その際に複製元と同じであれば、意図していない値まで描き変わってしまいます。

良い方法など対策が有りましたらご教授頂けたら嬉しいです。
宜しくお願い致します。




JavaScriptのclonenodeについて

### 実現したいこと

* 内部に`<label>`があろうが、外側の`<div>`で1クリックあたり1回のイベントを拾えるようにする

### 前提

```html
<div>
  文章などで外側のスペースも確保
  <label>
    hoge
    <input type="text" />
  </label>
</div>
```

このようなHTMLに対して、`<div>`で`onclick`を拾うようにした上で、`<label>`内の文言をクリックすると、`<label>`と`<input>`の2回クリックイベントが`<div>`まで上がってきます。

やりたいこととしては、`<div>`側のイベントハンドリングの実装だけで、このような`<label>`のクリックに対しても1回だけの処理を行いたい、という状況です。

### やりたくないこと

* `<label>`や`<input>`の側に処理を仕掛ける（実際には個数が増減したりもあるので煩雑となります）
* `<label>`のクリックで`preventDefault`を行う、あるいは`<div>`のキャプチャフェーズでイベントを処理して、`<input>`の反応自体を抑える（入力要素がフォーカスしなくなるのは避けたい）

### 現状の考え

とりあえず、現状では「`<label>`のクリックから派生した`<input>`のクリックイベントでは処理を割愛する」という手法を考えていて、いったん「`event.timeStamp`を見比べて、ごく直近で発生したイベントなら除外する」というような条件による判定がありそうではあるのですが、安定して稼働する条件なのか、そしてもっと確実な判定法がないのか気になっているところです。

### その他

Reactで実装を行っているので、純粋なDOMだけではなくReactによる解決策も歓迎です。

labelのクリックで入力エレメントが起こすclickイベントを区別する方法があるか

input type=”file” で選択したファイルを、ブラウザ再立ち上げ時に、初期値としてセットすることはできないでしょうか？

検索してみますと、セキュリティ的な問題で、input type=”file”の書き換えができないように、制限されているとのことでしたが、なんとかして実現したいです。

一案としまして、Chrome拡張として作成し、chrome.storageに<input type="file">の要素ごと保存しておく方法を思いつきましたが、
chrome.storageに要素の保存はできないようです。
他に、IndexedDB等もあるようですが、今すぐに試すことはできないため、確認できない状態です。

どなたか、何らかの実現方法をご存じの方がいらっしゃいましたら、ご教授いただきたいです。
よろしくおねがいします。

input type=”file” の初期値をセットする方法は？

### 前提
ボタンをクリックした時にonClickで関数を呼び出しreact-router-domを使ってページ遷移させたいです。

### 発生している問題・エラーメッセージ
クリックしてもなにも起こりません。
コンソールにもエラーはありません。

### 該当のソースコード

App5.jsx
```
import { Link } from "react-router-dom";

function App5() {

// ここの関数でページ遷移を実行したい
const aaa=()=>{
<Link to={`/register/`}>こちら</Link>
}

    return(
        <>
        <h1>ホーム</h1>
<button onClick={aaa}>クリック</button>
        </>    
    )
}
```
register.jsx
```
import { Link } from "react-router-dom";

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
      <div>
        <Link to={`/`}>ホームに戻る</Link>
      </div>
    </>
  );
};

export default Register;
```
main.jsx
```
import React from 'react'
import ReactDOM from 'react-dom'

import App5 from './router/App5'
import Register from './router/register'
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(

    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<App5 />} />
      <Route path={`/register/`} element={<Register />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)
```

### 試したこと

関数の中で戻るボタンの実装方法はありましたが特定のページへ遷移させる方法が見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

react ver.18


Reactでボタンをクリックしたときにページ遷移させたい

### 実現したいこと

JavascriptでDom XSSの脆弱性対策を行いたい

### 前提

画像、短い動画をアップロード(ファイル)、名前、メッセージを送信できる掲示板を作成していて、名前、メッセージを入力する際にヤフー知恵袋のような入力可能な文字数をカウントする機能を実装するためにHTMLElement.innerHTMLを使っていたのですが、エレメント事作る必要があり＝そこでDOM要素が発生してしまうリスクがありdocument.addEventListenerを使うよう修正いたしました。

既存の文字入力が上限を超えていた場合に送信できないようにする機能とファイルアップロード箇所にデフォルトで表示されているカメラの画像をファイルアップロード時に非表示にするコードもまとめて実装する必要があるため上手くまとめることが出来ず困っております。

カメラ画像をファイルアップロード時に非表示にするコードは、イベント設定以前に要素を取得しているため、HTML解釈後に実行することが必要となっていて、window.addEventListener("load", init);でまとめたのですが、無理やりコードをつなぎ合わせた形になっております。

### 発生している問題・エラーメッセージ

```
文字入力数の条件にあわせて送信ボタンの使用権限を操作する機能を制限する機能とDOMツリー構築完了後にカメラ画像をファイルアップロード時に非表示にするコードを両立したい為、入力中の文字数チェックと、ボタン制御のための文字数チェックが別々になっている。
```

### 該当のソースコード

```ここに言語名を入力
<script>
    function validation_submit(f) {
        const submit = document.getElementById("submit_button");
        /* 判定は逆なので、逆に渡す */
        submit.disabled = f ? false : true;
    };
    function validation_text(parts) {
        /* このpartsグループの、inputを抽出 */
        let text = parts.getElementsByClassName('input')[0];
        /* 最小チェック */
        if (text.value.length == 0) {
            return false;
        }
        /* 最大チェック */
        if (text.value.length >= text.dataset.length) {
            return false;
        }
        return true;
    };
    /* バリデーション条件判断部分 */
    function validation() {
        let parts = document.getElementsByClassName('parts');
        let submit = true;
        for (let i = 0; i < parts.length; i++) {
            if (validation_text(parts[i]) != true) {
                submit = false;
            }
        }
        validation_submit(submit);
    };
    /* 例えばのチェック */
    function init() {
        /* カメラ画像をファイルアップロード時に非表示にする */
        /* カメラ画像をファイルアップロード時に非表示にする */
        const attach = document.querySelectorAll('.attach');
        const del = document.querySelectorAll('.attachdel');
        const clear = document.querySelectorAll('.attachclear');
        const viewer = document.querySelectorAll('.viewer');
        const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
        for (let i = 0; i < attach.length; i++) {
        attach[i].addEventListener('change', () => {
        if (attach[i].files[0].size > 15 * 1024 * 1024) {
        alert('ファイルサイズが 15MBバイトを超えています');
        return;
     }
        del[i].value = "";
        viewer[i].innerHTML = "";
        if (attach[i].files.length !== 0) {
        const reader = new FileReader();
        reader.readAsDataURL(attach[i].files[0]);
     }
     });
        clear[i].addEventListener('click', () => {
        attach[i].value = "";
        del[i].value = "1";
        viewer[i].innerHTML = "";
        changeImg[i].classList.remove('hideItems');
     });
     }
        /* 文字数表示 */
        document.addEventListener('input', e => {
            if (!['name', 'message'].includes(e.target.id)) return;
            const
                t = e.target,
                m = t.nextElementSibling,
                n = t.value.length - (t.dataset.length | 0),
                c = document.createElement('span');
            c.append(Math.abs(n));
            m.style.color = n > 0 ? 'red' : 'black';
            m.replaceChildren(n > 0 ? '' : '残り', c,
                `文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
            /* 毎回判定によるボタン制御 */
            validation();
        });
        /* 初回判定のボタン制御 */
        validation();
    };
    window.addEventListener("load", init);
</script>

<body>
    <form method="post" enctype="multipart/form-data">
        <div class=parts>
            <h2>名前(name)<span>※必須</span></h2>
            <input class=input type="text" name="name1" id="name" data-length="32" placeholder="未入力の場合は、匿名で表示されます" value="">
            <div></div>
        </div>
        <div class=parts>
            <h2>コメント(comment)<span class="required">※必須</span></h2>
            <input class=input type="text" name="name2" id="message" data-length="40" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください">
            <div></div>
        </div>
        <div class="post-button">
            <button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button>
        </div>
    </form>
</body>
```

### 修正前のソースコード

```ここに言語名を入力
<script>
function lengthCheck() {
const left = this.dataset.maxlength - this.value.length;
if (left >= 0) {
this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字';
this.dataset.submit_disabled = this.value.length === 0;
} else {
this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています';
this.dataset.submit_disabled = true;
}
let disabled = false;
for (let i = 0; i < length_input.length; i++) {
if (length_input[i].dataset.submit_disabled === "true") {
disabled = true;
}
}
submit_button.disabled = disabled;
}
/* カメラ画像をファイルアップロード時に非表示にする */
const attach = document.querySelectorAll('.attach');
const del = document.querySelectorAll('.attachdel');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('ファイルサイズが 15MBバイトを超えています');
return;
}
del[i].value = "";
viewer[i].innerHTML = "";
if (attach[i].files.length !== 0) {
const reader = new FileReader();
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
attach[i].value = "";
del[i].value = "1";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
}
</script>

<div class="title-partial">
<h2>名前(name)<span class="required">※必須</span></h2>
<input class="length_input" data-maxlength="<?php echo MAX_LENGTH::NAME; ?>" type="text" name="namae" id="name" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
<div class="msg_partial"></div>
</div>
<div class="body-partial">
<h2>コメント(comment)<span class="required">※必須</span></h2>
<textarea class="length_input" data-maxlength="<?php echo MAX_LENGTH::MESSAGE; ?>" name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>
<div class="msg_partial"></div>
</div>
```

### 参考サイト

https://gihyo.jp/dev/serial/01/javascript-security/0006

Javascriptのまとめかたについてアドバイスお願い致します

Wordpressで作っているWEBサイトがあります。
Chrome Developer ToolのNetworkタブの一番下に「DomContentLoaded」と「Load」の時間が出るかと思います。

# 質問１
下記スクショの通り、DomContentLoadedイベント発火までの時間がとても長いため、サイトを表示し始めるのに時間がかかっているようなのですが、
これをもっと速くするための対策などあればご教示ください。

![イメージ説明](7a6ebed2369a915dc10b9e5c60af8955.png)

###### 環境
タイのバンコクからアクセスしています。
サーバーは日本のXサーバーです。
Cloud Flare(CDN、バンコクにデータセンターあり)を設定しています。
CDNサービスのおかげですが、「DomContentLoaded」以降は読み込みが速いです。

---

# 質問２
「DomContentLoaded」イベントまでの時間は、DNSルックアップや、HTMLパース等、「描画が始まるまでの全てのフロー」が終わった時間だと認識していますが合っていますか？
「DomContentLoaded」イベント発火後から目に見えるサイトのコンテンツの描画が始まるという認識ですので、
ユーザー視点で考えると、「DomContentLoaded」発火から、「Load」発火までの時間に、サイトが描画されているのを目視するので、
ユーザーの印象としては「DomContentLoaded」発火から、「Load」発火までの時間が、サイト表示速度の体感時間になるかと思いますが、合っているでしょうか？

DomContentLoadedイベントまでの経過時間が長い

初めまして、プログラミング初心者です。
質問内容はタイトルの通りなのですが、JavaScriptでDOMを操作するときにinnerHTMLとappendChild、どちらを使っていいか分からないときがあります。

例えば、下記の場合にどうしてinnerHTMLが使えないのか分かりません。

```
const postsContainer = document.getElementById('posts-container');

const postEl = document.createElement('div');
    postEl.innerHTML = `
        <div class="number">${post.id}</div>
        <div class="post-info">
            <h2 class="post-title">${post.title}</h2>
            <p class="post-body">${post.body}</p>
        </div>
        `;

    //innerHTMLを使うとHTMLには [object HTMLDivElement] とのみ出力される
    postsContainer.innerHTML = postEl;

    //appendChildを使うとHTMLに正常に出力される
    postsContainer.appendChild(postEl);
```

自分でも色々検索してみたのですが、なかなか違いがしっくり来ないので、ぜひご回答いただければ幸いです。よろしくお願いしますm(_ _)m