动态创建dom元素
js中元素的获取分为四种
document.getElementById("")//双引号内写要获取元素的类名 document.getElementByClass("")
document.getElementByName("")
document.getElementsByTagName("")
document.getElementByName("")
document.getElementsByTagName("")
添加点击事件 并创建dom元素
btn.onclick=function(){
//创建dom元素 默认在所有子节点后插入
var createlement=document.createElement("div");
//设定其为b_y的子集
b_y.appendChild(createlement);
//设定创建元素的类名称 若有多个空格隔开去写 以免覆盖消失
createlement.className="m_child";
};
寻找子节点的方法
childNodes 为查找当前元素子节点 是一个集合 (会涉及所有的 比如空格) 元素的节点类型为1,其他不考虑
childElementCount 子元素的个数
children 直获取当前元素的子节点 是一个集合
firstChild 为Node型 第一个子节点 lastChild 最后一个子节点 也是一个集合
firstElementChild 为当前元素的第一个子元素节点
lastElementChild 为当前元素的最后一个子元素节点
var btn1=document.getElementById("btn1");
btn1.onclick= function () {
console.log(b_y.childNodes);
console.log(b_y.childElementCount)
console.log(b_y.children)
console.log(b_y.firstChild);
console.log(b_y.lastChild)
console.log(b_y.firstElementChild)
console.log(b_y.lastElementChild)
}
insertBefore(插入元素 插入位置) 插入元素
nextElementSibling 为寻找下一个同胞元素
previousElementSibling 为寻找前一个同胞元素;
var a=document.createElement("span");
a.innerHTML="我是创建的span";
b_y.insertBefore(a,b_y.firstElementChild);
b_y.insertBefore(a,b_y.lastElementChild);
nextSibling(Node) previousSibling(Node)
console.log(b_y.nextSibling);
console.log(b_y.nextElementSibling)
console.log(b_y.previousSibling);
console.log(b_y.previousElementSibling);
dom元素的移除:removeAttribute 参数为字符串类型的属性名称 移除对象的属性
setAttribute(属性名称 属性值) 设置元素的属性
查找父节点 parentNode 没个元素只有一个父节
parentElement 只有ie浏览器支持
b_y.remove()
b_y.removeAttribute("id")
b_y.setAttribute("style"," border:2px dashed red;");
console.log(b_y.parentNode);
计时器 做动画 或者延迟代码的执行
设定计时器:
etInterval() 循环执行
setTimeout() 只执行一次
关闭计时器
clearInterval()
clearTimeout()