JS之DOM元素操作

1.dom操作
document.getElementsByTagName
document.getElementsByClassName
document.querySelector("#btn");
2.节点操作
nextSibling 下一个节点同胞元素
previousSibling 上一个节点同胞元素
nextElementSibling 下一个同胞元素
previousElementSibling 上一个同胞元素
parentElement 获取当前节点的父元素

children 获取当前元素的子元素
firstChild 获取的是第一个节点
lastChild 获取的是最后一个节点
firstElementChild 获取的是第一个元素
lastElementChild 获取的是第一个元素
childElementCount 获取当前子元素的个数
3.dom创建
动态创建dom元素
createElement
js操作的样式全是行内样式

var divs=document.createElement("div");//创建一个div
//添加类名称
divs.className="mydiv";
//添加样式
divs.style.border="solid 1px black";
div.style="width:100px;height:100px;"
//添加在body里面
document.body.appendChild(divs);

offsetLeft 左偏移量 offsetTop 上偏移量 offsetHeight offsetWidth

自定义属性

• 设置setAttribute

element.setAttribute("data-index",0);

• 获取getAttribute

element.getAttribute("data-index");

//获取或设置元素html文本
btn.innerHTML
//获取或设置元素的文本
btn.innerText