Element类型
Element用于表现xml或者HTML元素，提供了对元素标签名、子节点及特性的访问。
nodeType: 1
nodeName: 元素标签名
nodeValue: null
parentNode: 可能是Document或Element
访问标签名：tagName或nodeName
<body>
<div id="active">
active
</div>
<div id="parent">
parent
<div id="child1">child1</div>
<div id="child2">child2</div>
</div>
<script>
let parentEle = document.getElementById('parent');
console.log(parentEle.nodeType === Node.ELEMENT_NODE) // true
console.log(parentEle.nodeType === 1) // true
console.log(parentEle.nodeValue) // null
console.log(parentEle.nodeName) // DIV
console.log(parentEle.nodeName == parentEle.tagName) // true
</script>
</body>
HTML元素
所有HTML元素都由HTMLElement类型或者HTMLElement子类型表示。HTMLElement继承自Element并添加了一些属性：对应每个HTMl元素中都有的标准属性。
| 名称 | 说明 |
|---|---|
| id | 元素在文档中的唯一标识 |
| title | 有关元素的附加说明，一般通过工具提示条显示出来 |
| className | 元素的class属性，即元素指定的css类 |
| lang/dir | 语言相关，少用 |
// 标准属性可以直接获取，也可以改变
<div id="myDiv" class="bd" title="body text">HTML元素</div>
<script>
const div = document.getElementById('myDiv');
console.log(div.id) // myDiv
console.log(div.className) // bd
console.log(div.title) // body text
console.log(div.__proto__) // HTMLDivElement
console.log(div.__proto__.__proto__) // HTMLElement
console.log(div.__proto__.__proto__.__proto__) // Element
console.log(div.__proto__.__proto__.__proto__.__proto__) // Node
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__) // EventTarget
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__) // Object
</script>
DOM 精通了？请问 Node 和 Element 有何区别？juejin.cn/post/706677…
获取和设置特性，创建元素
操作特性的三个方法：getAttribute、setAttribute、removeAttribute
getAttribute可以获取自定义的特性
<div id="myDiv" data-special="hello">HTML元素</div>
<script>
const div = document.getElementById('myDiv');
console.log(div.getAttribute('data-special')) // hello
console.log(div['data-special']) // undefined
</script>
创建元素使用createElement
const newNode = document.createElement('div');
newNode.setAttribute('id', 'newId');
newNode.innerText = "newText";
console.log(newNode) // <div id="newId">newText</div>
动态插入脚本&动态插入样式
<script>
// 动态插入脚本
const script = document.creatrElement('script');
script.type="text/javascript";
script.src = 'client.js';
document.body.appendChild(script);
// 动态插入样式
const link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
// link放在head标签后
const head = document.getElementsByTagName('head')[0];
head.appendChild(link);
</script>
选择符API
Selector API是由W3C发起制定的一个标准，让浏览器原生支持CSS查询。两个核心方法是querySelector()和querySelectorAll()
<p id="testp" class="test-p-class">
<span>p content</span>
</p>
<p >
<span>p content 2</span>
</p>
<script>
// querySelector()返回模式匹配的第一个元素，没有匹配返回null
// querySelectorAll()返回一个NodeList对象，没有匹配返回空
// 获取body元素
const body = document.querySelector('body');
// 获取ID为'myDiv'的元素
const myDiv = document.querySelector('#myDiv');
// 取得类为'selected'的第一个元素
const selected = document.querySelector('.selected');
// 取得类为button的第一个图像元素
// 通过Document类型调用时，会在文档元素的范围内查找；通过Element类型时，会在该元素的后代元素范围内查找
const img = document.body.querySelector('img.button');
const ps = document.querySelectorAll('p');
const divs = document.querySelectorAll('div');
console.log('ps',ps)
console.log('divs',divs)
</script>
结果：
scrollIntoView()
H5选择了scrollIntoView()作为滚动的标准方法。scrollIntoView()可以在多有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
传入true或者不传参数，元素顶部与视口对齐；传入false，会尽可能将调用元素全部展现在视口，底部平齐。
DOM2和DOM3
DOM1级主要定义的是HTML和XML文档的底层结构，DOM2和DOM3引入了更多的交互能力和更高级的XML特性。主要是DOM2级事件，说明了如何使用事件与DOM文档交互。
