DOM 编程
一切能够通过 html 操作的，也能够用 js 来实现，这个就是 jsDOM 编程的魅力。DOM 操作其实很直观，我们直接看代码。
dom 操作动态脚本
我们一般写 js 代码的时候一般会创建一个 js 文件，在 js 文件里写入 js 代码，然后通过引入外部文件的方式来引入到 html 中。
<script src="domJs.js"></script>
复制代码
以上这种方法是常用的，我们可以换一个写法，来用 DOM 编程创建它。
let script = document.createElement('script');script.src = 'domJs.js';document.body.appendChild(script);
复制代码
我们在 js 代码中打印了 我是外部 js 文件 这句话，用这个方法同样可以生效
我们还可以用另一种方式写，把他封装起来，我们只需要在用的时候传参就可以了。
function loadJs(url){ let script = document.createElement('script'); script.src = 'domJs.js'; document.body.appendChild(script);}loadJs('domJs.js');
复制代码
DOM 操作动态样式
我们要引入 css 样式的话可以通过 link 元素。它也可以是页面初始化的时候不存在，可以之后添加到页面中。
<link rel="stylesheet" href="domCss.css">
复制代码
我们还是可以轻松使用 DOM 编程来创建它
let link = document.createElement('link');link.rel = "stylesheet";link.type = "text/css";link.href = "domCss.css";let head = document.getElementsByTagName('head')[0];head.appendChild(link);
复制代码
这里我设置了文字阴影，它同样也可以实现。
我们还可以像上面操作 script 一样给他封装成一个函数，我们调用的时候传参就可以了，这里不演示了。
再说一个我们在 html 写内部样式怎样用 DOM 来操作。
<style> p{ text-shadow: 2px 2px 5px red; } </style>
复制代码
用 DOM 操作写法
let style = document.createElement('style');style.type = "text/css";style.appendChild(document.createTextNode("p{text-shadow: 2px 2px 5px red;}"))let head = document.getElementsByTagName('head')[0];head.appendChild(style);
复制代码
我们通过这个方法也可以直接实现，大家也可以看到我的代码已经把写的样式注释掉了。
注意：以上代码也许在 IE 浏览器中不可用，大家可以选择谷歌，欧朋等浏览器。再偷偷说一句，IE 就不要经常使用了，它的兼容性实在一言难尽。
NodeList 使用
NodeList 对象代表一个有顺序的节点列表。它实际上是基于 DOM 文档的实时查询。它和 NameNodeMap 还有 HTMLCollection 差不多。都是实时的状态查询。
在任何时候要遍历 NodeList，都要初始化一个变量来保存当前查询的长度，要不然它会无限循环。
let spans = document.getElementsByTagName('span');for (let i = 0, len = spans.length; i < len ; ++i){ let span = document.createElement('span'); document.body.appendChild(span);}
复制代码
我们还可以反向操作，能节省初始化变量。
let spans = document.getElementsByTagName('span');for (let i = spans.length -1; i >= 0; --i){ let span = document.createElement('span'); document.body.appendChild(span);}
复制代码
注意：NodeList 每次查询都会搜索整个文档，我们一般都要限制它的次数还有把查询到的内容进行一个缓存。
评论