DOM编程

大熊G
971 阅读2分钟

这是我参与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每次查询都会搜索整个文档，我们一般都要限制它的次数还有把查询到的内容进行一个缓存。

avatar
文章
阅读
粉丝