js基础--------dom

最新推荐文章于 2023-04-08 11:48:31 发布

努力的小杨

最新推荐文章于 2023-04-08 11:48:31 发布

阅读量132

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/weixin_39537579/article/details/81781404

版权

JavaScript基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

节点类型

节点.nodeType 节点类型

节点.nodeValue 节点的值

节点.nodeName 节点的名字

节点.atrributes 节点的属性类似数组

节点.childNodes 节点的所有子节点类似数组

domReady

浏览器是通过渲染引擎来将html标签变成节点的，默认情况渲染引擎可以渲染html xml 和图片，通过插件可以显示其他类型的文档

渲染：浏览器把请求出来的html内容显示出来的过程

window.onload: 浏览器绘制完dom节点，并且页面上所有资源加载完毕之后才执行里面的代码，但若外部资源如图片很多时，请求很耗时，可能出现dom加载完毕，但是依旧需要等待外部资源加载完毕才能执行js代码的情况，故外部资源多时不适用window.onload

DOMContentLoaded 当dom加载完毕就可以执行DOMContentLoaded里的方法但ie有的版本不兼容，但是有hack方法能够解决

未完待续。。。。。。。。。。。。。。。

=============================

类似jq的domready实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function myReady(fn) {
            // 对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
            if(document.addEventListener) {
                // 通过能力检测浏览器
                document.addEventListener("DOMContentLoaded", fn, false);  //fakse表示在冒泡阶段捕获
            } else {
                IEDOMContentLoaded(fn);
            }
            // ie模拟DOMContentLoaded
            function IEDOMContentLoaded(fn) {
                var d = window.document;
                var done = false;
                // 只执行一次用户的毁掉函数   init()
                var init = function() {
                    if(!done) {
                        done = true;
                        fn();
                    }
                };
                (function() {
                    try {
                        // DOM树未创建完之前调用doScroll会抛出错误
                        d.documentElement.doScroll('left');
                    } catch(e) {
                        // 延迟再试一次
                        setTimeout(arguments.callee, 50);
                        // 调用自身
                        return;
                    }
                    // 没有错误表示DOM树创建完毕，然后马上执行回调
                    init();
                })()
                // 监听document加载状态
                d.onreadystatechange = function() {
                    // 如果用户是在domReady之后绑定的函数，立马执行
                    if(d.readyState == 'complete') {
                        d.onreadystatechange = null;
                        init();
                    }
                }
            }
        }
    </script>
</body>
</html>

argument为函数内部对象，包含传入函数的所有参数，arguments.callee代表函数名，多用于递归调用，在哪个函数中运行,它就代表哪个函数,一般在匿名函数中，在匿名函数中有时需要自己调用自己，但是由于是匿名函数,没有名字，所以可以用arguments.callee来代替匿名的函数。

努力的小杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础--------dom

节点类型节点.nodeType 节点类型节点.nodeValue 节点的值节点.nodeName 节点的名字节点.atrributes 节点的属性类似数组节点.childNodes 节点的所有子节点类似数组 domReady浏览器是通过渲染引擎来将html标签变成节点的，默认情况渲染引擎可以渲染html xml 和图片，通过插件可以显示其他类型的文档...
复制链接

扫一扫