DOM操作技术

最新推荐文章于 2023-08-13 13:02:41 发布

mannuandeyangguang

最新推荐文章于 2023-08-13 13:02:41 发布

阅读量239

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wujunlei1595848/article/details/90680053

版权

前端开发专栏收录该内容

73 篇文章 1 订阅

订阅专栏

DOM操作最大的两个麻烦就是：操作效率问题、浏览器兼容问题

动态脚本

通过修改DOM动态添加的脚本的两种模式：插入外部文件，插入JavaScript代码

插入外部文件

var script = document.createElement('script');
script.src = 'client.js';
document.body.appendChild(script);

封装为外部脚本插入函数

fucntion loadScript(url){
    var script = document.createElement('script');
    script.src = url;

    document.body.appendChild(script);
}

loadScript('script.js');

插入行内代码：不兼容IE,它将<script>视为一个特殊的元素，不允许DOM访问其子节点：

var script = document.createElement('script');
var textNode = document.createTextNode('function sayHi(){alert(\'Hi!\')}');
script.appendChild(textNode);

document.body.appendChild(script);

插入行内代码的兼容性解决方案：行内脚本插入封装函数

function loadScript(code){
    var script = document.createElement('script');

    try{
        script.appendChild(document.createTextNode(code));
    }catch(err){
        script.text = code;
    }

    document.body.appendChild(script);
}

loadScript(' function sayHi(){alert(\'Hi!\')}');

以上两种模式加载的脚本代码会立刻执行；
虽然可以，但是不推荐使用eval()来执行字符串代码；

动态样式

通过DOM动态添加样式的两种模式：<link>引入外部样式；<style>嵌入样式；

插入外部样式文件封装函数：

function loadStyles(url){
    var head = document.getElementByTagName('head')[0];
    var link = document.createElement('link');
    link.el = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}

loadStyles('styles.css');

插入行内样式的兼容性解决方案：行内样式插入封装函数

function loadInlineStyle(css){
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');

    try{
        style.appendChild(document.createTextNode(css));
    }catch(){
        style.styleSheet.cssText = css
    }

    head.appendChild(style);
}

loadInlineStyle('body{background-color: red;}');

IE将<style>视为一个特殊元素的，与<script>类似的节点，所以需要写入内联的样式代码，需要使用IE下的style节点的特征属性：style.styleSheet.cssText。

操作表格

HTML DOM为了方便操作表格，为<table>, <tbody>, <tr>元素添加了特殊的属性和方法；
<table>, <tbody>, <tr>元素的属性和方法

使用NodeList

理解并区别三个概念：NodeList, NamedNodeMap, HTMLCollection;

上面三个集合都是动态的，所有以上集合都是在访问DOM文档时实时运行的查询；

动态性实例：每一次访问的都是更新后的集合

<!DOCTYPE html>
<html>
    <body>
    </body>
    <script>
        var divs = document.getElementsByTagName('div'),
            i,
            div;
        
        for(var i=0; i<divs.length; i++){
            div = document.createElement('div');
            document.body.appendChild(div);
        }

        // 页面挂掉了
    </script>
</html>

最佳实践：防止出现上面的情况的解决方案是，将NodeList的length缓存到一个变量中：

<!DOCTYPE html>
<html>
    <body>
    </body>
    <script>
        var divs = document.getElementsByTagName('div'),
            i,
            len,
            div;
        
        for(var i=0, len = divs.length; i<len; i++){
            div = document.createElement('div');
            document.body.appendChild(div);
        }

        // 页面挂掉了
    </script>
</html>

最佳实践：减少访问NodeList的次数，每次访问都会重新查询一次。

mannuandeyangguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM操作技术

DOM操作最大的两个麻烦就是：操作效率问题、浏览器兼容问题动态脚本通过修改DOM动态添加的脚本的两种模式：插入外部文件，插入JavaScript代码插入外部文件 var script = document.createElement('script');script.src = 'client.js';document.body.appendChild(script);...
复制链接

扫一扫