Dom方法整理

获取节点与添加文字以及标签：

	//通过DOM获取了相关id的div的节点
    let layer1 = document.getElementById("layer1"); 
    layer1.innerHTML = "<h1>欢迎你使用DOM</h1>";
	layer1.innerText="111";
    //获取界面上所有的div节点
    let divs = document.getElementsByTagName("div");
    console.log(divs);

在相关标签下获得相关内容：

 //getElementXXX相关方法可以用到任意的几点下面来进行查找
    let layer1 = document.getElementById("layer1"); 
    let ls = layer1.getElementsByTagName("div");
    
    //关注一下innerHTML与innerText之间的差别
    console.log(layer1.innerHTML);
    console.log(layer1.innerText);

    //getElementsByClassName
    let layers = document.getElementsByClassName("layer2");
    console.log(layers);

    //只有通过document去进行查找
    //而且返回的不再是HTMLCollection对象
    //是一个NodeList对象，不过也是一个类似于数组的对象,注意，并不是数组
    let names = document.getElementsByName("p1");
    names.forEach(x => x.innerHTML = "123456789");


    //querySelector() 获取第一个查找到了类样式对象
    let cls = document.querySelector(".layer2");
    console.log(cls);
    
    //querySelectorAll 获取所有的类样式
    let layer1 = document.getElementById("layer1")
    let cls = layer1.querySelectorAll(".my_li");
    console.log(cls);

关于节点：

在IE8以下的浏览器中获取的firstChild就是一个标签节点
但是在其他的浏览器如果第一个节点下面有空白换行，那就是一个文本节点

 	div1.innerHTML = `<p>这是一个html节点</p>`;
    //创建和添加
    let div1 = document.getElementById("div1");
    //通过查找现有id创建一个标签节点
    let p = document.createElement("p");
    //创建文本节点
    let txt = document.createTextNode("这是一个文本结点");

    p.appendChild(txt);
	div1.appendChild(p);	

//克隆节点(true为深度克隆，父节点子节点全部进行克隆)
   btnClone.onclick = function(){
        let p = tp.cloneNode(true);
        div1.appendChild(p);
    }

//替换节点
 btnReplace.onclick = () => {
        let p = document.createElement("p");
        let v = txtInput.value;
        let txt = document.createTextNode(v);
        p.appendChild(txt);
        div1.replaceChild(p,tp);
    };

//添加新节点
btnAdd.onclick = () => {
        let p = document.createElement("p");
        let v = txtInput.value;
        let txt = document.createTextNode(v);
        p.appendChild(txt);
        div1.appendChild(p);
        // 往旧节点之前插入
        // div1.insertBefore(p,tp);
    };

//删除节点
 div1.removeChild(div1.firstChild);

阻止默认事件(google等浏览器更新之后会默认加上默认事件)：

cancelBtn.onclick=()=>{
    e.preventDefault();
}

js操作样式属性时候，遵循驼峰规则：

magin-top:30px;

xxx.style.marginTop = " 30px ";

此操作无论是设置还是获取，都是**行内样式 **，当然也可以设置内部样式或者外部样式，但是优先级会模糊

弥补这一点，则可以使用document.stylesheets方法来进行内部样式的获取：

document.styleSheets[0].cssRulers;//获取内部样式的的style集合，得到的还是一个集合

document.styleSheets[0].cssRulers[0];//获取内部样式中某一个style中的某一个属性

layer.offsetHeight;
layer.clientHeight;

考虑到情况的复杂性，一般获取样式都是用

获取最终样式：getComputedStyle( id )

getComputeStyle(layer)//括号内为板块id
//获取之后是一个对象可以进行属性的相关调用

注意二者 getComputedStyle与element.style 二者之间的不同：

element.style //读取的是元素的内部样式，也就是写在元素的style属性上的样式，去获取时需要采取驼峰规则来代替 “-” 符号
getComputedStyle//读取的是最终样式，这是一个包含了内部样式，外部样式以及含行内样式的对象

element.style //不但支持读也支持写
getComputedStyle //只支持读不支持写