                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript入門篇

getElementById（）到底獲取的是什么。

為什么這么實現不了。我的想法是：getElementById（）獲取對象，然后引用對象實現屬性的更改。

qq_那海_0

2016-02-23

源自：JavaScript入門篇 3-5

關注問題我要回答

1756

操作

收起

5 回答

小梧桐_葉子
2016-03-13

最后，關于怎么修改可以不重復敲呢？
那就取出來吧，再創一個<script>便簽，放<body> 下 </p>標簽之后即可，如下：

<p>...</p>
????<script>
???????var?mychar?=?document.getElementById("con");
????</script>
????<form>...</form>

實測，可行！

0 回復有任何疑惑可以回復我~

收起回答

小梧桐_葉子
2016-03-13

首先復習下前兩節講的內容，通過document.getElementById("id")可以獲取元素內容，但具有的該id元素位于下面時，根據瀏覽器從上而下（同一優先級）解析順序可以知道，瀏覽器正在讀取<head>中的<script>命令，而該命令卻是要調需用<body>中的id 便簽內容，此時瀏覽器并不知道<body>到底寫了什么鬼，正如另一位同學說的，瀏覽器頓時就二了。

所以元素不能正常獲取，輸出值為： null ?

eg：

<html>
<head>
<script>
??var?mychar?=?document.getElementById("con");
???document.write(mychar);??????????????????????????//輸出???null
</script>
</head>
<body>
?????<p?id="con">?你找不著我^-^?</p>
<body>
</html>

到這可能又有問題了，先看下這個例子：

<html>
<head>
<title>display</title>
????<script?type="text/javascript">?
????
????????function?hidetext()??
{??
var?mychar?=?document.getElementById("con");
????????mychar.style.display="none";
}??
????</script>?
</head>?
<body>??
????<h1>JavaScript</h1>??
????<p?id="con">做為一個Web開發師來說，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具。</p>?
????<form>
???????<input?type="button"?onclick="hidetext()"?value="隱藏內容"?/>?
????</form>
</body>?
</html>

從上面可以看出document.getElementById("con")依舊位于被獲取對象id 之前，可這為什么不顯示null卻能正常顯示呢，關鍵原因是有他在：?
function 函數?? .

從第一章最后一節有講過關于函數調用說明，函數不能自動執行的，?執行需調用，到這大概就清楚了，這例子能正常運行原因在于使用了function hidetext() 函數，使得瀏覽器運行到<script>內 funciton 函數時不會立即執行解析出結果，函數會等待被調用，瀏覽器會繼續按順序解析下去，直到<button>出現，觸發按鈕，此時所有內容以表達，而函數下的?document.getElementById("con") 就靜靜等待直到被運行 ~ perfect

update：剛把<form></form>放<p></p>之前了，功能正常，這是說明<body>內優先級平等嗎，求解？