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

ฉันเป็นมือใหม่ Javascript ฉันกำลังเข้าสู่หน้าเว็บผ่านทางwindow.onloadฉันต้องหาองค์ประกอบจำนวนมากตามชื่อคลาส ( slide) และแจกจ่ายใหม่เป็นโหนดต่างๆตามตรรกะบางอย่าง ฉันมีฟังก์ชันDistribute(element)ที่รับองค์ประกอบเป็นอินพุตและทำการกระจาย ฉันต้องการทำสิ่งนี้ (ตามที่อธิบายไว้ที่นี่หรือที่นี่ ): var slides = getElementsByClassName("slide"); for(var i = 0; i < slides.length; i++) { Distribute(slides[i]); } อย่างไรก็ตามสิ่งนี้ไม่ได้ทำเวทมนตร์ให้ฉันเพราะgetElementsByClassNameไม่ได้ส่งคืนอาร์เรย์ แต่ a NodeListซึ่งก็คือ ... ... นี่คือการคาดเดาของฉัน ... ... กำลังเปลี่ยนแปลงภายในฟังก์ชันDistribute(ทรี DOM กำลังถูกเปลี่ยนแปลงภายในฟังก์ชันนี้และการโคลนโหนดบางโหนดจะเกิดขึ้น) For-eachโครงสร้างลูปก็ไม่ช่วยเช่นกัน การกระทำของสไลด์ตัวแปรนั้นไม่สามารถกำหนดได้จริง ๆ ทุกครั้งที่การทำซ้ำจะเปลี่ยนความยาวและลำดับขององค์ประกอบอย่างรุนแรง วิธีที่ถูกต้องในการวนซ้ำผ่าน NodeList ในกรณีของฉันคืออะไร? ฉันกำลังคิดเกี่ยวกับการเติมอาร์เรย์ชั่วคราว แต่ไม่แน่ใจว่าจะทำอย่างไร ... แก้ไข: ความจริงที่สำคัญฉันลืมที่จะพูดถึงก็คือว่ามีอาจจะเป็นหนึ่งสไลด์ภายในอื่นนี้เป็นจริงสิ่งที่เปลี่ยนแปลงslidesตัวแปรที่ผมได้พบเพียงแค่ออกขอบคุณให้กับผู้ใช้Alohci วิธีแก้ปัญหาสำหรับฉันคือการโคลนแต่ละองค์ประกอบลงในอาร์เรย์ก่อนและส่งอาร์เรย์ทีละรายการไปในDistribute()ภายหลัง

108 javascript  html  dom 

ฉันได้รับคำสั่งให้ใช้ document.ready เมื่อฉันเริ่มใช้ Javascript / jQuery เป็นครั้งแรก แต่ฉันไม่เคยเรียนรู้ว่าทำไม อาจมีคนให้คำแนะนำพื้นฐานเกี่ยวกับเวลาที่เหมาะสมในการห่อรหัส javascript / jquery ไว้ใน jQuery's document.ready ? บางหัวข้อที่ฉันสนใจ: .on()วิธีการของ jQuery : ฉันใช้.on()วิธีสำหรับ AJAX ค่อนข้างน้อย (โดยทั่วไปจะใช้องค์ประกอบ DOM ที่สร้างแบบไดนามิก) ตัว.on()จัดการคลิกควรอยู่ด้านในเสมอ document.readyหรือไม่? ประสิทธิภาพ: มีประสิทธิภาพมากกว่าในการเก็บวัตถุ javascript / jQuery ต่างๆไว้ภายในหรือภายนอกเอกสารแล้ว (เช่นกันความแตกต่างของประสิทธิภาพมีนัยสำคัญหรือไม่?) ขอบเขตออบเจ็กต์: เพจที่โหลด AJAX ไม่สามารถเข้าถึงอ็อบเจ็กต์ที่อยู่ในเอกสารของเพจก่อนหน้าได้ถูกต้องหรือไม่ พวกเขาสามารถเข้าถึงได้เฉพาะวัตถุที่อยู่นอก document.ready (เช่นวัตถุ "global" อย่างแท้จริง)? อัปเดต:เพื่อปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดจาวาสคริปต์ทั้งหมดของฉัน (ไลบรารี jQuery และรหัสแอปของฉัน) จะอยู่ที่ด้านล่างของหน้า HTML …

