常連

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

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

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

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

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

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


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

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

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

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




JavaScriptのclonenodeについて

### 前提
ボタンをクリックした時に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でボタンをクリックしたときにページ遷移させたい

### 実現したいこと

* 内部に`<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イベントを区別する方法があるか

初めまして、プログラミング初心者です。
質問内容はタイトルの通りなのですが、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

JavaScript: innerHTML と appendChild()の違いについて。

閲覧ありがとうございます！
現在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(,);についての質問です。

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イベントまでの経過時間が長い

お世話になっております。
現在Pタグから値を取得することは出来ました。
しかし、
ステップイン実行だと正常に動作して、
プログラム全体で実行を行うとPタグの値を取得出来ない、
という状況になってしまいパニックになりました。

色々なサイトを見たのですが、
今回の原因はおそらく、Pタグの値を取得する前に次の処理を行っているのが、
原因かと思っています。

■質問の内容
上の処理が完了するまで下の処理を止めるというコードを書きたいのですが、
ご教示いただけないでしょうか。

------
■作成したコード
Sub test()

Dim searchx As String
Dim searchy As String
Dim all As String
Dim box() As String

Dim WebIE As InternetExplorer

'------------------------------------
'★セルの文字取得

searchx = Cells(1, 1)
searchy = Mid(Cells(1, 5), InStr(Cells(1, 5), "@") + 1, 20)
all = searchx + " " + searchy
'------------------------------------

  '------------------------------------
  '★変数webIEを使用してIE起動

    Set WebIE = New InternetExplorer
     
    WebIE.Visible = True
    WebIE.Navigate "https://www.google.com/?hl=ja"
   '------------------------------------

    '------------------------------------
    '★IEのリロード完了まで処理をしない
    
    While WebIE.Busy Or WebIE.readyState <> READYSTATE_COMPLETE
    DoEvents
    Wend
    '------------------------------------
  
    On Error Resume Next      '値がないとエラーが出るので、エラー回避用
    
    '------------------------------------
    '★値をWebで入力
    Dim A As Object
    For Each A In WebIE.document.getElementsByTagName("INPUT") '①FOR EACH でINPUTをすべて抜き出す。
    If A.name = "q" Then A.Value = all
    Next
    '------------------------------------
    
    
    '------------------------------------
    '★検索ボタンをクリック
    Dim b As Object
    For Each b In WebIE.document.getElementsByTagName("INPUT") '①FOR EACH でINPUTをすべて抜き出す。
    If A.name = "btnk" Then b.Click
    While WebIE.Busy Or WebIE.readyState <> READYSTATE_COMPLETE
     DoEvents
    Wend
    Next
    '------------------------------------
    
    '-------------------------------------
    '★指定したURLのみ取得
    Dim i As Long
    Dim boxi As Long
    ReDim box(boxi)
    i = 5
    boxi = 0

    Dim htmlDoc As HTMLDocument
    Set htmlDoc = WebIE.document
    Dim anchor As HTMLAnchorElement
    
    For Each anchor In htmlDoc.Links
      
    If InStr(anchor, searchy) <> 0 And InStr(anchor, "google.com") = 0 Then
    box(boxi) = anchor
    'Cells(i, 1).Value = anchor
    Else
    boxi = boxi - 1
    i = i - 1
    End If
    
    
    i = i + 1
    boxi = boxi + 1
    Next anchor
    
    '-------------------------------------
    WebIE.Quit
   
    Set WebIE = New InternetExplorer
    WebIE.Visible = True
    WebIE.Navigate2 box(0)
   '------------------------------------

    '------------------------------------
    '★IEのリロード完了まで処理をしない
    
    While WebIE.Busy Or WebIE.readyState <> READYSTATE_COMPLETE
    DoEvents
    Wend
    
    '------------------------------------
    Dim access As Object
    For Each access In WebIE.document.getElementsByTagName("a") '①FOR EACH でINPUTをすべて抜き出す。
    If access.innerText = "テスト" Or access.innerText = "テスト1" Or access.innerText = "テスト2" Then
    While WebIE.Busy Or WebIE.readyState <> READYSTATE_COMPLETE
    DoEvents
    Wend
    access.Click
    Exit For
    End If
    Next
    
    Dim juusyo As Object
    Dim cntn As Long
    Dim change As String
    
    cntn = 5
    For Each juusyo In WebIE.document.getElementsByTagName("p")
     If InStr(juusyo.innerText, "東京都") > 0 Then
     Cells(cntn, 1).Value = juusyo.innerText
     Else
    End If
    
    Next

    
    End Sub