DOM操作 节点操作

普通的DOM操作

节点DOM操作

可以直接获取html文档中的任意内容（节点）

标签 属性 内容 注释

创建节点

let o=document.createElement('a');

一个创建标签节点只能写入一个位置

多次写入 写入的位置是 最后一次写入的位置

删除节点

克隆节点。不可以克隆 事件

写入节点. 标签节点本质是一个标签对象

不能使用 标签.innerhtml 或者 标签.innertext

必须使用 标签节点专门的写入语法

appendChild. 在某元素中 内部 添加节点

odiv.insertBefore(oa ,oinput )

const oa = document.createElement('a');
    const odiv = document.querySelector('div')
    console.log(oa);
    oa.innerHTML = 'baidu';
    oa.style.color = 'green';
    oa.href = 'http://www.baidu.com'
    console.dir(oa);
    odiv.appendChild(oa)

获取节点（实际项目中一般不使用  了解就好 

odiv.childlist 所有节点

odiv.children 所有标签节点

上一个兄弟标签节点

odiv.previousElementSibling

运动函数。

通过函数定时器 让标签属性改变 是一步一步的完成 不是瞬时完成的 执行效果看上去就像是 运动效果

补充 bom 的标签占位内容

 var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');

        // div标签占位

        // // 内容 + padding + border
        // console.log( oDiv.offsetWidth );
        // console.log( oDiv.offsetHeight );

        // // 内容 + padding
        // console.log( oDiv.clientWidth );
        // console.log( oDiv.clientHeight );

        // // 上 左 边框线宽度
        // console.log( oDiv.clientTop );//（少用）
        // console.log( oDiv.clientLeft );


        // 定位父级的间距
        console.log(oP.offsetParent);
        console.log(oP.offsetTop);//如果父级有定位，则按父级，无定位找body
        console.log(oP.offsetLeft);

 e.clientX  e.clientY 获得鼠标坐标

op.offsetTop

pf.offsetLeft