Answers for "DOM"

Javascript

dom -js

const pokemonContainer = document.getElementById('pokemonContainer');

pokemonContainer.innerHTML += `
<div>
    <section class="all-comments"></section>
</div>
`;

const allComments = document.querySelector('.all-comments');
allComments.appendChild('Hello World');

Posted by: Guest on September-10-2021

Source

what is document object

document.anchors			Returns all <a> elements that have a name attribute	1
document.applets			Returns all <applet> elements (Deprecated in HTML5)	1
document.baseURI			Returns the absolute base URI of the document	3
document.body				Returns the <body> element	1
document.cookie				Returns the document's cookie	1
document.doctype			Returns the document's doctype	3
document.documentElement	Returns the <html> element	3
document.documentMode		Returns the mode used by the browser	3
document.documentURI		Returns the URI of the document	3
document.domain				Returns the domain name of the document server	1
document.embeds				Returns all <embed> elements	3
document.forms				Returns all <form> elements	1
document.head				Returns the <head> element	3
document.images				Returns all <img> elements	1
document.implementation		Returns the DOM implementation	3
document.inputEncoding		Returns the document's encoding (character set)	3
document.lastModified		Returns the date and time the document was updated	3
document.links				Returns all <area> and <a> elements that have a href attribute	1
document.readyState			Returns the (loading) status of the document	3
document.referrer			Returns the URI of the referrer (the linking document)	1
document.scripts			Returns all <script> elements	3
document.strictErrorChecking	Returns if error checking is enforced	3
document.title				Returns the <title> element	1
document.URL				Returns the complete URL of the document	1

Posted by: Guest on November-19-2020

HTML DOM

// This is a DOM interface with JAVASCRIPT by using JSON data
// Creating Table with DOM objects


var myData = [{user: "James", address: "123 Keele St. Toronto, ON.", email:"[email protected]"},
              {user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"[email protected]"},
              {user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"[email protected]"},
              {user: "Catherine", address: "1121 New St. Burlington, ON.", email:"[email protected]"}];

window.onload = function() {		 
   document.querySelector("#button1").onclick = generateTable;
}

function generateTable(){
   // get the reference for the body
   var tbl = document.querySelector("#outputTable");
 
   // revove existing Body element
   var tblExistingBody = tbl.querySelector("tbody");
   if (tblExistingBody) tbl.removeChild(tblExistingBody);
   
   // creates a <tbody> element
   var tblBody = document.createElement("tbody");
 
   // creating all table rows
   for (var i = 0; i < myData.length; i++) {
      // creates a table row
      var row = document.createElement("tr");
 
      // Create a <td> element and put them at the end of the table row
      row.appendChild(getTdElement(myData[i].user));
      row.appendChild(getTdElement(myData[i].address));
      row.appendChild(getTdLinkElement(myData[i].email, myData[i].email));
 
      // add the row to the end of the table body
      tblBody.appendChild(row);
   }
 
   // put the <tbody> in the <table>
   tbl.appendChild(tblBody);
}

// Create a <td> element and a text
function getTdElement(text) {
   var cell = document.createElement("td");
   var cellText = document.createTextNode(text);
   cell.appendChild(cellText);
   return cell;
}

// Create a <td> element with a hyperlink
function getTdLinkElement(text, href) {
   var anchor = document.createElement("a");
   anchor.setAttribute("href", "mailto:"+href);
   var anchorText = document.createTextNode(text);
   anchor.appendChild(anchorText);
   
   var cell = document.createElement("td");
   cell.appendChild(anchor);
   return cell;
}

Posted by: Guest on March-22-2020

DOM

<body onload="window.alert('Welcome to my home page!');">

Posted by: Guest on May-17-2020

Source

JavaScript and HTML DOM Reference

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

Posted by: Guest on November-03-2020

Source

DOM

DOM Manipulation Checklist
************************** 

- Do you know what DOM is and its use in JavaScript ? 
  - DOM - Document Object Model - is a programming interface for HTML documents. It is used to represent the page so that programs can change the document structure, style, and content
  - DOM is created by the browser when a web page is loaded. In graphical form, it's like a tree of elements also called nodes, which are used to represent every single element on the page. All the DOM of our webpage sits inside the document object. Programmatically, this model allows us to read or even change the content of our page via JavaScript.
yes
  Reference:
  Adugna:  https://youtu.be/6XtDRvdF9M4?t=267 
  External: https://youtu.be/l-0nPnSvbX8 

- Do you know why we need JavaScript for DOM manipulation?
  - The main reason we include JavaScript in our HTML is to add instructions on how it should respond to an action taken on the browser. In other words, to add interactivity on the page.

  Reference:
  Adugna:  https://youtu.be/oMq2pLNIeC0?t=1029 

- Do you know why we have to understand DOM?
  - Your job as a JavaScript front end developer is to select and update the DOM elements when a user interacts with a website. DOM is what lets you do this using JavaScript.

- Do you know some of the actions of DOM in JavaScript?
  - Change/Remove HTML elements in the DOM/on the page.
  - Change and add CSS styles to elements
  - Read and change attributes (href, src, alt), etc.
  - Create new elements and insert them into the DOM/page.
  - Attach event listeners to elements (click, keypress, submit)

- Do you understand and distinguish the four kinds of nodes in a DOM tree?
Answer:
  - Document Node - Represent the entire page which contains multiple elements in it. 
  - Element Node- Represent each HTML tag that are used in the HTML code. 
  - Attribute Node - These are nodes to model  the attribute of HTML elements, for instance <img src = â€œ â€ width = â€œâ€ alt = â€œâ€ > 
  - Text Node - These are the text content of the HTML element. 

  Reference: 
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=954  
  External: https://www.youtube.com/watch?v=y3itGTCseAk 

- Do you know how to select an individual element using getElementById() method?

  - getElementById()- method returns the element that contains the name id passed. And in case we do not have any id with that specific name, it returns null.

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=3386 

- Do you know how to select an individual element using querySelector() method?

  - querySelector()-method returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=3863  


- Do you know how to select an individual element by traversing between multiple elements?

  - You can traverse from one element to another by using properties like parentNode, previousElementSibling, nextElementSibling,firstElementChild and lastElementChild.

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=5682 


- Do you know how to select multiple elements using getElementsByClassName() method?

  - getElementsByClassName()-method returns an HTMLCollection of all those elements containing the specific name class passed.

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=4604   

- Do you know how to select multiple elements using getElementsByTagName() method?

  - getElementsByTagName()-method returns an HTMLCollection of all those elements with the tag name passed.

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=4783    

- Do you know how to select multiple elements using the querySelectorAll() method?

  - querySelectorAll()-method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object. The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. 

  Reference:
  Adugnaâ€™s: https://youtu.be/6XtDRvdF9M4?t=4604   


- Do you know how to alter(change) values and properties? 

  - Altering a specific text node:You use the property "nodeValue" and â€œtextContentâ€ to access or update content of a text node

  - Working with HTML content: when you want to add, update or remove blocks of HTML code from your page, you use the methods like createElement(), innerHTML, textContent, appendChild() and removeChild().

  - Working with attributes:when you want to add, update or remove the attribute value of an element, you use the methods like className, classList, id, hasAttribute(), getAttribute(), setAttribute(), removeAttribute().

  Reference:
  Adugna:  https://youtu.be/GnIrZP6-MbE?t=56

Posted by: Guest on October-13-2021

Source

Code answers related to "DOM"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Python

Javascript

Whatever

Shell/Bash

CSS

Html

PHP

SQL

Java

Answers for "DOM"

Code answers related to "DOM"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us