DOM
Document Object Model
通过document获取网页文档
console.log(document);
console.log(window.document);
通过document操作元素
<button id="btn">Click</button>
<script>
// 通过标签id获取元素
const btn = document.getElementById('btn');
</script>
文档节点
document.documentElement; // <html>
document.title; // <title>
document.head; // <head>
document.body; // <body>
document.links; // 获取所有链接
元素节点
<button id="btn" class="b"></button>
<input type="text" name="username">
<script>
// 可以实时获取（双向绑定）
document.getElementById('btn');
document.getElementsByClassName('b');
document.getElementsByTagName('button');
document.getElementsByName('username');
// 不可以实时获取
document.querySelectorAll('#btn'); // 通过选择器获取元素节点
document.querySelector('.b'); // 获取第一个
</script>
<div id="d">
<span>1</span>
<span>2</span>
</div>
<script>
const d = document.getElementById('d');
d.childNodes; //子节点（包括元素、文本节点）
d.children; // 子元素节点
const s1 = d.firstElementChild; // <span>1</span>
const s2 = s1.nextElementSibling; // <span>2</span>
const s3 = d.lastElementChild; // <span>2</span>
const s4 = s3.previousElementSibling; // <span>1</span>
const t = s3.tagName; // span
</script>
文本节点
<div id="d">
文本节点1
<span>1</span>
<span>2</span>
</div>
<script>
const d = document.getElementById('d');
const t1 = d.firstChild; // 文本节点1
const e1 = t1.nextSibling; // <span>1</span>
const t2 = e1.nextSibling; // (文本节点2: \n)
const e2 = t2.nextSibling; // <span>2</span>
const t3 = e2.nextSibling; // (文本节点3: \n)
const text1 = d.innerText; // '文本节点1 1 2'
const text2 = d.textContent; // '\n 文本节点1\n 1\n 2\n'
d.innerHTML('修改HTML代码');
</script>
属性节点
<input type="text" id="u" class="i" name="username">
<script>
const e = document.getElementById('u');
e.type; // text
e.className; // i
e.name; // username
e.getAttribute('type'); // text
e.getAttribute('class'); // i
e.getAttribute('name'); // username
e.setAttribute('disabled', 'disabled');
e.removeAttribute('disabled');
</script>
修改元素
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
const list = document.getElementsByTagName('ul')[0];
const li = document.createElement('li');
li.textContent = '3';
list.appendChild(li); // 追加子元素
li.replaceWith(li); // 替换元素
li.remove(); // 删除元素
// 插入元素
list.insertAdjacentElement('beforebegin', li); // 起始标签前
list.insertAdjacentElement('afterbegin', li); // 起始标签后
list.insertAdjacentElement('beforeend', li); // 结束标签前
list.insertAdjacentElement('afterend', li); // 结束标签后
</script>
节点复制
<ul>
<li>1</li>
</ul>
<script>
const list = document.getElementsByTagName('ul')[0];
const li = list.firstElementChild;
const li2 = li.cloneNode(true); // true 同时复制子节点
li2.textContent = '2';
list.appendChild(li2);
</script>
