DOM文档对象模型

Node类型的属性和方法

 DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。

javascript中所有的节点类型都继承自Node类型

        1.body节点
        //获取body节点
        var body=document.body;

        2.查看节点类型(nodeType) 9Document 1Element 3Text 8Comment
        console.log(document.nodeType)//9

        3.//获取节点名称 返回纯大写节点名称
        console.log(body.nodeName)      

        4.//获取子节点  childNodes保存一个NodeList对象
        console.log(body.childNodes);

        5.//获取兄弟节点中的前一个节点
        var childs=body.childNodes;
        console.log(childs[1].previousSibling);

        6.//获取兄弟节点的下一个节点
        console.log(childs[1].nextSibling) 

        7.//获取childNodes列表中的第一个节点
        console.log(body.firstChild) 

        8.//获取childNodes列表中的最后一个节点
        console.log(body.lastChild) 

        9.//指向表示整个文档的文档节点。
        console/log(body.ownerDocument)

        10.//查看body节点是否有孩子节点
        console.log(body.hasChildNodes());

        11.//获取某一元素节点内的元素孩子节点
        console.log(body.children);

        //类数组转数组 es5
            body.childNodes
            var result=Array.prototype.slice.call(childs,0);
                    console.log(result);
            //es6 Array.from(childs);
                    var temp=Array.from(childs);
                    console.log(temp)
                        //拓展运算符

        //从孩子节点中过滤出元素节点
            var temp=Array.from(childs);
            var result=temp.filter(function(item){
                        return item.nodeType === 1
            })
            console.log(result)

 操作节点

        1.appendChild()追加节点
                    //1.获取到父节点
                    //2.找到孩子
                    //3.添加
                    var parent=document.getElementsByClassName('parent')[0];
                    var newChild=document.createElement('div');
                    //添加内部文本
                    // newChild.innerText='four';
                    /添加内部内容  innerHTML可以设别html代码片段 可以识别标签
                    newChild.innerHTML=`<div class='child'>newChild</div>`
                    parent.appendChild(newChild);
                    console.log(parent)
                    console.info(parent)
                    console.debug(parent)
                    console.error(parent)
                    console.warn(parent)
        2.insertBefore()在参照节点前插入节点 第一个参数要插入的节点 第二个参数参照节点
                    同一个节点在页面中只存在一个
                    var two=parent.children[1];
                    parent.appendChild(two)   
                    parent.insertBefore(newChild,two);
        3.replaceChild()替换节点 第一个参数：要插入的节点；第二个参数：要替换的节点；第二个节点被删除
                    parent.replaceChild(newChild,two)
        4.removeChild()一个参数 要移除的节点
                    parent.removeChild(two)
        -----------------------------------------------------------
        以下属性和方法可以任意元素节点调用
        5.获取节点内部内容
                    parent.innerHTML;设别HTML代码片段
                    parent.innerText;；只识别文本 去除空格和回车
                    parent.textContent;只识别文本，不去除空格和回车
        6.清空节点内部内容
                   parent.innerHTML=""
        7.cloneNode();复制节点 有参数true代表深复制
                    //浅复制 只复制节点 不复制内容
                    var cloneTwo=two.cloneNode();
                    parent.appendChild(cloneTwo);
                    // 深复制 复制节点和内容
                    var cloneTwo=two.cloneNode(true);
                    parent.appendChild(cloneTwo);

Document类型--属性和方法

        Javascript通过使用Document类型表示文档
        在浏览器中，document对象是HTMLDocument的一个实例，
        表示整个HTML页面。document对象是window对象的一个属性，
        因此可以直接调用。HTMLDocument继承自Document。
        window.document.body
        属性:
        1. //document-*-表示整个html文档页面
            console.log(document)
        2. // html元素
            console.log(document.documentElement);
        // body元素
            console.log(document.body);
            // img元素
            console.log(document.images)
            // form元素
            console.log(document.forms);
            // a标签 带有href属性的
            console.log(document.links);
            // 获取域名 --只能通过服务器打开
            console.log(document.domain);
            // 获取文档头信息
            console.log(document.doctype);
            // 获取文档标题
            console.log(document.title);
            // 获取URL
            console.log(document.URL);
            // 获取页面来源地址--只能通过服务器打开
            console.log(document.referrer)
        3.查找元素--方法
        getElementById()  
        getElementsByTagName()
        getElementsByName()
        getElementsByClassName() 
                querySelector()
                querySelectorAll()

Element类型

        1.获取属性值,使用.访问自有属性,使用getAttribute获取自定义属性
        // 获取div的id属性
        console.log(div.id)
        // 获取div的类名属性
        console.log(div.className)
        // 获取div的title属性
        console.log(div.title)
        // 使用[]也可以获取属性
        console.log(div['title'])
        2.// 获取自定义属性
        // console.log(div.flag) 使用.获取不到自定义属性
        console.log(div.getAttribute('data-flag'))
        console.log(div.getAttribute(['data-flag']))
        3.//修改属性
        div.setAttribute('data-flag','test1');
        4.//获取style属性和onclick属性 .style  .onclick拿到的对象或函数 getAttribute拿到的是字符串
        console.log(div.style) {}对象
        div.style.width='200px'
        console.log(div.onclick) function(){}函数
        console.log(div.getAttribute('style')) 字符串
        console.log(div.getAttribute('onclick'))
        5.// 移除属性
        div.removeAttribute('title');
        console.log(div);