var name = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild;
name.innerHTML = "XYZ";<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<input type="checkbox">
<button style=":active color:red;">Click Me</button>
<ul>
<li class="list">
<a href="https://www.google.com">Google</a>
</li>
<li class="list">Second</li>
<li class="list">Third</li>
</ul>
</body>
</html>所以，這是一個網站的代碼，我想更改檔案最后一個元素的文本 - “第三”更改為“XYZ”。
當我使用以下代碼時，文本不會改變。
var name=document.firstElementChild.lastElementChild.lastElementChild.lastElementChild;
name.innerHTML="XYZ";
但是，當我使用這個時：
document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML="XYZ";
網站上的文字，立即改變。為什么會這樣？我所做的只是將代碼分成兩行而不是寫成一行。
uj5u.com熱心網友回復：
在全域范圍內，變數name是預定義的，只能分配字串。
你可以：
- 使用
let而不是var隱藏（而不是映射到）全域變數。 - 使用 JS 模塊而不是常規腳本來獲取模塊范圍而不是全域范圍
- 使用 IIFE 獲取函式范圍而不是全域范圍
- 使用不同的變數名
uj5u.com熱心網友回復：
使用letorconst代替var
這會更容易：
let name = document.querySelector("li.list:last-child");
name.textContent = 'XYZ'
如果您只想更改文本內容，請使用 textContent 而不是 innerHTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/495671.html
標籤：javascript html dom