(已解決)這個Js是出了什麼問題？

html javascript dom 元素選取

Oo_花之舞__oO 2022-12-27 16:18:34 ‧ 1280 瀏覽

分享至

上面我的程式碼是想要改動input的value
同樣一串

document.querySelector("body > form > div:nth-child(2) > input[type=text]:nth-child(2)").value="12355"

第一次執行的時候沒辦法抓到DOM
第二次我是去element那邊對著元素right click然後copy JSpath
貼過來再用一樣的code執行就可以了

想請問是否因為這個頁面(w3h)上有兩個區塊
所以JS執行的時候找不到

那該怎麼寫才有辦法一次到位能夠抓到那個元素呢？

天黑 iT邦研究生 5 級 ‧ 2022-12-27 16:41:57 檢舉

也許你需要的是window.onload這個事件內處理，可以確保網頁已經產生完畢

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-27 17:15:30 檢舉

應該跟onload無關吧...
手動去F12那邊輸入代碼的
我網頁都跑出來很久了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

johncoc

iT邦新手 3 級 ‧ 2022-12-27 17:35:02

最佳解答

queryselector 只會抓到最上層第一個遇到的body,所以你寫的會抓到原本的body不會抓到內嵌的body

要改成

document.querySelector("body[contenteditable='false'] > div > form > div:nth-child(2) > input[type=text]:nth-child(2)").value = "12355"

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-27 18:03:16 檢舉

WOW 太厲害了謝謝你
不過我通常都是直接右鍵複製JSpath 該怎麼知道怎麼篩選

"body[contenteditable='false'] > div > form

這邊這一段怎麼判斷的呀

re.Zero iT邦研究生 5 級 ‧ 2022-12-27 20:35:15 檢舉

@花之舞:
如果你會用 CSS Selector 應該就會用 querySelector() 了啊？
(不過我倒是習慣順便用 querySelectorAll() 檢查。)

johncoc iT邦新手 3 級 ‧ 2022-12-28 09:34:16 檢舉

花之舞
第一個通常找唯一的,保證抓到最接近你找的位置的父層元素再依序往下找,或是你找的位置有唯一值也可以直接抓

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-28 15:21:41 檢舉

@johncoc 謝謝教學很棒的解說學到了新知

登入發表回應

揮揮手

iT邦研究生 5 級 ‧ 2022-12-27 16:54:47

js 可能當時可以未引用
1.嘗試window.onload

2.調整呼叫.js 或撰寫script位置

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-27 17:16:48 檢舉

我是要在開發者工具裡面使用沒辦法調整位置吧....

揮揮手 iT邦研究生 5 級 ‧ 2022-12-27 17:24:24 檢舉

我以為你在講旁邊紅紅的一片

那問題應該只是你querySelector
沒寫好
不然籠統一點 .父層class 空白 .該domclass 就好

揮揮手 iT邦研究生 5 級 ‧ 2022-12-27 17:30:35 檢舉

感覺你在自學建議自己架一個IDE 用VSCode 很簡單.

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-12-27 18:04:08 檢舉

的確是在自學
VScode已經有在跑別的東西了所以開分頁練習別的XDD
謝謝你的說明

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22123 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