การเขียนโปรแกรม dom

5

องค์ประกอบ DOM ต้นไม้ที่มีรหัสกลายเป็นตัวแปรทั่วโลกหรือไม่

ทำงานกับแนวคิดของ wrapper HTMLElement อย่างง่ายฉันสะดุดกับสิ่งต่อไปนี้สำหรับ Internet Explorer และChrome : สำหรับ HTMLElement ที่มี ID ในทรี DOM เป็นไปได้ที่จะดึง div โดยใช้ ID เป็นชื่อตัวแปร ดังนั้นสำหรับ div เช่น <div id="example">some text</div> ในInternet Explorer 8และ Chrome คุณสามารถทำได้: alert(example.innerHTML); //=> 'some text' หรือ alert(window['example'].innerHTML); //=> 'some text' ดังนั้นนี่หมายความว่าทุกองค์ประกอบในทรี DOMถูกแปลงเป็นตัวแปรในเนมสเปซส่วนกลางหรือไม่ และยังหมายความว่าเราสามารถใช้สิ่งนี้แทนgetElementByIdวิธีการในเบราว์เซอร์เหล่านี้ได้หรือไม่?

364 javascript dom global-variables getelementbyid identifier

15

การเปลี่ยนเว็บไซต์ favicon แบบไดนามิก

ฉันมีเว็บแอปพลิเคชันที่มีตราสินค้าตามผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบันฉันต้องการเปลี่ยน favicon ของหน้าเป็นโลโก้ของป้ายกำกับส่วนตัว แต่ฉันไม่สามารถหารหัสหรือตัวอย่างใด ๆ เพื่อทำสิ่งนี้. มีใครเคยทำสิ่งนี้มาก่อนหรือไม่ ฉันนึกภาพว่ามีไอคอนโหลในโฟลเดอร์และการอ้างอิงถึงไฟล์ favicon.ico ที่จะใช้ถูกสร้างขึ้นแบบไดนามิกพร้อมกับหน้า HTML คิด?

347 javascript html dom favicon

6

หากลบองค์ประกอบ DOM แล้วผู้ฟังจะถูกลบออกจากหน่วยความจำด้วยหรือไม่

336 javascript jquery dom memory memory-leaks

13

การละเมิดงานจาวาสคริปต์ที่รันนานใช้เวลา xx ms

เมื่อเร็ว ๆ นี้ฉันได้รับคำเตือนแบบนี้และนี่เป็นครั้งแรกที่ฉันได้รับมัน: [Violation] Long running JavaScript task took 234ms [Violation] Forced reflow while executing JavaScript took 45ms ฉันทำงานในโครงการกลุ่มและฉันไม่รู้ว่าสิ่งนี้มาจากไหน เรื่องนี้ไม่เคยเกิดขึ้นมาก่อน ทันใดนั้นมันก็ปรากฏขึ้นเมื่อมีคนอื่นมีส่วนร่วมในโครงการ ฉันจะค้นหาไฟล์ / ฟังก์ชั่นที่ทำให้เกิดคำเตือนนี้ได้อย่างไร ฉันกำลังมองหาคำตอบ แต่ส่วนใหญ่เกี่ยวกับการแก้ปัญหาเกี่ยวกับวิธีการแก้ปัญหา ฉันไม่สามารถแก้ปัญหาได้หากฉันไม่สามารถหาสาเหตุของปัญหาได้ ในกรณีนี้คำเตือนจะปรากฏเฉพาะใน Chrome ฉันพยายามใช้ Edge แต่ฉันยังไม่ได้รับคำเตือนที่คล้ายกันและฉันยังไม่ได้ทดสอบบน Firefox ฉันยังได้รับข้อผิดพลาดจากjquery.min.js: [Violation] Handler took 231ms of runtime (50ms allowed) jquery.min.js:2

330 javascript google-chrome dom

12

onKeyPress onKeyUp และ onKeyDown

