DOM

DOM操作
    Document    Object      Model
    题目
        DOM是哪种基础的数据结构?
            树
        DOM操作的常用API有哪些？
            获取DOM节点，以及节点的property和Attribute
            获取父节点，获取子节点
            新增节点，删除节点
        DOM节点的attr和property有何区别？
            prototype只是一个JS对象的属性的修改
            Attribute是对html标签属性的修改


    知识点
        DOM本质
            DOM可以理解为：浏览器吧拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型而已。
        DOM节点操作
            获取DOM节点
                var div = document.getElementById('div1');
                var divList = document.getElementsByTagName('div');
                console.log(divList.length);
                console.log(divList[0]);


                var containerList = document.getElementsByClassName('.container');
                var pList = document.querySelectorAll('p')
            prototype
                var pList = document.querySelectorAll('p');
                var p = pList[0];
                console.log(p.style.width);
                p.style.width = '100px';
                console.log(p.className);
                p.className = 'p1';


                console.log(p.nodeName);
                console.log(p.nodeType);
            Attribute
                var pList = document.querySelectorAll('p');
                var p = pList[0];
                p.getAttribute('data-name');
                p.setAttribute('data-name', 'imooc');
                p.getAttribute('style');
                p.setAttribute('style', 'font-size:30px;');
        DOM结构操作
            新增节点
                var div1 = document.getElementById('div1');
                //添加新节点
                var p1 = doument.createElement('p');
                p1.innerHTML = 'this is p1';
                div1.appendChild(p1);   //添加新创建的元素
                //移动已有节点
                var p2 = document.getElementById('p2');
                div1.appendChild(p2);
            获取父节点和子节点
                var div1 = document.getElementById('div1');
                var parent = div1.parentElement;
                
                var child = div1.childNodes;
                div.removeChild(child[0]);
            删除节点
                var div1 = document.getElementById('div1');
                var child = div1.childNodes;
                div1.removeChild(child[0]);