basic dom manipulation

Question 1

creation

Answer 1

var div = document.createElement(‘div’);

Question 2

addition

Answer 2

document.body.appendChild(div);

Question 3

style manipulation

Answer 3

div.style.left = “32px”;

Question 4

change class

Answer 4

div.className = “xxx”;

Question 5

change id

Answer 5

div.id = “test”;

Question 6

change inner html

Answer 6

div.innerHTML = “xx”but using jquery would be xx.html(x)

Question 7

change inner text

Answer 7

div.textContent = “hello”;

Question 8

removal

Answer 8

div.parentNode.removeChild(div);

Question 9

get by id

Answer 9

div = document.getElementById(“id”);

Question 10

get by tags

Answer 10

array = document.getElementByTagName(‘div’);

Question 11

get by class

Answer 11

array = document.getElementsByClassName(‘class’);

Question 12

get by css selector (single)

Answer 12

div = document.querySelector(‘div #test’);

Question 13

get by css selector (multi)

Answer 13

array = document.querySelectorAll(‘div’);

Question 14

what are text nodes?

Answer 14

hello”hello” is h1’s child textNode. strictly speaking, it’s a node too. :D

Question 15

sibling (text node indluded)

Answer 15

node = div.nextSibling;

Question 16

children (text node indluded)

Answer 16

node = div.childNodes[i];

Question 17

sibling html node:

Answer 17

element = div.nextElementSibling;

Question 18

children html node:

Answer 18

element = div.children[i];