107 javascript  jquery  dom  event-handling  document-ready 

ฉันจะรับองค์ประกอบถัดไปใน HTML โดยใช้ JavaScript ได้อย่างไร สมมติว่าฉันมีสาม<div>วินาทีและฉันได้รับการอ้างอิงถึงหนึ่งในโค้ด JavaScript ฉันต้องการรับอันต่อไป<div>และอันไหนก่อนหน้านี้

107 javascript  html  dom 

ฉันกำลังทำงานกับ ECMAScript / JavaScript สำหรับไฟล์ SVG และจำเป็นต้องได้รับwidthและheightของtextองค์ประกอบเพื่อที่ฉันจะสามารถปรับขนาดสี่เหลี่ยมผืนผ้าที่ล้อมรอบได้ ใน HTML ฉันจะสามารถใช้แอตทริบิวต์offsetWidthand offsetHeightกับองค์ประกอบได้ แต่ดูเหมือนว่าคุณสมบัติเหล่านั้นไม่สามารถใช้งานได้ นี่คือส่วนที่ฉันต้องทำงานด้วย ฉันต้องการเปลี่ยนความกว้างของสี่เหลี่ยมทุกครั้งที่ฉันเปลี่ยนข้อความ แต่ฉันไม่รู้วิธีรับจริงwidth(เป็นพิกเซล) ของtextองค์ประกอบ <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> ความคิดใด ๆ ?

107 javascript  dom  text  svg 

ฉันกำลังเขียนแอปพลิเคชันด้วย ASP.NET MVC ตรงกันข้ามกับ ASP.NET แบบเดิมคุณมีความรับผิดชอบมากกว่าในการสร้าง ID ทั้งหมดในเพจที่สร้างขึ้น ASP.NET จะให้รหัสที่น่ารังเกียจ แต่ไม่ซ้ำใคร ฉันต้องการเพิ่มสคริปต์ jQuery สั้น ๆ เพื่อตรวจสอบเอกสารของฉันเพื่อหารหัสที่ซ้ำกัน ซึ่งอาจเป็นรหัสสำหรับ DIVS รูปภาพช่องทำเครื่องหมายปุ่ม ฯลฯ <div id="pnlMain"> My main panel </div> <div id="pnlMain"> Oops we accidentally used the same ID </div> ฉันกำลังมองหายูทิลิตี้เซ็ตและลืมประเภทที่จะเตือนฉันเมื่อฉันทำอะไรที่ประมาท ใช่ฉันจะใช้สิ่งนี้ในระหว่างการทดสอบเท่านั้นและยินดีต้อนรับทางเลือกอื่น (เช่นปลั๊กอิน firebug) ด้วย

106 jquery  dom 

.getElementById ()คำถามง่ายๆฉันมีองค์ประกอบที่ฉันโลภผ่าน จะตรวจสอบได้อย่างไรว่ามีลูกหรือไม่?

104 javascript  dom 

ง่ายต่อการตั้งค่า CSS แบบอินไลน์ด้วยจาวาสคริปต์ หากฉันต้องการเปลี่ยนความกว้างและมี html ดังนี้: <div style="width: 10px"></div> สิ่งที่ฉันต้องทำคือ: document.getElementById('id').style.width = value; มันจะเปลี่ยนค่าสไตล์ชีตแบบอินไลน์ โดยปกตินี่ไม่ใช่ปัญหาเนื่องจากสไตล์อินไลน์จะแทนที่สไตล์ชีต ตัวอย่าง: <style> #tId { width: 50%; } </style> <div id="tId"></div> การใช้ Javascript นี้: document.getElementById('tId').style.width = "30%"; ฉันได้รับสิ่งต่อไปนี้: <style> #tId { width: 50%; } </style> <div id="tId" style="width: 30%";></div> นี่เป็นปัญหาเพราะไม่เพียง แต่ฉันไม่ต้องการเปลี่ยนค่าอินไลน์เท่านั้นหากฉันมองหาความกว้างก่อนที่จะตั้งค่าเมื่อฉันมี: <div id="tId"></div> ค่าที่ส่งคืนเป็น Null ดังนั้นหากฉันมี …

