JS-DOM

refer to: https://www.udemy.com/course/the-web-developer-bootcamp/

Document Object Model - JS

The DOM is a JavaScript representation of a webpage
It's your JS "window" into the contents of a webpage
It's just a bunch of objects that you can interact with via JS.

Document

The document object is our entry point into the world of the DOM. It contains representations of all the content on a page, plus tons of useful methods and properties.

SELECT

document.getelementById('id')
document.getelementByTagName('TagName')
document.getelementByClassName('ClassName')

getElementById

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

getElementByTagName
getElementByClassName

querySelector，找到并返回第一个匹配项

querySelectorAll，找到所有匹配项的合集

根据id找，属性值前面加#; 根据class找，属性值前面加.

// finds first h1 element
document.querySelector('h1');

//finds first element with ID of red
document.querySelector('#red');

//find first element with Class of big
document.querySelector('.big');

//find the input element whose type is checkbox
document.querySelector("input[type = 'checkbox']");

MANIPULATE

innerHTML, textContent/innerText

change innerText

document.querySelector("span").innerText = 'Disgusting';

manipulating attributes

change src and alt text of a img element

document.querySelector("img").src = 'https://www.flaticon.com/svg/static/icons/svg/3523/3523063.svg';
document.querySelector("img").alt = 'chicken';

changing styles, key word： “.style”，内容用引号括起来！！！

document.querySelector('#container').style.textAlign = 'center';

document.querySelector('img').style.width = '150px';

document.querySelector('img').style.borderRadius = '50%';

Rainbow Text

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; //PLEASE DON'T CHANGE THIS LINE!

//YOU CODE GOES HERE: 7 individual spans, each holds a single letter, 
const spans = document.querySelectorAll("span");
//querySelectorAll找出所有的spans

for(let i = 0; i < 7; i++){
    spans[i].style.color = colors[i];
}

getAttribute/ setAttribute/ .classList/ .classList.add() / .classList.remove() /classList.contains() / classList.toggle()
页面DOM里的每个节点上都有一个classList对象，我们可以新增、删除、修改节点上的CSS类。还可以使用classList判断某个节点是否被赋予了某个CSS类。
以下代码中的border, purple都是写在css里面可以供调用的。

const h2 = document.querySelector("h2");

h2.classList //没有括号，返回所有的class列表

h2.classList.add('border')//属性覆盖，如果已经存在，即更新，不存在，即加上这个属性

h2.classList.add('purple')

h2.classList.remove('border') //去掉这个属性

h2.classList.contains('border') //return true/false

toggle：当元素上没有这个CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。

实现反转效果，js代码里面必须对每一个<li></li>单独操作

<!DOCTYPE html>

<head>
    <title>ClasList</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="app.css">

</head>

<body>
    <!--LEAVE THIS FILE ALONE!-->
    <ul>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
        <li>Hello</li>
        <li class="highlight">Hello</li>
        <li>Hello</li>
    </ul>
    <script src="app.js"></script>
</body>

</html>

app.css

li {
    background-color: #B10DC9;
  }
  
  .highlight {
    background-color: #7FDBFF;
  }

const lists = document.querySelectorAll("li");

for (let list of lists) {
    list.classList.toggle("highlight")
}

traversing parent/child/sibling
- .parentElement，每一个元素都只有一个直系的parent，但是可能会有多个直系的children
  - .parentElement.parentElement.parentElement。可以一层一层往上找到祖宗，曾祖宗

- .previousSibing VS .previousElementSibing，nextSibling VS nextElementSibling，一般使用.ElementSibing可以精准定位到姊妹元素，而.Sibing很多时候会包含一些空格什么的。

notes: 定位孩子，姊妹，父亲结点的时候需要先找到一个基准点（通常使用 const base = document.querySelector('#red'); 然后根据这个base来找其孩子，姊妹，父亲）

Append& AppendChild，
- How to make a new DOM element： .createElemen('tag name'), tag_name = img, div, ...
  - const newImg = document.createElement('img(tag_name)')
- change the class of the new appended element
  - newImg.classList.add('square'). //css里面设置图片为正方形的属性
- append VS appendChild
  - append可以同时插入多个不同的结点，可以直接把文字插在后面（append taxt into something directly），例如paragrapg.append('xxxxxx')，内容直接是添加在那个段落的下一句的(inside of the paragraph)，而不是另起一个段落
- prepend, appending before something directly
- InsertAdjacentElement
- - 还可以直接.after/ .before添加姊妹结点，但是有些浏览器不支持
exercie: append 100 buttons inside of div

<!DOCTYPE html>

<head>
    <title>100 Buttons!</title>
</head>

<body>
    <!--DO NOT TOUCH THIS FILE PLEASE!-->
    <h1>Look At All My Buttons!</h1>
    <div id="container">
    
    </div>
</body>

</html>

// WRITE YOUR CODE IN HERE:
const div = document.querySelector('div')


for(let i = 0; i < 100; i++){
    const btn = document.createElement('BUTTON')
    btn.innerText = "Hey!"
    div.appendChild(btn);
}

思考：为什么 const btn = document.createElement('BUTTON') btn.innerText = "Hey!"要写在for 循环里面呢？

remove/removeChild
- old version: b.parentElement.removeChild(b) 通过移除父母的孩子来移除当前元素
- new version: node.remove();