ความแตกต่างระหว่างสามเหตุการณ์นี้คืออะไร? เมื่อ googling ฉันพบว่า: onKeyDownเหตุการณ์จะถูกเรียกเมื่อผู้ใช้กดปุ่ม onKeyUpเหตุการณ์จะถูกเรียกเมื่อผู้ใช้ออกที่สำคัญ onKeyPressเหตุการณ์จะถูกเรียกเมื่อผู้ใช้กดและเผยแพร่คีย์ ( onKeyDownตามonKeyUp) ฉันเข้าใจสองคนแรก แต่ไม่onKeyPressเหมือนกันonKeyUpหรือ เป็นไปได้ไหมที่จะปล่อยกุญแจ ( onKeyUp) โดยไม่ต้องกดมัน ( onKeyDown)? นี่เป็นเรื่องที่ค่อนข้างสับสนใครบางคนช่วยเคลียร์สิ่งนี้ให้ฉันได้ไหม

329 javascript dom dom-events

8

jQuery นับองค์ประกอบย่อย

<div id="selected"> <ul> <li>29</li> <li>16</li> <li>5</li> <li>8</li> <li>10</li> <li>7</li> </ul> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันต้องการนับจำนวน<li>องค์ประกอบ<div id="selected"></div>ทั้งหมด วิธีการที่เป็นไปได้โดยใช้ของ jQuery .children([selector])?

324 javascript jquery dom

13

จะหยุดการเผยแพร่กิจกรรมด้วยแอตทริบิวต์ inline onclick ได้อย่างไร

พิจารณาสิ่งต่อไปนี้: <div onclick="alert('you clicked the header')" class="header"> <span onclick="alert('you clicked inside the header');">something inside the header</span> </div> ฉันจะทำให้มันเป็นแบบนั้นได้อย่างไรเมื่อผู้ใช้คลิกที่สแปนมันจะไม่เริ่มการdivคลิกของเหตุการณ์

313 javascript html events dom

14

ฟังก์ชัน“ hasClass” กับ JavaScript ธรรมดาคืออะไร

คุณจะทำ jQuery hasClassกับ JavaScript ธรรมดา 'ได้อย่างไร ตัวอย่างเช่น, <body class="foo thatClass bar"> JavaScript มีวิธีการถามว่า<body>มีthatClassอะไร?

313 javascript dom

6

ส่งเหตุการณ์ของเมาส์ผ่านองค์ประกอบตำแหน่งอย่างแน่นอน

ฉันกำลังพยายามที่จะจับภาพเหตุการณ์ของเมาส์บนองค์ประกอบที่มีองค์ประกอบที่จัดวางอย่างอื่นอยู่ด้านบนของมัน ตอนนี้เหตุการณ์ในองค์ประกอบที่มีการจัดวางอย่างถูกต้องจะพุ่งเข้าหาผู้ปกครอง แต่ฉันต้องการให้มัน "โปร่งใส" สำหรับกิจกรรมเมาส์เหล่านี้และส่งต่อไปยังสิ่งที่อยู่ด้านหลัง ฉันควรใช้สิ่งนี้อย่างไร

307 javascript html events dom javascript-events

4

ความแตกต่างระหว่างเด็กและโหนดเด็กใน JavaScript คืออะไร?

ฉันพบว่าตัวเองใช้ JavaScript และฉันวิ่งข้ามchildNodesและchildrenคุณสมบัติ ฉันสงสัยว่าความแตกต่างระหว่างพวกเขาคืออะไร อีกคนหนึ่งชอบกันหรือไม่?

305 javascript dom

30

วิธีการส่งผ่านข้อโต้แย้งไปยังฟังก์ชั่นฟัง addEventListener?

สถานการณ์ค่อนข้างเหมือน - var someVar = some_other_function(); someObj.addEventListener("click", function(){ some_function(someVar); }, false); ปัญหาคือว่าค่าของsomeVarไม่สามารถมองเห็นได้ภายในฟังฟังก์ชั่นการฟังaddEventListenerซึ่งมันอาจจะถือว่าเป็นตัวแปรใหม่

304 javascript dom addeventlistener

5

ความแตกต่างระหว่างวัตถุโหนดและวัตถุองค์ประกอบ?