104 javascript  html  css  ajax  dom 

วิธีที่ง่ายที่สุดในการรับการแสดงสตริงของเอกสาร XML ( org.w3c.dom.Document) คืออะไร นั่นคือโหนดทั้งหมดจะอยู่ในบรรทัดเดียว ดังตัวอย่างจาก <root> <a>trge</a> <b>156</b> </root> (นี่เป็นเพียงการแสดงต้นไม้ในรหัสของฉันมันเป็นorg.w3c.dom.Documentวัตถุดังนั้นฉันจึงไม่สามารถถือว่าเป็น String ได้) ถึง "<root> <a>trge</a> <b>156</b> </root>" ขอบคุณ!

104 java  xml  string  dom  xmldocument 

ฉันรู้ว่า Chrome ดูเหมือนจะไม่ยอมให้ฉันซ่อนตัว<option>ในไฟล์<select>. Firefox จะ ฉันต้องการซ่อน<option>s ที่ตรงกับเกณฑ์การค้นหา ในเครื่องมือเว็บ Chrome ฉันจะเห็นว่าพวกเขาจะได้อย่างถูกต้องถูกตั้งค่าให้display: none;โดย JavaScript ของฉัน แต่ครั้งเดียวแล้ว<select>เมนูที่มีการคลิกที่พวกเขาจะแสดงให้เห็นว่า ฉันจะทำให้สิ่งเหล่านี้<option>ตรงกับเกณฑ์การค้นหาของฉันไม่แสดงเมื่อคลิกเมนูได้อย่างไร ขอบคุณ!

104 javascript  jquery  css  dom 

มันทำให้ฉันไม่สามารถทำได้document.querySelectorAll(...).map(...)แม้กระทั่งใน Firefox 3.6 และฉันก็ยังไม่สามารถหาคำตอบได้ดังนั้นฉันจึงคิดว่าฉันจะโพสต์ข้ามคำถามจากบล็อกนี้: http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/ มีใครรู้เหตุผลทางเทคนิคว่าทำไมคุณไม่ได้รับ Array? หรือทำไม StaticNodeList ไม่ได้รับมรดกจากอาร์เรย์ในลักษณะดังกล่าวที่คุณสามารถใช้map, concatetc? (BTW ถ้าเป็นเพียงฟังก์ชั่นเดียวที่คุณต้องการคุณสามารถทำบางอย่างเช่นNodeList.prototype.map = Array.prototype.map;... แต่อีกครั้งทำไมฟังก์ชันนี้ (โดยเจตนา?) ถูกบล็อกตั้งแต่แรก?)

103 javascript  dom  css-selectors 

วิธีที่ง่ายที่สุดในการพิมพ์สวย (หรือที่จัดรูปแบบ) a org.w3c.dom.Documentto stdout คืออะไร?

103 java  xml  dom  w3c 

