获取节点与添加文字以及标签:
//通过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 //只支持读不支持写