ฉันสับสนอย่างสิ้นเชิงระหว่างวัตถุโหนดและวัตถุองค์ประกอบ document.getElementById()ส่งคืนวัตถุองค์ประกอบในขณะที่document.getElementsByClassName() ส่งคืนวัตถุ NodeList (ชุดขององค์ประกอบหรือโหนด?) ถ้า div เป็นวัตถุองค์ประกอบแล้วสิ่งที่เกี่ยวกับวัตถุโหนด Node? วัตถุโหนดคืออะไร วัตถุเอกสารวัตถุองค์ประกอบและวัตถุข้อความเป็นวัตถุโหนดหรือไม่ ตามหนังสือของ David Flanagan 'วัตถุเอกสารวัตถุองค์ประกอบและวัตถุข้อความเป็นวัตถุโหนดทั้งหมด' เหตุใดวัตถุจึงสามารถสืบทอดคุณสมบัติ / วิธีการของวัตถุองค์ประกอบเช่นเดียวกับวัตถุโหนดได้ ถ้าใช่ฉันเดาว่าคลาสโหนดและคลาสอิลิเมนต์เกี่ยวข้องกับต้นไม้ต้นแบบแห่งการสืบทอด <div id="test"> <p class="para"> 123 </p> <p class="para"> abc </p> </div> <p id="id_para"> next </p> document.documentElement.toString(); // [object HTMLHtmlElement] var div = document.getElementById("test"); div.toString(); // [object HTMLDivElement] var p1 = document.getElementById("id_para"); …

301 javascript html dom

9

ไม่สามารถเข้าใจพารามิเตอร์ useCapture ใน addEventListener

ฉันได้อ่านบทความที่https://developer.mozilla.org/en/DOM/element.addEventListenerแต่ไม่เข้าใจuseCaptureคุณลักษณะ คำจำกัดความคือ: หากเป็นจริง useCapture จะระบุว่าผู้ใช้ต้องการเริ่มต้นการจับภาพ หลังจากเริ่มต้นการจับภาพเหตุการณ์ทั้งหมดของประเภทที่ระบุจะถูกส่งไปยังผู้ฟังที่ลงทะเบียนก่อนที่จะถูกส่งไปยัง EventTargets ใด ๆ ที่อยู่ด้านล่างในต้นไม้ DOM เหตุการณ์ที่เดือดพล่ามผ่านต้นไม้จะไม่ทำให้ผู้ฟังที่ได้รับมอบหมายให้ใช้การดักจับ ในเหตุการณ์รหัสแม่นี้ก่อให้เกิดก่อนที่เด็กดังนั้นฉันไม่สามารถเข้าใจพฤติกรรมของวัตถุวัตถุเอกสารมี usecapture จริงและลูก div มีชุด usecapture เท็จและเอกสาร usecapture เป็นไปดังนั้นคุณสมบัติของเอกสารที่ต้องการมากกว่าเด็ก function load() { document.addEventListener("click", function() { alert("parent event"); }, true); document.getElementById("div1").addEventListener("click", function() { alert("child event"); }, false); } <body onload="load()"> <div id="div1">click me</div> </body> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

290 javascript dom dom-events

14

ความแตกต่างระหว่าง jQuery: text () และ html () คืออะไร?

อะไรคือความแตกต่างระหว่าง text () และ html () ใน jQuery? $("#div").html('<a href="example.html">Link</a><b>hello</b>'); VS $("#div").text('<a href="example.html">Link</a><b>hello</b>');

276 jquery dom

14

ข้อผิดพลาด“ การส่งไม่ใช่ฟังก์ชัน” ใน JavaScript

ใครสามารถบอกฉันว่าเกิดอะไรขึ้นกับรหัสนี้ ฉันพยายามส่งฟอร์มด้วย JavaScript แต่มีข้อผิดพลาด ".submit ไม่ใช่ฟังก์ชัน" ปรากฏขึ้น ดูด้านล่างสำหรับรายละเอียดเพิ่มเติมของรหัส: <form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data"> <input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value=""> </form> <script type="text/javascript"> function submitAction() { document.frmProduct.submit(); } </script> ฉันก็ลองทำเช่นนี้: <script type="text/javascript"> function submitAction() { document.forms["frmProduct"].submit(); } </script> ทั้งสองแสดงข้อผิดพลาดเดียวกันให้ฉัน :(

264 javascript html dom submit

คำถามติดแท็ก dom