DOM and Javascript


#1

Lab Assignment - DOM Fixer

Your goal is to make the start.html file look like the HTML of the goal file. You are to do this without writing anything to the HTML file, you can only work in the JavaScript file. I will use Firefox to look at the DOM of your page after your JavaScript is run. What I see should look exactly like the goal file (with the exception of white space and the script line at the bottom).

None of my documents are workings and i dont see why on the html

02 PM10 PM


#2

To go along with the screenshot, please include raw code so we don’t have to do so much typing to test it. Thanks.


#3

okay here is the code:

'use strict';

// Leave this line alone.
document.addEventListener("DOMContentLoaded", function() {

    // Your code goes here!
let header = document.getElementById('main-title');

// Adding a image and fixing the width and height

let planetImage = document.getElementsByTagName('img')[0];
planetImage.src = 'mars.jpg';
img.height = 500;
img.width = 500;

// order list Adding a class 
Let o = document. getElementsByTagName ('ol')
o.classList.add('.engage');

// Add a Element to the list 
let h3 = document.getElementById('knowledge-list');

let relationToHTML = document.createElement('li');

let relationToHTMLText = document.createTextNode('Relation to HTML');

relationToHTML.appendChild(relationToHTMLText);

document.getElementById('knowledge-list').appendChild(relationToHTMLText);

element.appendChild(relationToHTML);


// remove a element from a list 

Let knowledgelist = document. getElementById ('knowledge-list');

let secondElement = knowledgeList.children[2];

knowledgeList.removeChild(secondElement);




// Leave this line alone.
});

#4

You already have the target object in h3. No need to query it again.

h3.appendChild...

Where is element defined?

As before, this element is already defined and does not need to be queried again. Not to mention there is a syntax error in that line.

Above are only signposts. See where that takes you.

If there are no images, there will be an empty collection which will likely raise an exception. The purpose here is to insert an image. That means creating an img element and populating the src attribute, et al.


We have had for a long time now document.querySelector and document.querySelectorAll. Suggest start using them and ease your burden long term.

let parent_container = document.querySelector('#knowledge-list');
let images_collection = document.querySelectorAll('img');

The hidden beauty in all this is that we can capture the first image in the collection by using the first line, above, with an img type selector.

let planetImage = document.querySelector('img');

#5

Is there a simpler way for me to add a textNode to a order list ? or should i just leave it like this and i’m having trouble with remove and element a list

// knowledge-list order list

function myFunction() {
let node = document.createElement(“li”);
let textnode = document.createTextNode(“Relation to HTML”);
node.appendChild(textnode);
document.getElementById(“knowledge-list”).appendChild(node);
}

myFunction();

function myFunc() {
let node = document.createElement(“li”);
let textnode = document.createTextNode(“Using the DOM”);
node.appendChild(textnode);
document.getElementById(“knowledge-list”).appendChild(node);
}

myFunc();

function myList() {
let node = document.createElement(“li”);
let textnode = document.createTextNode(“Syntax”);
node.appendChild(textnode);
document.getElementById(“knowledge-list”).appendChild(node);
}

myList();


#6

There is not much you need to do to improve upon your code. It looks like it should function correctly. As for removing an element,

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

Study up those two methods and get familiar with their differences.

The key will be selecting the element to remove.


#7

Okay, I remove the element from a list with this code:
I want to know is there a way to sort an order list in the Dom ?

let knowledgelist = document.getElementById(“knowledge-list”);
let threeElement = knowledgelist.children[2];
knowledgelist.removeChild(threeElement);


#8

I want to create a aside tag in the Dom but i’m not sure if this is okay :

let asi = document.createElement(“aside”);
let asinode = document.createTextNode(“JavaScript is only fun when we can use it to manipulate HTML!”);
asi.appendChild(asinode);


#9

We would need to make a copy of the list text nodes and then sort it, then recompose and reinsert it.

This is the sort function for ascending order…

list.sort(function (a, b) { return a > b; });

This is still not inserted into the DOM. The ASIDE node needs to be appended to a parent (or to the BODY).


#10

For the sorting, the order list can I use the insertBefore() Method
too ?


#11

In a nightmarish scenario you could, but that would be manual sorting which can get pretty messy. Remember, it is the text nodes that are being sorted. Being as all the child elements of the list are LI, that should not interfere with the sort so the text shouldn’t need to be extracted. Consider…

list = [`<li>z</li>`, `<li>w</li>`, `<li>n</li>`, `<li>p</li>`, `<li>d</li>`, `<li>f</li>`];

list.sort((a,b) => a > b);

console.log(list);
[ '<li>d</li>',
  '<li>f</li>',
  '<li>n</li>',
  '<li>p</li>',
  '<li>w</li>',
  '<li>z</li>' ]

A node list is not an array, but a collection. I’ve never tried sorting nodes before so we are both going to have to learn how to do that. Be sure you share your findings so I’m not stumbling around in the dark.


#12

Note there is a more common approach to the sort…

let list = [94,28,17,30,79,85,16,73];

list.sort((a,b) => a - b);

console.log(list);
[ 16, 17, 28, 30, 73, 79, 85, 94 ]

In reverse,

list.sort((a,b) => b - a);

console.log(list);
[ 94, 85, 79, 73, 30, 28, 17, 16 ]

For text, though, it seems we need to use >.

list = [`<li>z</li>`, `<li>w</li>`, `<li>n</li>`, `<li>p</li>`, `<li>d</li>`, `<li>f</li>`];

list.sort((a,b) => b > a);

console.log(list);
[ '<li>z</li>',
  '<li>w</li>',
  '<li>p</li>',
  '<li>n</li>',
  '<li>f</li>',
  '<li>d</li>' ]

Here is SO post about sorting a node list…

https://stackoverflow.com/questions/29734337/javascript-obtain-nodelist-convert-nodelist-to-an-array-sort-the-array-and

Be sure to look at the FIDDLE in the first reply.

Just ran a test and the text nodes do need to be compared separate of the element container.

bugArray.sort(function(a, b) {
    return a.innerHTML.localeCompare(b.innerHTML);
}).forEach(function(bug) {
    ul.appendChild(bug);
});

#13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.