คุณจะทดสอบองค์ประกอบของการดำรงอยู่ได้อย่างไรโดยไม่ต้องใช้ getElementByIdวิธีการได้อย่างไร?
ฉันได้ตั้งค่าการสาธิตสดสำหรับการอ้างอิง ฉันจะพิมพ์รหัสที่นี่เช่นกัน:
<!DOCTYPE html>
<html>
<head>
<script>
var getRandomID = function (size) {
var str = "",
i = 0,
chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
while (i < size) {
str += chars.substr(Math.floor(Math.random() * 62), 1);
i++;
}
return str;
},
isNull = function (element) {
var randomID = getRandomID(12),
savedID = (element.id)? element.id : null;
element.id = randomID;
var foundElm = document.getElementById(randomID);
element.removeAttribute('id');
if (savedID !== null) {
element.id = savedID;
}
return (foundElm) ? false : true;
};
window.onload = function () {
var image = document.getElementById("demo");
console.log('undefined', (typeof image === 'undefined') ? true : false); // false
console.log('null', (image === null) ? true : false); // false
console.log('find-by-id', isNull(image)); // false
image.parentNode.removeChild(image);
console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
console.log('null', (image === null) ? true : false); // false ~ should be true?
console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
};
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>โดยทั่วไปรหัสข้างต้นแสดงให้เห็นถึงองค์ประกอบที่ถูกเก็บไว้ในตัวแปรแล้วลบออกจาก DOM แม้ว่าองค์ประกอบจะถูกลบออกจาก DOM ตัวแปรยังคงรักษาองค์ประกอบเหมือนเดิมเมื่อประกาศครั้งแรก กล่าวอีกนัยหนึ่งมันไม่ใช่การอ้างอิงสดถึงองค์ประกอบ แต่เป็นการจำลอง ดังนั้นการตรวจสอบค่าของตัวแปร (องค์ประกอบ) สำหรับการมีอยู่จะให้ผลลัพธ์ที่ไม่คาดคิด
isNullฟังก์ชั่นเป็นความพยายามของฉันที่จะตรวจสอบสำหรับการดำรงอยู่ขององค์ประกอบจากตัวแปรและการทำงาน แต่ผมอยากจะทราบว่ามีวิธีที่ง่ายขึ้นเพื่อให้บรรลุผลเดียวกัน
PS: ฉันยังสนใจว่าทำไมตัวแปร JavaScript ที่ทำตัวเป็นแบบนี้ถ้าใครรู้บทความดีๆเกี่ยวกับเรื่องนี้
18
จริงๆแล้วมันเป็นการอ้างอิงสดไปยังองค์ประกอบเองมันไม่ได้อยู่ในเอกสารอีกแล้ว จำเป็นต้องใช้ฟังก์ชั่นนั้นเพราะคุณสามารถดึงองค์ประกอบออกจาก DOM แล้วนำกลับมาใช้ใหม่ในภายหลังโดยที่ตัวจัดการเหตุการณ์ / etc ทั้งหมดยังคงเชื่อมต่ออยู่ ทำไมตัวแปร JS ถึงทำแบบนั้น? เพราะมันจะน่ารำคาญอย่างไม่น่าเชื่อถ้าพวกเขาไม่ได้ JS ลบเฉพาะตัวแปรเมื่อคุณไม่มีการอ้างอิงใด ๆ อีกต่อไป ภาษาไม่มีหนทางที่จะรู้ว่าการอ้างอิงใดที่คุณคิดว่าสำคัญและสิ่งที่คุณคิดว่าไร้ค่า
—
Mark Kahn
@cwolves ที่น่าสนใจ ฉันเคยพบเจอมาหลายครั้งแล้วและไม่เคยคิดถึงมันมากนัก ในความเป็นจริงในโครงการปัจจุบันของฉันฉันบันทึกองค์ประกอบในอาร์เรย์ก่อนที่ฉันจะทำการเปลี่ยนแปลงใด ๆ กับพวกเขาในกรณีที่ฉันต้องการที่จะกลับการเปลี่ยนแปลง
—
จัสตินกระทิง
การรวบรวมขยะจะดำเนินการเป็นครั้งคราวและจะลบทุกอย่างที่คิดว่าทำได้ ดูเหมือนว่าเบราว์เซอร์ส่วนใหญ่จะค่อนข้างสวย แต่กำลังดีขึ้นเนื่องจากนักพัฒนาทราบว่าเบราว์เซอร์บางตัวทำงานเป็นเวลาหลายวันหรือหลายสัปดาห์ระหว่างการรีสตาร์ทดังนั้นการรวบรวมขยะที่ดีจึงมีความสำคัญต่อประสิทธิภาพของเบราว์เซอร์ นักพัฒนาเว็บสามารถช่วยด้วยการลบคุณสมบัติ (และอ้างอิงถึงสิ่งต่าง ๆ ในหน่วยความจำ) ที่ไม่ต้องการอีกต่อไป
—
RobG
@JustinBull ระมัดระวังการเก็บสำเนาขององค์ประกอบเพื่อย้อนกลับ เมื่อจัดเก็บองค์ประกอบ DOM ในอาร์เรย์การอ้างอิงไปยังองค์ประกอบ DOM จะถูกเก็บไว้ไม่ใช่การคัดลอกดังนั้นการเปลี่ยนแปลงที่เกิดขึ้นกับองค์ประกอบ DOM จะสะท้อนให้เห็นเมื่ออ้างอิงถึงองค์ประกอบของอาร์เรย์ นี่เป็นกรณีที่มีวัตถุทั้งหมดในจาวาสคริปต์ (ตัวแปรประเภท 'วัตถุ')
—
Anthony DiSanti