dom

问题 I am trying to understand exactly what is updated with the regular DOM after a DOM manipulation. Suppose we have the DOM below and I use javascript to delete the li with the class blue. Does this mean that the browser looks at the parent of class blue (eg: id of list 1) and re-renders that DOM node including all the children (minus class blue) and then repaints the whole page based on any css rules? I would think that would be the process but I wasn't sure and can't find any concrete examples

问题 I am trying to convert an HTMLCollection of 4 divs into an array, but every method I try seems to result in the array being emptied. <div class="container"> <div class="shape" id="one"></div> <div class="shape" id="two"></div> <div class="shape" id="three"></div> <div class="shape" id="four"></div> </div> Methods I've attempted - as per this previous question: var shapesHC = document.getElementsByClassName('shape'); //gives HTMLCollection var shapesArrCall = [].slice.call(shapesHC); //

问题 I am trying to convert an HTMLCollection of 4 divs into an array, but every method I try seems to result in the array being emptied. <div class="container"> <div class="shape" id="one"></div> <div class="shape" id="two"></div> <div class="shape" id="three"></div> <div class="shape" id="four"></div> </div> Methods I've attempted - as per this previous question: var shapesHC = document.getElementsByClassName('shape'); //gives HTMLCollection var shapesArrCall = [].slice.call(shapesHC); //

问题 Consider the following HTML where IDs #p1 , #p2 and #p3 are siblings (see fiddle): <div id="container"> <span id="p1">Paragraph 1</span> <span id="p2">Paragraph 2</span> This is just loose text. <p id="p3">Paragraph 3</p> </div> These are my definitions of strict and loose siblings: I consider ID #p1 and #p2 strict siblings (because there is no text which is not encapsulated in any kind of html element between them. And ID #p2 and #p3 to be loose siblings. Given any element with a next

问题 Consider the following HTML where IDs #p1 , #p2 and #p3 are siblings (see fiddle): <div id="container"> <span id="p1">Paragraph 1</span> <span id="p2">Paragraph 2</span> This is just loose text. <p id="p3">Paragraph 3</p> </div> These are my definitions of strict and loose siblings: I consider ID #p1 and #p2 strict siblings (because there is no text which is not encapsulated in any kind of html element between them. And ID #p2 and #p3 to be loose siblings. Given any element with a next

问题 Consider the following HTML where IDs #p1 , #p2 and #p3 are siblings (see fiddle): <div id="container"> <span id="p1">Paragraph 1</span> <span id="p2">Paragraph 2</span> This is just loose text. <p id="p3">Paragraph 3</p> </div> These are my definitions of strict and loose siblings: I consider ID #p1 and #p2 strict siblings (because there is no text which is not encapsulated in any kind of html element between them. And ID #p2 and #p3 to be loose siblings. Given any element with a next

问题 I have a parent <div> with one child <div> in memory - not attached to the current document. I want to trigger a CustomEvent on the child but listen to that event from the parent. Here is my code: var parent = document.createElement('div'); var child = document.createElement('div'); parent.appendChild(child); parent.addEventListener('boom', function(event) { console.log('parent listener', event); // <~ This never runs! }); var event = new CustomEvent('boom', { bubbles: true }); child

问题 I have a parent <div> with one child <div> in memory - not attached to the current document. I want to trigger a CustomEvent on the child but listen to that event from the parent. Here is my code: var parent = document.createElement('div'); var child = document.createElement('div'); parent.appendChild(child); parent.addEventListener('boom', function(event) { console.log('parent listener', event); // <~ This never runs! }); var event = new CustomEvent('boom', { bubbles: true }); child

问题 var newDoc = document.implementation.createHTMLDocument('someTitle'); // swap newDoc with document DOMImplementation.createHTMLDocument Is it possible to swap the current document for a new document? Is there any reasonable reason to do this? 回答1: You cannot replace the current document object or any document object with the Document object created with createHTMLDocument method. The createHTMLDocument was first introduced in one of the drafts of the DOM Level 2 Core , but was later removed

问题 Assuming i have a <div class="test" style="width:200px"></div> ,Please consider the following: var m = $('.test')[0]; var $md = $(m); console.log($md.width()); //200 var o = $('.test'); console.log(o.width()); // 200 console.log(m); // <div class="test" style="width:200px"> console.log($md); // Object{ context: <div.test> ..... } console.log(o); // Object{ length:1 , ..... } Basically i can apply the width method on either var $md or var o , so what's the difference between the 1st and 2nd