기본 콘텐츠로 건너뛰기

글

7월, 2019의 게시물 표시

DOM : show a note near the element

    function getCoords(elem) {    let box = elem.getBoundingClientRect();    return {      top: box.top + pageYOffset,      left: box.left + pageXOffset    };  } //either the node positions are fixed or absolute, getCoords is necessary //a function to get elem-relative position  function positionAt(anchor, position, elem) {    let anchorCoords = getCoords(anchor);    switch (position) {      case "top":        elem.style.left = anchorCoords.left + "px";        elem.style.top = anchorCoords.top - elem.offsetHeight + "px";         //minus elem.offsetHeight         //so that the note would not overlap the content         //same issue for the rest of minusing offset positions below        break;      case "right":        elem.style.left = anchorCoords.left + anchor.offsetWidth + "px";        elem.style.top = anchorCoords.top + "px";        break;      case "bottom":        elem.style.left =
댓글 쓰기
자세한 내용 보기

DOM : make an element and add style by JS

<HTML>  <body>  </body>  <script> showNotification({   // shows an element with the text "Hello" near the right-top of the window   top: 10, // 10px from the top of the window (by default 0px)   right: 10, // 10px from the right edge of the window (by default 0px)   html: "Hello!", // the HTML of notification   className: "welcome" // an additional class for the div (optional) }); function showNotification({top = 0, right = 0, className, html}) {   let notification = document.createElement('div');   notification.className = "notification";   if (className)//if notification class exist,    {     notification.classList.add(className);   }   notification.style.top = top + 'px';   notification.style.right = right + 'px';   notification.innerHTML = html;   document.body.append(notification);   setTimeout(() => notification.remove(), 1500);   let i = 1; setInterval(() =&g
댓글 쓰기
자세한 내용 보기

DOM : show descendants in tree, innterHTML way

<HTML>  <body>   <div id="container"></div>  </body>  <script>  let data = {   "Fish": {     "trout": {},     "salmon": {}   },   "Tree": {     "Huge": {       "sequoia": {},       "oak": {}     },     "Flowering": {       "apple tree": {},       "magnolia": {}     }   } }; function createTree(container, obj){   container.innerHTML = createTreeText(obj);   //run createTreeText putting data in it   //and fill it into div, the container } function createTreeText(obj){   let li = ''; // create a li, the smallest data it should contain   let ul;   for (let key in obj){     li += '<li>' + key + createTreeText(obj[key]) + '</li>';   }   //if the key is not the smallest fragment of that obj,   //it gets recursive and find the smallest and expand the number of li   //the code i
댓글 쓰기
자세한 내용 보기

DOM : Create a list by user input

<HTML>  <body> <h1>Create a list</h1>  </body>  <script>   let ul = document.createElement('ul');   document.body.append(ul);   while(true){     let data = prompt("Enter the text for the list item", "");     if(!data) break;     let li = document.createElement('li');     li.textContent = data;     ul.append(li);   }  </script> </HTML> /* in the script it creates the ul and make a li items by each user input and append it to ul every while run i tried to use fragment to make it but it was simpler without it yes the code is from the solution not from me so what ¯\_(ツ)_/¯ */
댓글 쓰기
자세한 내용 보기

DOM : Clean the element

<html> <body> <ol id = "elem> <li>hello</li> <li>world</li> </ol>   <script> function clear(elem) { for(let i = o; i < elem.childNodes.length; i++){ elem.childNodes[i].remove(); } }   </script> </body> </html> /* //other way function clear(elem){ while (elem.firstChild){ elem.firstChild.remove(); } } THE COOLEST WAY function clear(elem){ elem.innerHTML = ''; } this is a task about how to remove element. the last one is definitely so cool. no one said the element ol should be in the place we could just blow all up lol */
댓글 쓰기
자세한 내용 보기

DOM : Selecting links under conditions and change its color

<html> <body>   <a name="list">the list</a>   <ul>     <li><a href="http://google.com">http://google.com</a></li>     <li><a href="/tutorial">/tutorial.html</a></li>     <li><a href="local/path">local/path</a></li>     <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>     <li><a href="http://nodejs.org">http://nodejs.org</a></li>     <li><a href="http://internal.com/test">http://internal.com/test</a></li>   </ul>   <script> let link = document.querySelector('a'); link.style.color = 'orange'; let links = document.query.querySelectorAll('a'); for (let link of links){   let href = link.getAttribute('href');   //href attribute is full URL   if(!href) continue;   if(!href
댓글 쓰기
자세한 내용 보기

DOM : Attribute in HTML and Property in DOM

<html> <body>   <div data-widget-name = "menu">Choose the genre</div>   <script>     let elem = document.querySelector(['data-widget-name']); //PROPERTY : data-widget-name //ATTRIBUTE : elem.dataset.widgetName     //reading the value     alert(elem.dataset.widgetName); //or     alert(elem.getAttribute('data-widget-name'));   </script> </body> </html> /* this is how to select the element in html by its attribute name and getting the value. querySelector(['data-widget-name']); querySelector with [] bracket gets the element by the property name and it can be edited / get the value by attribute method dataset.blah()  or getAttribute('propertyName') */
댓글 쓰기
자세한 내용 보기