红宝书阅读笔记！第八天_DOM(2)

DOM编程

很多时候，操作DOM是很直观的。通过HTML代码能实现的，也一样能通过Javascript实现。

1.动态脚本

<script>标签用于向网页插入HTML代码，可以是src属性包含的外部原件，也可以是作为该元素内容的源代码。动态脚本就是在页面初始加载时不存在，之后又通过DOM包含的脚本。和对应的HTML元素一样，有两种方式通过<script>动态为网页添加脚本：引入外部文件和直接插入源代码。

比如，举个栗子👇

<script src='foo.js'></script>

let script = document.creatElement('Element');
script.src = url;
document.body.appendChild(script);    

注意，在上面最后一行把<script>元素添加到页面之前，是不会开始下载外部文件的。可以把上述方法抽象成一个函数，比如👇

function loadScript(url){
	let script = document.creatElement('script');
    script.src = url;
    document.body.appendChild(script);
}

2.动态样式

CSS样式在HTML页面中可以通过两个元素加载。<link>元素用于包含CSS外部文件，而<style>元素用于添加嵌入样式，与动态脚本类似，动态样式也是在页面初始加载时并不存在，而是在之后才添加到页面中的。

<link rel = 'stylesheet' type='text/css' href='styles.css' >

let link = document.creatElement('link')
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'styles.css';
let head = document.getElementByTagName('head')[0];
head.appendChild(link);

上述过程可以像动态脚本一样抽象成一个函数。

3.操作表格

oh看起来太麻烦了不想看。

4.使用NodeList

NodeList、NameNodeMap、HTMLCollection是理解DOM编程的关键，这3个集合类型都是实时的，文档的结构变化会实时的在他们的身上反映出来，因此他们的值会代表最新状态。

let observer = new MutationObserver(() => console.log('DOMwas mutated!'));