ฉันหวังว่าฉันจะไม่ทำตัวโง่ ๆ แต่ฉันพยายามทำความเข้าใจว่าเกิดอะไรขึ้นในโค้ดสองบรรทัดนี้: document.body.innerHTML = 'something'; alert('something else'); สิ่งที่ฉันสังเกตคือการแจ้งเตือนจะแสดงก่อนที่จะอัปเดต HTML (หรืออาจจะมี แต่หน้ายังไม่ได้รับการรีเฟรช / ทาสีใหม่ / อะไรก็ตาม) ชำระเงินนี้codepenเพื่อดูสิ่งที่ผมหมายถึง โปรดทราบว่าแม้แต่การใส่alertเข้าไปsetTimeout(..., 0)ก็ไม่ช่วยอะไร ดูเหมือนว่าจะต้องใช้เหตุการณ์วนซ้ำมากกว่าในinnerHTMLการอัปเดตเพจ แก้ไข: ฉันลืมบอกว่าฉันใช้ Chrome และไม่ได้ตรวจสอบเบราว์เซอร์อื่น ดูเหมือนว่าจะปรากฏเฉพาะใน Chrome เท่านั้น อย่างไรก็ตามฉันยังคงสนใจว่าเหตุใดจึงเกิดขึ้น

103 javascript  html  google-chrome  dom 

ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome ฉันเห็น#shadow-rootขวาใต้<html lang="en">แท็ก ใช้ทำอะไรและใช้ทำอะไร? ฉันไม่เห็นมันใน Firefox หรือใน IE เฉพาะใน Chrome นี่เป็นคุณสมบัติพิเศษหรือไม่ ถ้าฉันเปิดมันจะแสดง<head>และ<body>และลิงค์ข้างชื่อrevealโดยการคลิกจะชี้ไปที่<head>และ<body>ไม่มีอะไรอื่น

103 html  google-chrome  dom  google-chrome-devtools 

ฉันมีฟังก์ชั่น Javascript ที่ยอมรับรายการโหนด HTML แต่คาดว่าจะมีอาร์เรย์ Javascript (มันเรียกใช้เมธอด Array บางอย่างในนั้น) และฉันต้องการฟีดผลลัพธ์ของDocument.getElementsByTagNameสิ่งนั้นที่ส่งคืนรายการโหนด DOM ตอนแรกฉันคิดว่าจะใช้อะไรง่ายๆเช่น: Array.prototype.slice.call(list,0) และทำงานได้ดีในทุกเบราว์เซอร์ยกเว้น Internet Explorer ซึ่งส่งคืนข้อผิดพลาด "วัตถุ JScript ที่คาดไว้" เนื่องจากรายการโหนด DOM ที่ส่งคืนโดยDocument.getElement*วิธีการไม่ใช่วัตถุ JScript เพียงพอที่จะเป็นเป้าหมายของการเรียกฟังก์ชัน คำเตือน: ฉันไม่สนใจที่จะเขียนโค้ดเฉพาะของ Internet Explorer แต่ฉันไม่ได้รับอนุญาตให้ใช้ไลบรารี Javascript เช่น JQuery เนื่องจากฉันกำลังเขียนวิดเจ็ตที่จะฝังลงในเว็บไซต์ของบุคคลที่สามและฉันไม่สามารถโหลดไลบรารีภายนอกที่ จะสร้างความขัดแย้งให้กับลูกค้า ความพยายามสุดท้ายของฉันคือการทำซ้ำรายการโหนด DOM และสร้างอาร์เรย์ด้วยตัวเอง แต่มีวิธีที่ดีกว่าในการทำเช่นนั้นหรือไม่?

103 javascript  html  dom 

ฉันมี html แบบนี้: <div id="1"> <p> Volume = <input type="text" /> <button rel="3.93e-6" class="1" type="button">Check answer</button> </p> <div></div> </div> และ JS บางตัวเช่นนี้: $("button").click(function () { var buttonNo = $(this).attr('class'); var correct = Number($(this).attr('rel')); validate (Number($("#"+buttonNo+" input").val()),correct); $("#"+buttonNo+" div").html(feedback); }); สิ่งที่ฉันต้องการจริงๆคือถ้าฉันไม่ต้องมี class = "1" บนปุ่ม (ฉันรู้ว่าคลาสตัวเลขไม่ถูกต้อง แต่นี่คือ WIP!) ดังนั้นฉันจึงสามารถกำหนดปุ่มได้ไม่ขึ้นอยู่กับ id ของ …

99 jquery  dom  semantics