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

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;
            }
        }```