美文网首页
网易微专业-DOM编程艺术 01文档树

网易微专业-DOM编程艺术 01文档树

作者: Marks | 来源:发表于2017-04-04 11:20 被阅读16次

    1、DOM:Document Object Model
    ⑴用对象方式表示对应的HTML和CSS。
    ⑵一系列API的规范。动态的修改节点。
    ⑶DOM规范在浏览器中的实现是通过JS实现的。可以认为浏览器中的JS包含DOM。

    文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
    一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型(DOM)提供了对同一份文档的另一种表现,存储和操作的方式。 DOM是web页面的完全的面向对象表述,它能够使用如 JavaScript等脚本语言进行修改。
    https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

    2、DOM包含哪些内容?
    ▪DOM Core :DOM最核心结构和API的定义
    ▪DOM HTML: 定义HTML如何转换为对应的对象,用HTML操作节点
    ▪DOM Style : 把样式转化为对象
    ▪DOM Event : 事件模型,相应用户的操作

    3、HTML → DOM

    4、节点遍历

    5、节点类型

    节点类型

    6、元素遍历

    元素遍历

    Q:如何实现浏览器兼容版的element.children
    element.children能够获取元素的元素子节点,但是低版本的ie不支持,如何在低版本的ie上兼容类似的功能。
    A:

    function getElementChild(element){
                if(element.children){
                    return element.children;
                } else {
                    var elementarr=[];
                    var nodelist=element.childNodes;
                    for (var i = 0; i < nodelist.length; i++) {
                        if (nodelist[i].nodeType==1) {
                            elementarr.push(nodelist[i]);
                        }else continue;
                    }return elementarr;
                }
            }```

    相关文章

      网友评论

          本文标题:网易微专业-DOM编程艺术 01文档树

          本文链接:https://www.haomeiwen.com/subject/mxxaottx.html