DOM编程
theme: channing-cyan
这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战
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文件 这句话，用这个方法同样可以生效
image.png
我们还可以用另一种方式写，把他封装起来，我们只需要在用的时候传参就可以了。
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);这里我设置了文字阴影，它同样也可以实现。
image.png
我们还可以像上面操作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);我们通过这个方法也可以直接实现，大家也可以看到我的代码已经把写的样式注释掉了。
image.png
注意：以上代码也许在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每次查询都会搜索整个文档，我们一般都要限制它的次数还有把查询到的内容进行一个缓存。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
